Reanimate.Svg.Constructors

Functions for creating basic SVG elements and applying transformations to them.

Primitive shapes

mkCircle :: Double -> Tree

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

mkEllipse :: Double -> Double -> Tree

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 :: Double -> Double -> Tree

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

mkLine :: (Double, Double) -> (Double, Double) -> Tree

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

mkPath :: [PathCommand] -> Tree

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

mkPathString :: String -> Tree

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

mkPathText :: Text -> Tree

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.

mkLinePath :: [(Double, Double)] -> Tree

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

mkLinePathClosed :: [(Double, Double)] -> Tree

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

mkClipPath

Arguments

:: String

ID of the clip path, which can then be referred to by other elements using withClipPathRef.

-> [Tree]

List of shapes that will determine the final shape of the clipping region

-> Tree

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

mkText :: Text -> Tree

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")

Grouping shapes and definitions

mkGroup :: [Tree] -> Tree

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

mkDefinitions :: [Tree] -> Tree

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

mkUse :: String -> Tree

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

Attributes

withId :: String -> Tree -> Tree

Assigns ID attribute to given image.

withStrokeColor :: String -> Tree -> Tree

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

withStrokeColorPixel :: PixelRGBA8 -> Tree -> Tree

withStrokeDashArray :: [Double] -> Tree -> Tree

withStrokeLineJoin :: LineJoin -> Tree -> Tree

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

withFillColor :: String -> Tree -> Tree

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

withFillColorPixel :: PixelRGBA8 -> Tree -> Tree

withFillOpacity :: Double -> Tree -> Tree

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

withGroupOpacity :: Double -> Tree -> Tree

withStrokeWidth :: Double -> Tree -> Tree

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

withClipPathRef

Arguments

:: ElementRef

Reference to clip path defined previously (e.g. by mkClipPath)

-> Tree

Image that will be clipped by the referenced clip path

-> Tree

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

Transformations

center :: Tree -> Tree

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

centerX :: Tree -> Tree

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

centerY :: Tree -> Tree

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

centerUsing :: Tree -> Tree -> Tree

translate :: Double -> Double -> Tree -> Tree

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

rotate :: Double -> Tree -> Tree

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

rotateAroundCenter :: Double -> Tree -> Tree

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

rotateAround :: Double -> RPoint -> Tree -> Tree

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

scale :: Double -> Tree -> Tree

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 :: Double -> Double -> Tree -> Tree

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

scaleToWidth :: Double -> Tree -> Tree

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

scaleToHeight :: Double -> Tree -> Tree

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

scaleXY :: Double -> Double -> Tree -> Tree

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

flipXAxis :: Tree -> Tree

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

flipYAxis :: Tree -> Tree

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

aroundCenter :: (Tree -> Tree) -> Tree -> Tree

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.

aroundCenterX :: (Tree -> Tree) -> Tree -> Tree

aroundCenterY :: (Tree -> Tree) -> Tree -> Tree

withTransformations :: [Transformation] -> Tree -> Tree

Apply list of transformations to given image.

withViewBox :: (Double, Double, Double, Double) -> Tree -> Tree

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"

Other

mkColor :: String -> Texture

Create Texture based on SVG color name. See https://en.wikipedia.org/wiki/Web_colors#X11_color_names for the list of available names. If the provided name doesn't correspond to valid SVG color name, white-ish color is used.

mkBackground :: String -> Tree

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

Example:

animate $ const $ mkBackground "yellow"

mkBackgroundPixel :: PixelRGBA8 -> Tree

gridLayout :: [[Tree]] -> Tree

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.