Stream: show and tell

Topic: Roc SVG

view this post on Zulip Hannes (Jun 07 2023 at 06:52):

I have some plans involving using Roc to draw some SVGs, so I made a simple library to construct SVGs in a similar way to elm-svg. I didn't make it reserve a string buffer when rendering to a string yet like roc-html does, so it'd probably be very slow at rendering a large SVG at the moment.

Here's the repo: https://github.com/Hasnep/roc-svg

And here's an example program:

app "svg-example"
    packages {
        pf: "https://github.com/roc-lang/basic-cli/releases/download/0.3.2/tE4xS_zLdmmxmHwHih9kHWQ7fsXtJr7W7h3425-eZFk.tar.br",
        svg: "https://github.com/Hasnep/roc-svg/releases/download/v0.0.4/3IFZntSaIx0CeCv5AsR1CIJOFGLvBtffVCWRZ3kw29U.tar.br",
    }
    imports [pf.Stdout, svg.Svg, svg.Attribute]
    provides [main] to pf

main =
    Svg.svg
        [
            Attribute.width "240",
            Attribute.height "240",
            Attribute.viewBox "0 0 51 53",
            Attribute.fill "none",
        ]
        [
            Svg.path [Attribute.d "M23.6751 22.7086L17.655 53L27.4527 45.2132L26.4673 39.3424L23.6751 22.7086Z", Attribute.fill "#612BDE"] [],
            Svg.path [Attribute.d "M37.2438 19.0101L44.0315 26.3689L45 22L45.9665 16.6324L37.2438 19.0101Z", Attribute.fill "#8257E5"] [],
            Svg.path [Attribute.d "M23.8834 3.21052L0 0L23.6751 22.7086L23.8834 3.21052Z", Attribute.fill "#8257E5"] [],
            Svg.path [Attribute.d "M44.0315 26.3689L23.6751 22.7086L26.4673 39.3424L44.0315 26.3689Z", Attribute.fill "#8257E5"] [],
            Svg.path [Attribute.d "M50.5 22L45.9665 16.6324L45 22H50.5Z", Attribute.fill "#612BDE"] [],
            Svg.path [Attribute.d "M23.6751 22.7086L44.0315 26.3689L37.2438 19.0101L23.8834 3.21052L23.6751 22.7086Z", Attribute.fill "#612BDE"] [],
        ]
    |> Svg.render
    |> Stdout.line

which outputs

<svg width="240" height="240" viewBox="0 0 51 53" fill="none"><path d="M23.6751 22.7086L17.655 53L27.4527 45.2132L26.4673 39.3424L23.6751 22.7086Z" fill="#612BDE"></path><path d="M37.2438 19.0101L44.0315 26.3689L45 22L45.9665 16.6324L37.2438 19.0101Z" fill="#8257E5"></path><path d="M23.8834 3.21052L0 0L23.6751 22.7086L23.8834 3.21052Z" fill="#8257E5"></path><path d="M44.0315 26.3689L23.6751 22.7086L26.4673 39.3424L44.0315 26.3689Z" fill="#8257E5"></path><path d="M50.5 22L45.9665 16.6324L45 22H50.5Z" fill="#612BDE"></path><path d="M23.6751 22.7086L44.0315 26.3689L37.2438 19.0101L23.8834 3.21052L23.6751 22.7086Z" fill="#612BDE"></path></svg>

in its rendered form: output.svg

Last updated: Jul 26 2025 at 12:14 UTC