A collage is a collection of 2D forms. There are no strict positioning relationships between forms, so you are free to do all kinds of 2D graphics.

Turn any Element into a Form. This lets you use text, gifs, and video in your collage. This means you can move, rotate, and scale an Element however you want.

Create a filled in shape.

Create a textured shape. The texture is described by some url and is tiled to fill the entire shape.

Fill a shape with a gradient.

Outline a shape with a given line style.

Trace a path with a given line style.

Move a form by the given amount. This is a relative translation so (move (10,10) form) would move form ten pixels up and ten pixels to the right.

Move a shape in the x direction. This is relative so (moveX 10 form) moves form 10 pixels to the right.

Move a shape in the y direction. This is relative so (moveY 10 form) moves form upwards by 10 pixels.

Scale a form by a given factor. Scaling by 2 doubles the size.

Rotate a form by a given angle. Rotate takes standard Elm angles (radians) and turns things counterclockwise. So to turn form 30° to the left you would say, (rotate (degrees 30) form).

Set the alpha of a Form. The default is 1, and 0 is totally transparent.

Flatten many forms into a single Form. This lets you move and rotate them as a single unit, making it possible to build small, modular components.

Flatten many forms into a single Form and then apply a matrix transformation.

A rectangle with a given width and height.

An oval with a given width and height.

A square with a given edge length.

A circle with a given radius.

A regular polygon with N sides. The first argument specifies the number of sides and the second is the radius. So to create a pentagon with radius 30 you would say:

ngon 5 30

Create an arbitrary polygon by specifying its corners in order. polygon will automatically close all shapes, so the given list of points does not need to start and end with the same position.

Create a path along a given line segment.

Create a path that follows a sequence of points.

Create a solid line style with a given color.

Create a dashed line style with a given color. Dashing equals [8,4].

Create a dotted line style with a given color. Dashing equals [3,3].

All of the attributes of a line style. This lets you build up a line style however you want. You can also update existing line styles with record updates.

The shape of the ends of a line.

The shape of the “joints” of a line, where each line segment meets. Sharp takes an argument to limit the length of the joint. This defaults to 10.

The default line style, which is solid black with flat caps and sharp joints. You can use record updates to build the line style you want. For example, to make a thicker line, you could say:

{ defaultLine | width <- 10 }