This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 1.0.1
SVG Path DSL - An Elm DSL for SVG Path elements
version 1.0.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 2.0.0
Committed At 2017-02-09 15:18:51 UTC
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

Modules

README

#SVG Path DSL - An Elm DSL for SVG Path elements

A nicer way to create svg paths.

Svg paths are easy to read for computers, but not for humans. This package provides a nicer way to create paths, providing safety (no runtime exceptions!) and less room for typos.

#Example

module Cross exposing (main)

-- source: https://github.com/gampleman/elm-visualization/blob/1.0.0/examples/Cross.elm

import Svg exposing (svg, g, path)
import Svg.Attributes exposing (transform, d, stroke, fill, strokeLinejoin, strokeWidth)
import Svg.Path exposing (pathToString, subpath, startAt, lineToMany, emptySubpath, closed)


cross =
    [ ( -60, -20 )
    , ( -20, -20 )
    , ( -20, -60 )
    , ( 20, -60 )
    , ( 20, -20 )
    , ( 60, -20 )
    , ( 60, 20 )
    , ( 20, 20 )
    , ( 20, 60 )
    , ( -20, 60 )
    , ( -20, 20 )
    , ( -60, 20 )
    ]


polygon ps =
    case ps of
        [] ->
            emptySubpath

        x :: xs ->
            subpath (startAt x) closed [ lineToMany xs ]


main =
    svg []
        [ g [ transform "translate(70,70)" ]
            [ path
                [ d (pathToString [ polygon cross ])
                , stroke "#000"
                , fill "none"
                , strokeLinejoin "round"
                , strokeWidth "10"
                ]
                []
            ]
        ]

Draws <path d="M-60,-20 L-20,-20 L-20,-60 L20,-60 L20,-20 L60,-20 L60,20 L20,20 L20,60 L-20,60 L-20,20 L-60,20 Z" stroke="#000" fill="none" stroke-linejoin="round" stroke-width="10">

#What's next

This is a very basic library. See it as a basic building block to build more complex libraries with.

Here are some ideas:

  • A parser for paths.
  • Optimizing paths (for example joining multiple lineTo's into one lineToMany)
  • Higher-level functionality - composing paths
  • type-safe svg
  • graphics libraries, inspired by Haskell's diagrams or OCaml's Vg or the ideas discussed in funcional image synthesis.
  • visualization libraries (like D3)

Please contact me if you want to work or collaborate on these!