SvgIcons.Images.Mosaics

This module exports images that can be used as base tile to build a mosaic. This can be achieved using them with CSS as background-image with background-repeat: repeat

They are already wrapped in the <svg> tag, which means:

• They are not composible.
• They are ready for use, no wrapping work needed.
• To build a perfectly matching mosaic, you must respect the width-to-height ratio (specific for every tile function), otherwise the resulting will have undesired gaps inbetween.

To fully grasp the potential, check this page: https://ramiropastor.es/svg-icons

Documentation

mosaicSample :: [(String, Svg)]

A list of all mosaics from this module, evaluated with test colors. Please use more sensible colors in order to avoid eye injuries on the viewer.

mosaicSample :: [ (String , S.Svg) ]
mosaicSample =
  [ (,) "nazariMosaic"       (nazariMosaic "orange" "purple")
  , (,) "triReligiousMosaic" (triReligiousMosaic "blue" "orange" "green")
  , (,) "hexagonsMosaic"     (hexagonsMosaic "navy" "none")
  , (,) "beehiveMosaic"       beehiveMosaic
  , (,) "lemonsMosaic"       (lemonsMosaic "gold")
  , (,) "arabicMosaic"       (arabicMosaic "blue" "brown")
  , (,) "cloudsMosaic"       (cloudsMosaic "silver" "white")
  , (,) "hexMosaic"          (hexMosaic    "limegreen")
  , (,) "arrowsMosaic"       (arrowsMosaic "orange")
  , (,) "wiresMosaic"        (wiresMosaic  "gray")
  , (,) "curvesMosaic"        curvesMosaic
  , (,) "airplaneMosaic"     (airplaneMosaic "deepskyblue")
  , (,) "octagonsMosaic"     (octagonsMosaic "lightgray" "chocolate")
  , (,) "pentagonsMosaic"    (pentagonsMosaic "deeppink" "black")
  , (,) "hexCirclesMosaic"   (hexCirclesMosaic "gold")
  ]

nazariMosaic :: String -> String -> Svg

Ratio between width and height is: \(h = \sqrt{3} \cdot w\)

triReligiousMosaic :: String -> String -> String -> Svg

Ratio between width and height is: \(h = \sqrt{3} \cdot w\)

hexagonsMosaic :: String -> String -> Svg

Ratio between width and height is: \(h = \sqrt{3} \cdot w\)

beehiveMosaic :: Svg

Ratio between width and height is: \(h = \sqrt{3} \cdot w\)

lemonsMosaic :: String -> Svg

Ratio between width and height is: \(w = 0.85 \cdot h\)

arabicMosaic :: String -> String -> Svg

Ratio between width and height is: \(h = w\)

cloudsMosaic :: String -> String -> Svg

Ratio between width and height is: \(h = w\)

hexMosaic :: String -> Svg

Ratio between width and height is: \(w = \sqrt{3} \cdot h\)

arrowsMosaic :: String -> Svg

Ratio between width and height is: \(h = \sqrt{3} \cdot w\)

wiresMosaic :: String -> Svg

Ratio between width and height is: \(h = w\)

curvesMosaic :: Svg

Ratio between width and height is: \(h = w\)

airplaneMosaic :: String -> Svg

Ratio between width and height is: \(h = w\)

octagonsMosaic :: String -> String -> Svg

Ratio between width and height is: \(h = w\)

pentagonsMosaic :: String -> String -> Svg

Ratio between width and height is: \(w = \sqrt{3} \cdot h\)

hexCirclesMosaic :: String -> Svg

Ratio between width and height is: \(h = \sqrt{3} \cdot w\)