[{"name":"Geometry.Svg","comment":" Draw 2D `elm-geometry` values as SVG.\r\n\r\n\r\n## Reading this documentation\r\n\r\nFor the examples, assume that the following imports are present:\r\n\r\n import Svg exposing (Svg)\r\n import Svg.Attributes as Attributes\r\n import Geometry.Svg as Svg\r\n\r\nAlso assume that any necessary `elm-geometry` modules/types have been imported\r\nusing the following format:\r\n\r\n import Point2d exposing (Point2d)\r\n\r\nAll examples use a Y-up coordinate system instead of SVG's Y-down (window)\r\ncoordinate system; they were all rendered with a final [`relativeTo`](#relativeTo)\r\ncall to flip the example 'upside down' for display.\r\n\r\n\r\n# Geometry\r\n\r\nThese functions turn `elm-geometry` 2D values into SVG elements with geometric\r\nattributes such as `points` and `transform` set appropriately. Each function\r\nalso accepts a list of additional SVG attributes such as `fill` or `stroke` that\r\nshould be added to the resulting element.\r\n\r\n@docs lineSegment2d, triangle2d, polyline2d, polygon2d, arc2d, ellipticalArc2d, circle2d, ellipse2d, quadraticSpline2d, cubicSpline2d, boundingBox2d\r\n\r\n\r\n# Transformations\r\n\r\nThese functions allow you to use all the normal `elm-geometry` 2D transformations on\r\narbitrary fragments of SVG. For example,\r\n\r\n Svg.mirrorAcross Axis2d.x\r\n (Svg.lineSegment2d [] lineSegment)\r\n\r\ndraws a line segment as SVG and then mirrors that SVG fragment. This is visually\r\nthe same as\r\n\r\n Svg.lineSegment2d []\r\n (LineSegment2d.mirrorAcross Axis2d.x lineSegment)\r\n\r\nwhich instead mirrors the line segment first and then draws the mirrored line\r\nsegment as SVG.\r\n\r\nIn the above example only a single SVG element was transformed, but all of these\r\ntransformation functions work equally well on arbitrarily complex fragments of\r\nSVG such as nested groups of elements of different types:\r\n\r\n Svg.rotateAround Point2d.origin (degrees 30)\r\n (Svg.g [ Attributes.stroke \"blue\" ]\r\n [ Svg.lineSegment2d [] lineSegment\r\n , Svg.circle2d [] someCircle\r\n , Svg.g [ Attributes.fill \"orange\" ]\r\n [ Svg.triangle2d [] firstTriangle\r\n , Svg.triangle2d [] secondTriangle\r\n ]\r\n ]\r\n )\r\n\r\nIf the transformation changes frequently (an animated rotation angle, for\r\nexample) while the geometry itself remains constant, using an SVG transformation\r\ncan be more efficient since the geometry itself does not have to be recreated\r\n(the SVG virtual DOM only has to update a transformation matrix).\r\n\r\n@docs scaleAbout, rotateAround, translateBy, mirrorAcross\r\n\r\n\r\n# Coordinate transformations\r\n\r\nSimilar to the above transformations, these functions allow `elm-geometry`\r\ncoordinate conversion transformations to be applied to arbitrary SVG elements.\r\n\r\n@docs relativeTo, placeIn\r\n\r\n","unions":[],"aliases":[],"values":[{"name":"arc2d","comment":" Draw an `Arc2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n arc : Svg Never\r\n arc =\r\n Svg.arc2d\r\n [ Attributes.stroke \"blue\"\r\n , Attributes.strokeWidth \"5\"\r\n ]\r\n (Arc2d.with\r\n { centerPoint =\r\n Point2d.fromCoordinates ( 100, 100 )\r\n , startPoint =\r\n Point2d.fromCoordinates ( 150, 50 )\r\n , sweptAngle = degrees 90\r\n }\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> Arc2d.Arc2d -> Svg.Svg msg"},{"name":"boundingBox2d","comment":" Draw a bounding box as an SVG `` with the given attributes.\r\n","type":"List.List (Svg.Attribute msg) -> BoundingBox2d.BoundingBox2d -> Svg.Svg msg"},{"name":"circle2d","comment":" Draw a `Circle2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n circle : Svg Never\r\n circle =\r\n Svg.circle2d\r\n [ Attributes.fill \"orange\"\r\n , Attributes.stroke \"blue\"\r\n , Attributes.strokeWidth \"2\"\r\n ]\r\n (Circle2d.with\r\n { centerPoint =\r\n Point2d.fromCoordinates ( 150, 150 )\r\n , radius = 10\r\n }\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> Circle2d.Circle2d -> Svg.Svg msg"},{"name":"cubicSpline2d","comment":" Draw a cubic spline as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n cubicSpline : Svg Never\r\n cubicSpline =\r\n let\r\n startPoint =\r\n Point2d.fromCoordinates ( 50, 50 )\r\n\r\n startControlPoint =\r\n Point2d.fromCoordinates ( 100, 150 )\r\n\r\n endControlPoint =\r\n Point2d.fromCoordinates ( 150, 25 )\r\n\r\n endPoint =\r\n Point2d.fromCoordinates ( 200, 125 )\r\n\r\n spline =\r\n CubicSpline2d.with\r\n { startPoint = startPoint\r\n , startControlPoint = startControlPoint\r\n , endControlPoint = endControlPoint\r\n , endPoint = endPoint\r\n }\r\n\r\n points =\r\n [ startPoint\r\n , startControlPoint\r\n , endControlPoint\r\n , endPoint\r\n ]\r\n\r\n drawPoint point =\r\n Svg.circle2d []\r\n (Circle2d.withRadius 3 point)\r\n in\r\n Svg.g [ Attributes.stroke \"blue\" ]\r\n [ Svg.cubicSpline2d\r\n [ Attributes.strokeWidth \"3\"\r\n , Attributes.strokeLinecap \"round\"\r\n , Attributes.fill \"none\"\r\n ]\r\n spline\r\n , Svg.polyline2d\r\n [ Attributes.strokeWidth \"1\"\r\n , Attributes.fill \"none\"\r\n , Attributes.strokeDasharray \"3 3\"\r\n ]\r\n (Polyline2d.fromVertices points)\r\n , Svg.g [ Attributes.fill \"white\" ]\r\n (List.map drawPoint points)\r\n ]\r\n\r\n","type":"List.List (Svg.Attribute msg) -> CubicSpline2d.CubicSpline2d -> Svg.Svg msg"},{"name":"ellipse2d","comment":" Draw an `Ellipse2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n ellipse : Svg Never\r\n ellipse =\r\n Svg.ellipse2d\r\n [ Attributes.fill \"orange\"\r\n , Attributes.stroke \"blue\"\r\n , Attributes.strokeWidth \"2\"\r\n ]\r\n (Ellipse2d.with\r\n { centerPoint =\r\n Point2d.fromCoordinates ( 150, 150 )\r\n , xDirection =\r\n Direction2d.fromAngle (degrees -30)\r\n , xRadius = 60\r\n , yRadius = 30\r\n }\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> Ellipse2d.Ellipse2d -> Svg.Svg msg"},{"name":"ellipticalArc2d","comment":" Draw an `EllipticalArc2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n ellipticalArc : Svg Never\r\n ellipticalArc =\r\n Svg.ellipticalArc2d\r\n [ Attributes.stroke \"blue\"\r\n , Attributes.fill \"none\"\r\n , Attributes.strokeWidth \"5\"\r\n , Attributes.strokeLinecap \"round\"\r\n ]\r\n (EllipticalArc2d.with\r\n { centerPoint =\r\n Point2d.fromCoordinates ( 100, 10 )\r\n , xDirection = Direction2d.x\r\n , xRadius = 50\r\n , yRadius = 100\r\n , startAngle = 0\r\n , sweptAngle = degrees 180\r\n }\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> EllipticalArc2d.EllipticalArc2d -> Svg.Svg msg"},{"name":"lineSegment2d","comment":" Draw a `LineSegment2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n lineSegment : Svg Never\r\n lineSegment =\r\n Svg.lineSegment2d\r\n [ Attributes.stroke \"blue\"\r\n , Attributes.strokeWidth \"5\"\r\n ]\r\n (LineSegment2d.fromEndpoints\r\n ( Point2d.fromCoordinates ( 100, 100 )\r\n , Point2d.fromCoordinates ( 200, 200 )\r\n )\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> LineSegment2d.LineSegment2d -> Svg.Svg msg"},{"name":"mirrorAcross","comment":" Mirror arbitrary SVG across a given axis.\r\n\r\n\r\n\r\n mirrored : Svg Never\r\n mirrored =\r\n let\r\n horizontalAxis =\r\n Axis2d.with\r\n { originPoint =\r\n Point2d.fromCoordinates ( 0, 220 )\r\n , direction = Direction2d.x\r\n }\r\n\r\n horizontalSegment =\r\n LineSegment2d.along horizontalAxis 50 250\r\n\r\n angledAxis =\r\n Axis2d.with\r\n { originPoint =\r\n Point2d.fromCoordinates ( 0, 150 )\r\n , direction =\r\n Direction2d.fromAngle (degrees -10)\r\n }\r\n\r\n angledSegment =\r\n LineSegment2d.along angledAxis 50 250\r\n in\r\n Svg.g []\r\n [ polygon\r\n , Svg.mirrorAcross horizontalAxis polygon\r\n , Svg.mirrorAcross angledAxis polygon\r\n , Svg.g\r\n [ Attributes.strokeWidth \"0.5\"\r\n , Attributes.stroke \"black\"\r\n , Attributes.strokeDasharray \"3 3\"\r\n ]\r\n [ Svg.lineSegment2d [] horizontalSegment\r\n , Svg.lineSegment2d [] angledSegment\r\n ]\r\n ]\r\n\r\n","type":"Axis2d.Axis2d -> Svg.Svg msg -> Svg.Svg msg"},{"name":"placeIn","comment":" Take SVG defined in local coordinates relative to a given reference frame,\r\nand return that SVG expressed in global coordinates.\r\n\r\nThis can be useful for taking a chunk of SVG and 'stamping' it in different\r\npositions with different orientations:\r\n\r\n\r\n\r\n placed : Svg Never\r\n placed =\r\n let\r\n vertices =\r\n [ Point2d.origin\r\n , Point2d.fromCoordinates ( 40, 0 )\r\n , Point2d.fromCoordinates ( 50, 25 )\r\n , Point2d.fromCoordinates ( 10, 25 )\r\n ]\r\n\r\n stamp =\r\n Svg.polygon2d\r\n [ Attributes.fill \"orange\"\r\n , Attributes.stroke \"blue\"\r\n , Attributes.strokeWidth \"2\"\r\n ]\r\n (Polygon2d.fromVertices vertices)\r\n\r\n frames =\r\n [ Frame2d.atPoint\r\n (Point2d.fromCoordinates ( 25, 25 ))\r\n , Frame2d.atPoint\r\n (Point2d.fromCoordinates ( 100, 25 ))\r\n , Frame2d.atPoint\r\n (Point2d.fromCoordinates ( 175, 25 ))\r\n |> Frame2d.rotateBy (degrees 20)\r\n , Frame2d.atPoint\r\n (Point2d.fromCoordinates ( 25, 150 ))\r\n , Frame2d.atPoint\r\n (Point2d.fromCoordinates ( 100, 100 ))\r\n |> Frame2d.rotateBy (degrees 20)\r\n , Frame2d.atPoint\r\n (Point2d.fromCoordinates ( 150, 150 ))\r\n |> Frame2d.rotateBy (degrees -30)\r\n ]\r\n in\r\n Svg.g []\r\n (frames\r\n |> List.map\r\n (\\frame -> Svg.placeIn frame stamp)\r\n )\r\n\r\n","type":"Frame2d.Frame2d -> Svg.Svg msg -> Svg.Svg msg"},{"name":"polygon2d","comment":" Draw a `Polygon2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n polygon : Svg Never\r\n polygon =\r\n Svg.polygon2d\r\n [ Attributes.stroke \"blue\"\r\n , Attributes.fill \"orange\"\r\n , Attributes.strokeWidth \"3\"\r\n ]\r\n (Polygon2d.with\r\n { outerLoop =\r\n [ Point2d.fromCoordinates ( 100, 200 )\r\n , Point2d.fromCoordinates ( 120, 150 )\r\n , Point2d.fromCoordinates ( 180, 150 )\r\n , Point2d.fromCoordinates ( 200, 200 )\r\n ]\r\n , innerLoops =\r\n [ [ Point2d.fromCoordinates ( 150, 185 )\r\n , Point2d.fromCoordinates ( 165, 160 )\r\n , Point2d.fromCoordinates ( 135, 160 )\r\n ]\r\n ]\r\n }\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> Polygon2d.Polygon2d -> Svg.Svg msg"},{"name":"polyline2d","comment":" Draw a `Polyline2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n polyline : Svg Never\r\n polyline =\r\n Svg.polyline2d\r\n [ Attributes.stroke \"blue\"\r\n , Attributes.fill \"none\"\r\n , Attributes.strokeWidth \"5\"\r\n , Attributes.strokeLinecap \"round\"\r\n , Attributes.strokeLinejoin \"round\"\r\n ]\r\n (Polyline2d.fromVertices\r\n [ Point2d.fromCoordinates ( 100, 100 )\r\n , Point2d.fromCoordinates ( 120, 200 )\r\n , Point2d.fromCoordinates ( 140, 100 )\r\n , Point2d.fromCoordinates ( 160, 200 )\r\n , Point2d.fromCoordinates ( 180, 100 )\r\n , Point2d.fromCoordinates ( 200, 200 )\r\n ]\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> Polyline2d.Polyline2d -> Svg.Svg msg"},{"name":"quadraticSpline2d","comment":" Draw a quadratic spline as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n quadraticSpline : Svg Never\r\n quadraticSpline =\r\n let\r\n startPoint =\r\n Point2d.fromCoordinates ( 50, 50 )\r\n\r\n controlPoint =\r\n Point2d.fromCoordinates ( 100, 150 )\r\n\r\n endPoint =\r\n Point2d.fromCoordinates ( 150, 100 )\r\n\r\n spline =\r\n QuadraticSpline2d.with\r\n { startPoint = startPoint\r\n , controlPoint = controlPoint\r\n , endPoint = endPoint\r\n }\r\n\r\n points =\r\n [ startPoint, controlPoint, endPoint ]\r\n\r\n drawPoint point =\r\n Svg.circle2d []\r\n (Circle2d.withRadius 3 point)\r\n in\r\n Svg.g [ Attributes.stroke \"blue\" ]\r\n [ Svg.quadraticSpline2d\r\n [ Attributes.strokeWidth \"3\"\r\n , Attributes.strokeLinecap \"round\"\r\n , Attributes.fill \"none\"\r\n ]\r\n spline\r\n , Svg.polyline2d\r\n [ Attributes.strokeWidth \"1\"\r\n , Attributes.fill \"none\"\r\n , Attributes.strokeDasharray \"3 3\"\r\n ]\r\n (Polyline2d.fromVertices points)\r\n , Svg.g [ Attributes.fill \"white\" ]\r\n (List.map drawPoint points)\r\n ]\r\n\r\n","type":"List.List (Svg.Attribute msg) -> QuadraticSpline2d.QuadraticSpline2d -> Svg.Svg msg"},{"name":"relativeTo","comment":" Convert SVG expressed in global coordinates to SVG expressed in coordinates\r\nrelative to a given reference frame. Using `relativeTo` can be useful for\r\ntransforming between model space and screen space - SVG coordinates start in the\r\ntop left, so positive Y is down, while in mathematical/geometric contexts\r\npositive Y is usually up.\r\n\r\nFor example, you might develop an SVG scene in a coordinate system where X and Y\r\neach range from 0 to 300 and positive Y is up. To turn this into a 300x300 SVG\r\ndrawing, first define the top-left SVG frame (coordinate system) in terms of\r\nthe model coordinate system:\r\n\r\n topLeftPoint =\r\n Point2d.fromCoordinates ( 0, 300 )\r\n\r\n topLeftFrame =\r\n Frame2d.atPoint topLeftPoint |> Frame2d.flipY\r\n\r\n(As expressed in the model frame, the top-left SVG frame is at the point\r\n(0, 300) and its Y direction is equal to the global negative Y direction.) If\r\n`scene` is an SVG element representing your scene, you could then transform it\r\ninto top-left SVG window coordinates and render the result to HTML with\r\n\r\n Svg.svg\r\n [ Attributes.width \"300\"\r\n , Attributes.height \"300\"\r\n ]\r\n [ Svg.relativeTo topLeftFrame scene ]\r\n\r\n","type":"Frame2d.Frame2d -> Svg.Svg msg -> Svg.Svg msg"},{"name":"rotateAround","comment":" Rotate arbitrary SVG around a given point by a given angle.\r\n\r\n\r\n\r\n rotated : Svg Never\r\n rotated =\r\n let\r\n angles =\r\n List.range 0 9\r\n |> List.map\r\n (\\n -> degrees 30 * toFloat n)\r\n\r\n referencePoint =\r\n Point2d.fromCoordinates ( 200, 150 )\r\n\r\n referencePoint =\r\n Svg.circle2d [ Attributes.fill \"black\" ]\r\n (Circle2d.with\r\n { centerPoint = referencePoint\r\n , radius = 3\r\n }\r\n )\r\n\r\n rotatedCircle : Float -> Svg Never\r\n rotatedCircle angle =\r\n Svg.rotateAround referencePoint angle circle\r\n in\r\n Svg.g []\r\n (referencePoint\r\n :: List.map rotatedCircle angles\r\n )\r\n\r\n","type":"Point2d.Point2d -> Basics.Float -> Svg.Svg msg -> Svg.Svg msg"},{"name":"scaleAbout","comment":" Scale arbitrary SVG around a given point by a given scale.\r\n\r\n\r\n\r\n scaled : Svg Never\r\n scaled =\r\n let\r\n scales =\r\n [ 1.0, 1.5, 2.25 ]\r\n\r\n referencePoint =\r\n Point2d.fromCoordinates ( 100, 100 )\r\n\r\n referencePoint =\r\n Svg.circle2d [ Attributes.fill \"black\" ]\r\n (Circle2d.with\r\n { centerPoint = referencePoint\r\n , radius = 3\r\n }\r\n )\r\n\r\n scaledCircle : Float -> Svg Never\r\n scaledCircle scale =\r\n Svg.scaleAbout referencePoint scale circle\r\n in\r\n Svg.g []\r\n (referencePoint\r\n :: List.map scaledCircle scales\r\n )\r\n\r\nNote how _everything_ is scaled, including the stroke width of the circles. This\r\nmay or may not be what you want; if you wanted the same stroke width on all\r\ncircles, you could instead scale the `Circle2d` values themselves using\r\n`Circle2d.scaleAbout` and then draw the scaled circles with a specific stroke\r\nwidth using `Svg.circle2d`.\r\n\r\n","type":"Point2d.Point2d -> Basics.Float -> Svg.Svg msg -> Svg.Svg msg"},{"name":"translateBy","comment":" Translate arbitrary SVG by a given displacement.\r\n\r\n\r\n\r\n translated : Svg Never\r\n translated =\r\n Svg.g []\r\n [ polyline\r\n , polyline\r\n |> Svg.translateBy\r\n (Vector2d.fromComponents ( 0, 40 ))\r\n , polyline\r\n |> Svg.translateBy\r\n (Vector2d.fromComponents ( 5, -60 ))\r\n ]\r\n\r\n","type":"Vector2d.Vector2d -> Svg.Svg msg -> Svg.Svg msg"},{"name":"triangle2d","comment":" Draw a `Triangle2d` as an SVG `` with the given attributes.\r\n\r\n\r\n\r\n triangle : Svg Never\r\n triangle =\r\n Svg.triangle2d\r\n [ Attributes.stroke \"blue\"\r\n , Attributes.strokeWidth \"10\"\r\n , Attributes.strokeLinejoin \"round\"\r\n , Attributes.fill \"orange\"\r\n ]\r\n (Triangle2d.fromVertices\r\n ( Point2d.fromCoordinates ( 100, 100 )\r\n , Point2d.fromCoordinates ( 200, 100 )\r\n , Point2d.fromCoordinates ( 100, 200 )\r\n )\r\n )\r\n\r\n","type":"List.List (Svg.Attribute msg) -> Triangle2d.Triangle2d -> Svg.Svg msg"}],"binops":[]}]