SvgIcons.Core.Geometry

Module for geometrical shapes.

Tip: you may want to use stroke-miterlimit

Documentation

geometryExamples :: [(String, Svg)]

Some examples for this module.

geometryExamples :: [ (String, Svg) ]
geometryExamples =
  [ (,) "regular_polygon_5"      $ regularPolygon 5 0.9 (0,0)
  , (,) "regular_polygon_6"      $ regularPolygon 6 0.9 (0,0)
  , (,) "star_polygon_5"         $ starPolygonFirstSpecies 5 0.9 (0,0)
  , (,) "star_polygon_6"         $ starPolygonFirstSpecies 6 0.9 (0,0)
  , (,) "star_polygon_border_5"  $ starPolygonWithBorder 5 0.9 0.1 (0,0)
  , (,) "star_polygon_border_6"  $ starPolygonWithBorder 6 0.9 0.1 (0,0)
  , (,) "star_polygon_overlap_5" $ starPolygonOverlap 5 0.9 0.1 (0,0)
  , (,) "star_polygon_overlap_6" $ starPolygonOverlap 6 0.9 0.1 (0,0)
  , (,) "star_fat_5"             $ starFat 5 0.9 (0,0)
  , (,) "star_fat_6"             $ starFat 6 0.9 (0,0)
  , (,) "star_regular_5"         $ starRegular 5 0.9 (0,0)
  , (,) "star_regular_6"         $ starRegular 6 0.9 (0,0)
  , (,) "star_slim_5"            $ starSlim 5 0.9 (0,0)
  , (,) "star_slim_6"            $ starSlim 6 0.9 (0,0)
  , (,) "asterisk_3"             $ asterisk 3 0.9 (0,0)
  , (,) "asterisk_star_3"        $ asteriskStar 3 0.9 (0,0)
  ]

anglesHelp :: Svg

anglesHelp is just a helpful graphic showing some angles (in radians) involved in regular polygons and first species star polygons of n vertices:

1. In black: central angle of a regular polygon.
2. In blue: inner angle of a regular polygon.
3. In red: outer angle of a first species star polygon.
4. In green: inner angle of a first species star polygon.

regularPolygon

Arguments

:: Int

number of vertices

-> Float

circumradius

-> (Float, Float)

coordinates of the central point

-> Svg

resulting svg path

regularPolygon builds a regular polygon.

You can customize fill and stroke using the usual blaze-svg functions. For example:

regularPolygon 5 100 (200,300)
  ! A.fill "pink"
  ! A.stroke "#0000FF"
  ! A.strokeWidth "10"

will return a path element corresponding to a regular pentagon of radius 100 centered at point (200,300) filled in pink, green stroke and stroke width 10.

Examples:

starPolygonFirstSpecies

Arguments

:: Int

number of vertices

-> Float

circumradius

-> (Float, Float)

coordinates of the central point

-> Svg

resulting svg path

starPolygonFirstSpecies builds a first species regular star polygon.

First species means that one vertice is skipped when joining vertices. The number of vertices must be strictly greater than 4. Can be customized with the usual blaze-svg functions.

Examples:

starPolygonWithBorder

Arguments

:: Int

number of vertices

-> Float

circumradius

-> Float

width of the line

-> (Float, Float)

coordinates of the central point

-> Svg

resulting svg path

starPolygonWithBorder builds a first species regular star polygon with border.

First species means that one vertice is skipped when joining vertices. The number of vertices must be strictly greater than 4.

Examples:

starPolygonOverlap

Arguments

:: Int

number of vertices

-> Float

circumradius

-> Float

width of the line

-> (Float, Float)

coordinates of the central point

-> Svg

resulting svg path

starPolygonOverlap builds a first species regular star polygon with overlapping sides.

Visually, it only difers from the previous function when both fill and stroke are enabled.

First species means that one vertice is skipped when joining vertices. The number of vertices must be strictly greater than 4.

Examples:

starOutline

Arguments

:: Int

number of vertices

-> Float

circumradius

-> Float

inner radius (circumradius of the inner polygon)

-> (Float, Float)

coordinates of the central point

-> Svg

resulting path

starOutline builds a first species irregular star polygon.

The difference with function starPolygonFirstSpecies is the stroke: that function's stroke runs inside the figure (so it would draw a pentagram), while this function's stroke runs outside the shape (so it would draw a star). There is no visual difference if you only fill the paths (with no stroke).

starFat :: Int -> Float -> (Float, Float) -> Svg

starFat builds a first species irregular star polygon.

Works as starOutline but you don't need to specify the inner radius, it is already coded so that you get a "fat" star.

Examples:

starRegular :: Int -> Float -> (Float, Float) -> Svg

starRegular builds a first species regular star polygon.

Works as starOutline but you don't need to specify the inner radius, and you will get a regular star.

Examples:

starSlim :: Int -> Float -> (Float, Float) -> Svg

starSlim builds a first species irregular star polygon.

Works as starOutline but you don't need to specify the inner radius, it is already coded so that you get a "slim" star.

Examples:

asterisk

Arguments

:: Int

half the number of vertices

-> Float

circumradius

-> (Float, Float)

coordinates of the central point

-> Svg

resulting svg path

asterisk builds a regular asterisk.

Once again, it's a regular polygon but the stroke only joins opposite vertices. To ensure that an asterisk is built, the Int parameter gets multiplied by 2.

Examples:

asteriskStar

Arguments

:: Int

half the number of vertices

-> Float

circumradius

-> (Float, Float)

coordinates of the central point

-> Svg

resulting svg path

asteriskStar builds a regular asterisk star.

It's a regular star but the stroke only joins opposite vertices. To ensure that an asterisk is built, the Int parameter gets multiplied by 2.

Examples: