A Svg Node.

It can be turned into a string using toString or into html using toHtml.

define a cirlce svg node

create a rectangle svg node

turn a path into a svg node.

define a template.

You can use a template with use.

define a mask.

You can use the mask with withMask.

Use a defined template

group nodes to apply styling to all nodes at once.

fill the shape with a color

use no color for the filling

use a color for the border of the shape

define the with of the border of the shape

don't draw the border of the shape

Use a defined mask

add a attribute

Convert the list of svg nodes into a svg-string.

convert the svg nodes into html.

Note: the svg will be displayed as the background of a div.

I tried converting it into a Svg node, but my browser didn't seem to like it.

Alternatively i looked into elm/Svg, but there i can't define custom attributes.

turn the list of svg nodes into a data URI.

backgroundImage : Html.Attribute msg
backgroundImage =
    Html.Attributes.style "background-image"
        ( "url(\\""
            ++ toDataURI { width = 100, height = 100 }
                svgNodes
            ++ "\\")"
        )

A Program for viewing your Svg creations

Convert into a program for viewing your Svg creations.

You might want to use this in combination with hot-loading, while you write your svg.