Path.LowLevel

A low-level package for working with svg path strings

This package has two use cases

convert Elm data into svg paths
convert svg path syntax into elm data

It is meant as a foundation: there is little type safety and convenience. It's just a literal translation of the SVG spec into elm data types.

toString : List SubPath -> String

Convert a list of subpaths to svg path syntax

let
    myPath =
        [ { moveto = MoveTo Relative ( 10, 20 )
          , drawtos =
                [ EllipticalArc Absolute
                    { radii = ( 25, 25 )
                    , xAxisRotate = -30
                    , arcFlag = SmallestArc
                    , direction = CounterClockwise
                    , target = ( 50, -25 )
                    }
                ]
          }
        ]
in
    toString myPath --> "m10,20 A25,25 -30 0,1 50,-25"

element : List (Attribute msg) -> List SubPath -> Svg msg

Given some attributes and a list of subpaths, create an Svg path element.

The subpaths will be converted to a string and added as the d attribute on the element

type alias SubPath =

{ moveto : MoveTo

, drawtos : List DrawTo

}

A subpath is a MoveTo followed by a list of DrawTos

type Mode

= Relative

| Absolute

The mode of an instruction

type MoveTo

= MoveTo Mode Coordinate

MoveTo instructions move the cursor, but don't draw anything.

type DrawTo

= LineTo Mode (List Coordinate)

| Horizontal Mode (List Float)

| Vertical Mode (List Float)

| CurveTo Mode (List ( Coordinate, Coordinate, Coordinate ))

| SmoothCurveTo Mode (List ( Coordinate, Coordinate ))

| QuadraticBezierCurveTo Mode (List ( Coordinate, Coordinate ))

| SmoothQuadraticBezierCurveTo Mode (List Coordinate)

| EllipticalArc Mode (List EllipticalArcArgument)

| ClosePath

Constructors for DrawTo instructions

type alias Coordinate =

( Float, Float )

Represent a point in 2D space with a tuple of floats

type ArcFlag

= SmallestArc

| LargestArc

Determine which arc to draw

type Direction

= Clockwise

| CounterClockwise

Determine which arc to draw

type alias EllipticalArcArgument =

{ radii : ( Float, Float )

, xAxisRotate : Float

, arcFlag : ArcFlag

, direction : Direction

, target : Coordinate

}

The arguments for an Arc

encodeFlags : ( ArcFlag, Direction ) -> ( Int, Int )

Turn the flags into numbers

case arcFlag of
    LargestArc -> 1
    SmallestArc -> 0


case direction of
    Clockwise -> 0
    CounterClockwise -> 1

decodeFlags : ( Int, Int ) -> Maybe ( ArcFlag, Direction )

Try to decode two ints into flag values. Inverse of encodeFlags.

folkertdev/svg-path-lowlevel/1.0.0

Path.LowLevel

Modules