Create a circle with given radius, centered at (0, 0). See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

Create an ellipse given X-axis radius, and Y-axis radius, with center at (0, 0). See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse

mkRect width height creates a rectangle with given with and height, centered at (0, 0). See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

Create a line segment between two points given by their (x, y) coordinates. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

Create a path from the list of path commands. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands

Similar to mkPathText, but taking SVG path command as a String.

Create path from textual representation of SVG path command. If the text doesn't represent valid path command, this function fails with error. Use mkPath for type safe way of creating paths.

Create a path from a list of (x, y) coordinates of points along the path.

Create a path from a list of (x, y) coordinates of points along the path.

A clip path restricts the region to which paint can be applied. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

Insert a native text object anchored at the middle.

Example:

mkAnimation 2 $ \t -> scale 2 $ withStrokeWidth 0.05 $ mkText (T.take (round $ t*15) "text")

Merges multiple images into one. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

Create definition of graphical objects that can be used at later time. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

Create an element by referring to existing element defined previously. For example you can create a graphical element, assign ID to it using withId, wrap it in mkDefinitions and then use it via use "myId". See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

Assigns ID attribute to given image.

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-opacity

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill.

withFillColor color takes the same approach to color as mkColor. For RGB color values, use withFillColorPixel.

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/opacity

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-path

Translate given image so that the center of its bouding box coincides with coordinates (0, 0).

Translate given image so that the X-coordinate of the center of its bouding box is 0.

Translate given image so that the Y-coordinate of the center of its bouding box is 0.

Center the second argument using the bounding-box of the first.

translate x y image moves the image by x along X-axis and by y along Y-axis.

rotate angle image rotates the image around origin (0,0) counterclockwise by angle given in degrees.

rotate angle image rotates the image around the center of its bounding box counterclockwise by angle given in degrees.

rotate angle point image rotates the image around given point counterclockwise by angle given in degrees.

Scale the image uniformly by given factor along both X and Y axes. For example scale 2 image makes the image twice as large, while scale 0.5 image makes it half the original size. Negative values are also allowed, and lead to flipping the image along both X and Y axes.

scaleToSize width height resizes the image so that its bounding box has corresponding width and height.

scaleToWidth width scales the image so that the width of its bounding box ends up having given width.

scaleToHeight height scales the image so that the height of its bounding box ends up having given height.

Similar to scale, except scale factors for X and Y axes are specified separately.

Flip the image along vertical axis so that what was on the right will end up on left and vice versa.

Flip the image along horizontal so that what was on the top will end up in the bottom and vice versa.

aroundCenter f image first moves the image so the center of its bounding box is at the origin (0, 0), applies transformation f to it and then moves the transformed image back to its original position.

Same as aroundCenter but only for the X-axis.

Same as aroundCenter but only for the Y-axis.

Apply list of transformations to given image.

Switch from the default viewbox to a custom viewbox. Nesting custom viewboxes is unlikely to give good results. If you need nested custom viewboxes, you will have to configure them by hand.

The viewbox argument is (min-x, min-y, width, height).

Example:

withViewBox (0,0,1,1) $ mkBackground "yellow"

Create Texture based on a SVG color name or "none". If the provided String is not a valid value, a white-ish color is used. See https://en.wikipedia.org/wiki/Web_colors#X11_color_names for the list of available color names.

Rectangle with a uniform color and the same size as the screen.

Example:

animate $ const $ mkBackground "yellow"

Rectangle with a uniform color and the same size as the screen.

Take list of rows, where each row consists of number of images and display them in regular grid structure. All rows will get equal amount of vertical space. The images within each row will get equal amount of horizontal space, independent of the other rows. Each row can contain different number of cells.