reanimate 0.1.8.0 → 0.1.9.0

raw patch · 76 files changed

+2578/−597 lines, 76 filesPVP: major bump suggested

API removals or changes: PVP suggests a major version bump

API changes (from Hackage documentation)

- Reanimate.Builtin.TernaryPlot: raster :: Int -> (ACoord -> BCoord -> CCoord -> PixelRGBA8) -> Tree

- Reanimate.Combinators: approxFnData :: Int -> (Double -> (Double, Double)) -> Path

- Reanimate.Combinators: morphPath :: Path -> Path -> Double -> Path

- Reanimate.Combinators: type Path = [(Double, Double)]

+ Reanimate.Builtin.Documentation: showColorMap :: (Double -> PixelRGB8) -> SVG

+ Reanimate.Builtin.TernaryPlot: ternaryPlot :: Int -> (ACoord -> BCoord -> CCoord -> PixelRGBA8) -> Tree

+ Reanimate.PolyShape: plArea :: PolyShape -> Double

+ Reanimate.PolyShape: plGroupTouching :: [PolyShape] -> [[([DPoint], PolyShape)]]

+ Reanimate.PolyShape: plPartial :: Double -> PolyShape -> PolyShape

+ Reanimate.PolyShape: plPartial' :: Double -> ([DPoint], PolyShape) -> PolyShape

+ Reanimate.PolyShape: plPartialGroup :: Double -> [PolyShape] -> [PolyShape]

+ Reanimate.Scene: Object :: STRef s (Maybe Timeline) -> Object s

+ Reanimate.Scene: data Object s

+ Reanimate.Scene: dropObject :: Object s -> Scene s ()

+ Reanimate.Scene: liftST :: ST s a -> Scene s a

+ Reanimate.Scene: listen :: Scene s a -> Scene s (a, Timeline)

+ Reanimate.Scene: newObject :: Scene s (Object s)

+ Reanimate.Scene: stretchTimeline :: Timeline -> Scene s ()

+ Reanimate.Scene: withObject :: Object s -> Scene s a -> Scene s a

Files

examples/boundingbox.hs +46/−0
examples/colormaps.hs +80/−0
examples/counter.golden +50/−0
examples/counter.hs +11/−0
examples/doc_andThen.hs +9/−0
examples/doc_bellS.hs +9/−0
examples/doc_cividis.hs +18/−0
examples/doc_constantS.hs +9/−0
examples/doc_curveS.hs +9/−0
examples/doc_drawBox.hs +9/−0
examples/doc_drawCircle.hs +9/−0
examples/doc_drawProgress.hs +9/−0
examples/doc_fromToS.hs +9/−0
examples/doc_greyscale.hs +18/−0
examples/doc_hsv.hs +18/−0
examples/doc_hsvMatlab.hs +18/−0
examples/doc_inferno.hs +18/−0
examples/doc_jet.hs +18/−0
examples/doc_latex.hs +12/−0
examples/doc_latexAlign.hs +12/−0
examples/doc_magma.hs +18/−0
examples/doc_mapA.hs +9/−0
examples/doc_oscillateS.hs +9/−0
examples/doc_parA.hs +9/−0
examples/doc_parDropA.hs +9/−0
examples/doc_parLoopA.hs +9/−0
examples/doc_parula.hs +18/−0
examples/doc_pause.hs +9/−0
examples/doc_pauseAround.hs +9/−0
examples/doc_pauseAtBeginning.hs +9/−0
examples/doc_pauseAtEnd.hs +9/−0
examples/doc_plasma.hs +18/−0
examples/doc_playThenReverseA.hs +9/−0
examples/doc_repeatA.hs +9/−0
examples/doc_reverseA.hs +9/−0
examples/doc_reverseS.hs +9/−0
examples/doc_rgbComponents.hs +14/−0
examples/doc_seqA.hs +9/−0
examples/doc_signalA.hs +9/−0
examples/doc_sinebow.hs +18/−0
examples/doc_ternaryPlot.hs +14/−0
examples/doc_turbo.hs +18/−0
examples/doc_viridis.hs +18/−0
examples/doc_xelatex.hs +12/−0
examples/fourier.hs +95/−0
examples/fourier_draw.hs +122/−0
examples/goo.golden +50/−0
examples/goo.hs +63/−0
examples/latex_basic.hs +17/−0
examples/latex_color.hs +20/−0
examples/latex_draw.hs +20/−0
examples/latex_wheel.hs +81/−0
examples/polyshape_test1.hs +93/−0
examples/polyshape_test2.hs +35/−0
examples/polyshape_test3.hs +49/−0
examples/polyshape_test4.hs +34/−0
examples/raster.golden too large to diff
examples/raster.hs +16/−0
examples/shatter.hs +135/−0
examples/signals.hs +89/−0
examples/simulate_equation.hs +201/−0
examples/simulate_gravity.golden +50/−0
examples/simulate_gravity.hs +79/−0
examples/sorting.hs +240/−0
examples/sphere.hs +66/−0
examples/sunflower.hs +42/−0
examples/tangent_and_normal.golden +50/−0
examples/tangent_and_normal.hs +57/−0
examples/vector_field.hs +57/−0
reanimate.cabal +2/−4
src/Reanimate/Builtin/Documentation.hs +10/−0
src/Reanimate/Builtin/TernaryPlot.hs +3/−2
src/Reanimate/Combinators.hs +0/−14
src/Reanimate/Examples.hs +0/−563
src/Reanimate/PolyShape.hs +81/−5
src/Reanimate/Scene.hs +47/−9

+ examples/boundingbox.hs view

@@ -0,0 +1,46 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Graphics.SvgTree (Tree)+import           Reanimate++main :: IO ()+main = reanimate bbox++bbox :: Animation+bbox = bg `parA`+    mapA (translate (-screenWidth/4) 0) bbox1 `parA`+    mapA (translate (screenWidth/4) 0) bbox2+  where+    bg = animate $ const $ mkBackground "black"++bbox1 :: Animation+bbox1 = mkAnimation 5 $ \t ->+    mkGroup+      [ mkBoundingBox $ rotate (360*t) svg+      , withFillColor "white" $ rotate (360*t) svg ]+  where+    svg = scale 2 $ center $ latexAlign "\\sum_{k=1}^\\infty"++bbox2 :: Animation+bbox2 = playThenReverseA $ mkAnimation 2.5 $ \t ->+  mkGroup+    [ mkBoundingBox $ partialSvg t heartShape+    , withStrokeColor "white" $ withFillOpacity 0 $+      partialSvg t heartShape ]++mkBoundingBox :: Tree -> Tree+mkBoundingBox svg = withStrokeColor "red" $ withFillOpacity 0 $+    translate (x+w/2) (y+h/2) $+    mkRect w h+  where+    (x, y, w, h) = boundingBox svg++heartShape :: Tree+heartShape = lowerTransformations $ scaleXY 1 (-1) $ scale 0.1 $+    center $ rotateAroundCenter 225 $ mkPathString+      "M0.0,40.0 v-40.0 h40.0\+      \a20.0 20.0 90.0 0 1 0.0,40.0\+      \a20.0 20.0 90.0 0 1 -40.0,0.0 Z"

+ examples/colormaps.hs view

@@ -0,0 +1,80 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Codec.Picture+import qualified Data.Colour.CIE            as CIE+import           Data.Colour.CIE.Illuminant (d65)+import           Data.Colour.RGBSpace+import           Data.Colour.SRGB+import           Data.Word+import           Graphics.SvgTree           (Tree)+import           Reanimate++-- Cycle the animation if we want to upload it to youtube.+youtube :: Animation -> Animation+-- youtube = repeatAnimation 6+youtube = id++main :: IO ()+main = reanimate $ youtube $ pauseAtEnd 2 $ playThenReverseA $ pauseAtEnd 2 $ mkAnimation 5 $ \t ->+    let s           = curveS 2 t+        offsetWidth = screenWidth * 0.5+        nubWidth    = 0.2+        textYOffset = 0.2+    in mkGroup+      [ mkBackground "black"+      , translate 0 (screenHeight/2*0.85) $ withFillColor "white" $ mkGroup+        [ translate (offsetWidth*s - offsetWidth/2) 0 $+          withFillColor "white" $ mkCircle nubWidth+        , withStrokeColor "white" $ withStrokeWidth 0.05 $+          mkLine (-(offsetWidth-nubWidth)/2, 0)+                 ((offsetWidth-nubWidth)/2, 0)+        , translate (-offsetWidth/2-1.0) textYOffset $+          scale 0.5 $ centerX $ latex "Color"+        , translate (offsetWidth/2+1.5) textYOffset $+          scale 0.5 $ centerX $ latex "Greyscale"+        ]+      , translate (-columnX) (rowInit-rowStep*0) $ mkOutline "viridis" (dimmer s . viridis)+      , translate (-columnX) (rowInit-rowStep*1) $ mkOutline "inferno" (dimmer s . inferno)+      , translate (-columnX) (rowInit-rowStep*2) $ mkOutline "cividis" (dimmer s . cividis)+      , translate (-columnX) (rowInit-rowStep*3) $ mkOutline "jet" (dimmer s . jet)+      , translate (-columnX) (rowInit-rowStep*4) $ mkOutline "turbo" (dimmer s . turbo)++      , translate (columnX) (rowInit-rowStep*0) $ mkOutline "magma" (dimmer s . magma)+      , translate (columnX) (rowInit-rowStep*1) $ mkOutline "plasma" (dimmer s . plasma)+      , translate (columnX) (rowInit-rowStep*2) $ mkOutline "sinebow" (dimmer s . sinebow)+      , translate (columnX) (rowInit-rowStep*3) $ mkOutline "hsv" (dimmer s . hsv)+      , translate (columnX) (rowInit-rowStep*4) $ mkOutline "parula" (dimmer s . parula)+      ]+  where+    rowInit = 2.2+    rowStep = 1.2+    columnX = screenWidth/4++    mkOutline label f =+      mkGroup+      [ center $ withFillColor "grey" $ mkRect (scaleWidth+0.05) (scaleHeight+0.05)+      , scaleToSize scaleWidth scaleHeight $ mkColorMap f+      , translate (-scaleWidth/2) (0.5) $ centerY $ withFillColor "white" $+        scale 0.5 $ latex label+      ]+    scaleWidth = screenWidth/8*3+    scaleHeight = screenHeight/20++mkColorMap :: (Double -> PixelRGB8) -> Tree+mkColorMap f = center $ embedImage img+  where+    width = 1000+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral width)++dimmer :: Double -> PixelRGB8 -> PixelRGB8+dimmer switch (PixelRGB8 r g b) =+    PixelRGB8 r' g' b'+  where+    (lStar, aStar, bStar) = CIE.cieLABView d65 (sRGBBounded r g b :: Colour Double)+    RGB r' g' b' = toSRGBBounded $ CIE.cieLAB d65 lStar (aStar*c) (bStar*c) :: RGB Word8+    c = 1-switch

+ examples/counter.golden view

@@ -0,0 +1,50 @@+0<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle /></g></svg>+1<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="2.428571" /></g></svg>+2<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="4.857142" /></g></svg>+3<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="7.285714" /></g></svg>+4<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="9.714285" /></g></svg>+5<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="12.142857" /></g></svg>+6<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="14.571428" /></g></svg>+7<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="17.0" /></g></svg>+8<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="19.428571" /></g></svg>+9<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="21.857142" /></g></svg>+10<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="24.285714" /></g></svg>+11<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="26.714285" /></g></svg>+12<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="29.142857" /></g></svg>+13<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="31.571428" /></g></svg>+14<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="34.0" /></g></svg>+15<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="36.428571" /></g></svg>+16<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="38.857142" /></g></svg>+17<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="41.285714" /></g></svg>+18<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="43.714285" /></g></svg>+19<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="46.142857" /></g></svg>+20<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="48.571428" /></g></svg>+21<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="51.0" /></g></svg>+22<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="53.428571" /></g></svg>+23<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="55.857142" /></g></svg>+24<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="58.285714" /></g></svg>+25<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="60.714285" /></g></svg>+26<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="63.142857" /></g></svg>+27<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="65.571428" /></g></svg>+28<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="68.0" /></g></svg>+29<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="70.428571" /></g></svg>+30<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="72.857142" /></g></svg>+31<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="75.285714" /></g></svg>+32<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="77.714285" /></g></svg>+33<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="80.142857" /></g></svg>+34<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="82.571428" /></g></svg>+35<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="84.999999" /></g></svg>+36<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="87.428571" /></g></svg>+37<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="89.857142" /></g></svg>+38<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="92.285714" /></g></svg>+39<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="94.714285" /></g></svg>+40<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="97.142857" /></g></svg>+41<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="99.571428" /></g></svg>+42<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="102.0" /></g></svg>+43<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="104.428571" /></g></svg>+44<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="106.857142" /></g></svg>+45<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="109.285714" /></g></svg>+46<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="111.714285" /></g></svg>+47<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="114.142857" /></g></svg>+48<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="116.571428" /></g></svg>+49<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><circle r="118.999999" /></g></svg>

+ examples/counter.hs view

@@ -0,0 +1,11 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main (main) where++import           Reanimate++main :: IO ()+main = reanimate $ mkAnimation dur $+    mkCircle . fromToS 0 (dur*60-1)+  where+    dur = 2

+ examples/doc_andThen.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ drawBox `andThen` drawCircle

+ examples/doc_bellS.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ signalA (bellS 2) drawProgress

+ examples/doc_cividis.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap cividis++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_constantS.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ signalA (constantS 0.5) drawProgress

+ examples/doc_curveS.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ signalA (curveS 2) drawProgress

+ examples/doc_drawBox.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv drawBox

+ examples/doc_drawCircle.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv drawCircle

+ examples/doc_drawProgress.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv drawProgress

+ examples/doc_fromToS.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ signalA (fromToS 0.8 0.2) drawProgress

+ examples/doc_greyscale.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap greyscale++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_hsv.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap hsv++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_hsvMatlab.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap hsvMatlab++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_inferno.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap inferno++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_jet.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap jet++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_latex.hs view

@@ -0,0 +1,12 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Reanimate+import           Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $+  withStrokeWidth 0 . withFillOpacity 1 . scale 3 . center $+  latex "$e^{i\\pi}+1=0$"

+ examples/doc_latexAlign.hs view

@@ -0,0 +1,12 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Reanimate+import           Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $+  withStrokeWidth 0 . withFillOpacity 1 . scale 3 . center $+  latexAlign "R = \\frac{{\\Delta x}}{{kA}}"

+ examples/doc_magma.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap magma++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_mapA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ mapA (scale 0.5) drawCircle

+ examples/doc_oscillateS.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ signalA oscillateS drawProgress

+ examples/doc_parA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ drawBox `parA` adjustDuration (*2) drawCircle

+ examples/doc_parDropA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ drawBox `parDropA` adjustDuration (*2) drawCircle

+ examples/doc_parLoopA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ drawBox `parLoopA` adjustDuration (*2) drawCircle

+ examples/doc_parula.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap parula++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_pause.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ pause 1 `seqA` drawProgress

+ examples/doc_pauseAround.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ pauseAround 1 1 drawProgress

+ examples/doc_pauseAtBeginning.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ pauseAtBeginning 1 drawProgress

+ examples/doc_pauseAtEnd.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ pauseAtEnd 1 drawProgress

+ examples/doc_plasma.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap plasma++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_playThenReverseA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ playThenReverseA drawCircle

+ examples/doc_repeatA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ repeatA 1.5 drawCircle

+ examples/doc_reverseA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ reverseA drawCircle

+ examples/doc_reverseS.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ signalA reverseS drawProgress

+ examples/doc_rgbComponents.hs view

@@ -0,0 +1,14 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Interpolate+import Reanimate.Builtin.Documentation+import Codec.Picture++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ showColorMap $ interpolateRGB8 rgbComponents yellow blue+  where+    yellow = PixelRGB8 0xFF 0xFF 0x00+    blue = PixelRGB8 0x00 0x00 0xFF

+ examples/doc_seqA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv (drawBox `seqA` drawCircle)

+ examples/doc_signalA.hs view

@@ -0,0 +1,9 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ signalA (fromToS 0.25 0.75) drawCircle

+ examples/doc_sinebow.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap sinebow++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_ternaryPlot.hs view

@@ -0,0 +1,14 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Reanimate hiding (raster)+import Reanimate.Builtin.Documentation+import Reanimate.Builtin.TernaryPlot+import Reanimate.Interpolate+import Data.Colour.CIE+import Codec.Picture.Types++main :: IO ()+main = reanimate $ docEnv $ animate $ const $+  ternaryPlot 1024 (\a b c -> promotePixel $ toRGB8 $ cieXYZ a b c)

+ examples/doc_turbo.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap turbo++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_viridis.hs view

@@ -0,0 +1,18 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main(main) where++import Codec.Picture+import Reanimate+import Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $ mkColorMap viridis++mkColorMap :: (Double -> PixelRGB8) -> SVG+mkColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

+ examples/doc_xelatex.hs view

@@ -0,0 +1,12 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Reanimate+import           Reanimate.Builtin.Documentation++main :: IO ()+main = reanimate $ docEnv $ animate $ const $+  withStrokeWidth 0 . withFillOpacity 1 . scale 4 . center $+  xelatex "中文"

+ examples/fourier.hs view

@@ -0,0 +1,95 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Data.Complex+import qualified Data.Text as T++import           Graphics.SvgTree+import           Reanimate.Driver (reanimate)+import           Reanimate.LaTeX  (latex)+import           Reanimate.Animation+import           Reanimate.Svg+import           Reanimate.Signal+import           Reanimate.Constants++waveMultiplier :: Int+-- waveMultiplier = 1 -- Sawtooth wave+waveMultiplier = 2 -- Square wave++main :: IO ()+main = reanimate $+  fourierAnimation 1 `seqA`+  fourierAnimation 2 `seqA`+  fourierAnimation 3 `seqA`+  fourierAnimation 5 `seqA`+  fourierAnimation 10 `seqA`+  fourierAnimation 25 `seqA`+  fourierAnimation 50 `seqA`+  fourierAnimation 100++sWidth :: Double+sWidth = 0.02++fourierAnimation :: Int -> Animation+fourierAnimation nCircles = repeatA 2 $ mkAnimation 3 $ \t ->+    let phi = fromToS 0 (2*pi) t+    in mkGroup+    [ mkBackground "black"+    , translate (-screenWidth/4) 0 $ mkGroup+      [ drawNCircles nCircles phi+      , withStrokeColor "white" $+        withStrokeWidth sWidth $+        withFillOpacity 0 $+        translate (screenWidth/4) 0 $+        mkCirclePath nCircles phi ]+    , withStrokeWidth sWidth $+      withFillColor "white" $+      translate (-screenWidth/8*3) (screenHeight/8*3) $+      latex $ T.pack $ "Circles: " ++ show nCircles ]++drawNCircles :: Int -> Double -> Tree+drawNCircles totalCircles phi = mkGroup+    [ worker circles+    , let x :+ y = sum circles in+      withStrokeWidth sWidth $+      withStrokeColor "white" $+      mkLine (x, y) (screenWidth/4, y) ]+  where+    circles = [ nthCircle n phi | n <- [0..totalCircles-1] ]+    worker [] = None+    worker (x :+ y : rest) =+      let radius = sqrt(x*x+y*y) in+      mkGroup+      [ withStrokeWidth sWidth $+        withStrokeColor "grey" $+        withFillOpacity 0 $+        mkCircle radius+      , translate x y $ worker rest+      , withStrokeWidth sWidth $+        withStrokeColor "white" $+        mkLine (0, 0) (x, y) ]++mkCirclePath :: Int -> Double -> Tree+mkCirclePath nCircles phiOffset = mkLinePath $ take 2000 $+    zip [ 2 * i/granularity | i <- [0..]]+    $ drop (round $ (1-phiOffset/(2*pi)) * granularity) $+    cycle $ [ fourierYValue nCircles phi+    | x <- reverse [1..granularity]+    , let phi = 2*pi*(x/granularity)+    ]+  where+    granularity = 500++fourierYValue :: Int -> Double -> Double+fourierYValue n phi =+  imagPart (sum [ nthCircle i phi | i <- [0..n-1]])++nthCircle :: Int -> Double -> Complex Double+nthCircle n phi = x :+ y+  where+    n' = fromIntegral (n*waveMultiplier+1)+    x = cos (n'*phi) * radius+    y = sin (n'*phi) * radius+    radius = 2.5 * (2 / (n'*pi))

+ examples/fourier_draw.hs view

@@ -0,0 +1,122 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Data.Complex+import qualified Data.Text           as T+import           Graphics.SvgTree+import           Linear.V2+import           Reanimate++main :: IO ()+main = reanimate $ pauseAtEnd 2 $+  fourierAnimation_++sWidth :: Double+sWidth = 0.02++piFourier :: Fourier+piFourier = mkFourier piPoints++piPoints :: [RPoint]+piPoints = lineToPoints 500 $+  toLineCommands $ extractPath $ scale 10 $ center $ latexAlign "\\pi"+++fourierAnimation_ :: Animation+fourierAnimation_ = mkAnimation 50 $ \t ->+    let fLength = t+        circles = setFourierLength (fLength*maxLength) piFourier+        maxLength = sum $ map magnitude $ take 499 $ drop 1 $ fourierCoefficients piFourier+        phi = fromToS 0 15 t+    in mkGroup+    [ mkBackground "black"+    , drawCircles $ fourierCoefficients $ rotateFourier phi circles+    , withStrokeColor "green" $+      withFillOpacity 0 $+      mkLinePath $ mkFourierOutline circles+    , withFillColor "white" $+      translate (-screenWidth/16*7) (screenHeight/16*7) $+      latex $ T.pack $ "Circles: " ++ show (length $ fourierCoefficients circles)+    ]++data Fourier = Fourier {fourierCoefficients :: [Complex Double]}++pointAtFourier :: Fourier -> Complex Double+pointAtFourier = sum . fourierCoefficients++mkFourier :: [RPoint] -> Fourier+mkFourier points = Fourier $ findCoefficient 0 :+    concat [ [findCoefficient n, findCoefficient (-n)] | n <- [1..] ]+  where+    findCoefficient :: Int -> Complex Double+    findCoefficient n =+        sum [ toComplex point * exp (negate (fromIntegral n) * 2 *pi * i*t) * deltaT+            | (idx, point) <- zip [0::Int ..] points, let t = fromIntegral idx/nPoints ]+    i = 0 :+ 1+    toComplex (V2 x y) = x :+ y+    deltaT = recip nPoints+    nPoints = fromIntegral (length points)+++-- setFourierCircles :: Double -> Fourier -> Fourier+-- setFourierCircles n _ | n < 1 = error "Invalid argument. Need at least one circle."+-- setFourierCircles n (Fourier coeffs) =+--     Fourier $ take iCircles coeffs ++ [coeffs!!iCircles * realToFrac fCircle]+--   where+--     (iCircles, fCircle) = divMod' n 1++setFourierLength :: Double -> Fourier -> Fourier+setFourierLength _ (Fourier []) = Fourier []+setFourierLength len0 (Fourier (first:lst)) = Fourier $ first : worker len0 lst+  where+    worker _len [] = []+    worker len (c:cs) =+      if magnitude c < len+        then c : worker (len - magnitude c) cs+        else [c * (realToFrac (len / magnitude c))]++rotateFourier :: Double -> Fourier -> Fourier+rotateFourier phi (Fourier coeffs) =+    Fourier $ worker (coeffs) (0::Integer)+  where+    worker [] _ = []+    worker (x:rest) 0 = x : worker rest 1+    worker [left] n = worker [left,0] n+    worker (left:right:rest) n =+      let n' = fromIntegral n in+      left * exp (negate n' * 2 * pi * i * phi') :+      right * exp (n' * 2 * pi * i * phi') :+      worker rest (n+1)+    i = 0 :+ 1+    -- n = length coeffs `div` 2+    phi' = realToFrac phi++drawCircles :: [Complex Double] -> SVG+drawCircles circles = mkGroup+    [ worker circles+    , withStrokeWidth sWidth $+      withStrokeColor "white" $+      withStrokeLineJoin JoinRound $+      withFillOpacity 0 $+      mkLinePath [ (x, y) | x :+ y <- scanl (+) 0 circles ] ]+  where+    worker [] = None+    worker (x :+ y : rest) =+      let radius = sqrt(x*x+y*y) in+      mkGroup+      [ withStrokeWidth sWidth $+        withStrokeColor "dimgrey" $+        withFillOpacity 0 $+        mkCircle radius+      , translate x y $ worker rest ]++mkFourierOutline :: Fourier -> [(Double, Double)]+mkFourierOutline fourier =+    [ (x, y)+    | idx <- [0 .. granularity]+    , let x :+ y = pointAtFourier $ rotateFourier (idx/granularity) fourier+    ]+  where+    granularity = 500

+ examples/goo.golden view

@@ -0,0 +1,50 @@+0<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.0, 0.0)"><circle r="1.0" /></g><g transform="translate(0.0, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.0, 0.0)"><circle r="1.0" /></g><g transform="translate(0.0, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.0, 0.0)"><circle r="1.0" /></g><g transform="translate(0.0, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+1<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.004997, 0.0)"><circle r="1.0" /></g><g transform="translate(0.004997, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.004997, 0.0)"><circle r="1.0" /></g><g transform="translate(0.004997, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.004997, 0.0)"><circle r="1.0" /></g><g transform="translate(0.004997, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+2<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.019991, 0.0)"><circle r="1.0" /></g><g transform="translate(0.019991, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.019991, 0.0)"><circle r="1.0" /></g><g transform="translate(0.019991, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.019991, 0.0)"><circle r="1.0" /></g><g transform="translate(0.019991, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+3<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.044981, 0.0)"><circle r="1.0" /></g><g transform="translate(0.044981, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.044981, 0.0)"><circle r="1.0" /></g><g transform="translate(0.044981, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.044981, 0.0)"><circle r="1.0" /></g><g transform="translate(0.044981, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+4<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.079966, 0.0)"><circle r="1.0" /></g><g transform="translate(0.079966, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.079966, 0.0)"><circle r="1.0" /></g><g transform="translate(0.079966, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.079966, 0.0)"><circle r="1.0" /></g><g transform="translate(0.079966, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+5<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.124947, 0.0)"><circle r="1.0" /></g><g transform="translate(0.124947, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.124947, 0.0)"><circle r="1.0" /></g><g transform="translate(0.124947, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.124947, 0.0)"><circle r="1.0" /></g><g transform="translate(0.124947, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+6<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.179925, 0.0)"><circle r="1.0" /></g><g transform="translate(0.179925, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.179925, 0.0)"><circle r="1.0" /></g><g transform="translate(0.179925, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.179925, 0.0)"><circle r="1.0" /></g><g transform="translate(0.179925, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+7<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.244897, 0.0)"><circle r="1.0" /></g><g transform="translate(0.244897, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.244897, 0.0)"><circle r="1.0" /></g><g transform="translate(0.244897, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.244897, 0.0)"><circle r="1.0" /></g><g transform="translate(0.244897, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+8<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.319866, 0.0)"><circle r="1.0" /></g><g transform="translate(0.319866, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.319866, 0.0)"><circle r="1.0" /></g><g transform="translate(0.319866, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.319866, 0.0)"><circle r="1.0" /></g><g transform="translate(0.319866, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+9<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.404831, 0.0)"><circle r="1.0" /></g><g transform="translate(0.404831, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.404831, 0.0)"><circle r="1.0" /></g><g transform="translate(0.404831, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.404831, 0.0)"><circle r="1.0" /></g><g transform="translate(0.404831, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+10<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.499791, 0.0)"><circle r="1.0" /></g><g transform="translate(0.499791, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.499791, 0.0)"><circle r="1.0" /></g><g transform="translate(0.499791, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.499791, 0.0)"><circle r="1.0" /></g><g transform="translate(0.499791, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+11<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.604748, 0.0)"><circle r="1.0" /></g><g transform="translate(0.604748, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.604748, 0.0)"><circle r="1.0" /></g><g transform="translate(0.604748, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.604748, 0.0)"><circle r="1.0" /></g><g transform="translate(0.604748, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+12<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.719700, 0.0)"><circle r="1.0" /></g><g transform="translate(0.719700, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.719700, 0.0)"><circle r="1.0" /></g><g transform="translate(0.719700, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.719700, 0.0)"><circle r="1.0" /></g><g transform="translate(0.719700, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+13<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.839025, 0.0)"><circle r="1.0" /></g><g transform="translate(0.839025, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.839025, 0.0)"><circle r="1.0" /></g><g transform="translate(0.839025, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.839025, 0.0)"><circle r="1.0" /></g><g transform="translate(0.839025, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+14<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.948979, 0.0)"><circle r="1.0" /></g><g transform="translate(0.948979, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.948979, 0.0)"><circle r="1.0" /></g><g transform="translate(0.948979, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.948979, 0.0)"><circle r="1.0" /></g><g transform="translate(0.948979, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+15<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.048937, 0.0)"><circle r="1.0" /></g><g transform="translate(1.048937, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.048937, 0.0)"><circle r="1.0" /></g><g transform="translate(1.048937, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.048937, 0.0)"><circle r="1.0" /></g><g transform="translate(1.048937, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+16<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.138900, 0.0)"><circle r="1.0" /></g><g transform="translate(1.138900, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.138900, 0.0)"><circle r="1.0" /></g><g transform="translate(1.138900, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.138900, 0.0)"><circle r="1.0" /></g><g transform="translate(1.138900, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+17<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.218867, 0.0)"><circle r="1.0" /></g><g transform="translate(1.218867, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.218867, 0.0)"><circle r="1.0" /></g><g transform="translate(1.218867, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.218867, 0.0)"><circle r="1.0" /></g><g transform="translate(1.218867, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+18<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.288837, 0.0)"><circle r="1.0" /></g><g transform="translate(1.288837, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.288837, 0.0)"><circle r="1.0" /></g><g transform="translate(1.288837, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.288837, 0.0)"><circle r="1.0" /></g><g transform="translate(1.288837, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+19<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.348812, 0.0)"><circle r="1.0" /></g><g transform="translate(1.348812, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.348812, 0.0)"><circle r="1.0" /></g><g transform="translate(1.348812, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.348812, 0.0)"><circle r="1.0" /></g><g transform="translate(1.348812, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+20<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.398792, 0.0)"><circle r="1.0" /></g><g transform="translate(1.398792, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.398792, 0.0)"><circle r="1.0" /></g><g transform="translate(1.398792, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.398792, 0.0)"><circle r="1.0" /></g><g transform="translate(1.398792, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+21<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.438775, 0.0)"><circle r="1.0" /></g><g transform="translate(1.438775, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.438775, 0.0)"><circle r="1.0" /></g><g transform="translate(1.438775, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.438775, 0.0)"><circle r="1.0" /></g><g transform="translate(1.438775, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+22<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.468763, 0.0)"><circle r="1.0" /></g><g transform="translate(1.468763, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.468763, 0.0)"><circle r="1.0" /></g><g transform="translate(1.468763, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.468763, 0.0)"><circle r="1.0" /></g><g transform="translate(1.468763, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+23<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.488754, 0.0)"><circle r="1.0" /></g><g transform="translate(1.488754, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.488754, 0.0)"><circle r="1.0" /></g><g transform="translate(1.488754, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.488754, 0.0)"><circle r="1.0" /></g><g transform="translate(1.488754, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+24<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.498750, 0.0)"><circle r="1.0" /></g><g transform="translate(1.498750, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.498750, 0.0)"><circle r="1.0" /></g><g transform="translate(1.498750, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.498750, 0.0)"><circle r="1.0" /></g><g transform="translate(1.498750, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+25<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.498750, 0.0)"><circle r="1.0" /></g><g transform="translate(1.498750, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.498750, 0.0)"><circle r="1.0" /></g><g transform="translate(1.498750, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.498750, 0.0)"><circle r="1.0" /></g><g transform="translate(1.498750, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+26<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.488754, 0.0)"><circle r="1.0" /></g><g transform="translate(1.488754, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.488754, 0.0)"><circle r="1.0" /></g><g transform="translate(1.488754, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.488754, 0.0)"><circle r="1.0" /></g><g transform="translate(1.488754, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+27<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.468763, 0.0)"><circle r="1.0" /></g><g transform="translate(1.468763, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.468763, 0.0)"><circle r="1.0" /></g><g transform="translate(1.468763, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.468763, 0.0)"><circle r="1.0" /></g><g transform="translate(1.468763, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+28<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.438775, 0.0)"><circle r="1.0" /></g><g transform="translate(1.438775, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.438775, 0.0)"><circle r="1.0" /></g><g transform="translate(1.438775, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.438775, 0.0)"><circle r="1.0" /></g><g transform="translate(1.438775, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+29<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.398792, 0.0)"><circle r="1.0" /></g><g transform="translate(1.398792, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.398792, 0.0)"><circle r="1.0" /></g><g transform="translate(1.398792, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.398792, 0.0)"><circle r="1.0" /></g><g transform="translate(1.398792, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+30<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.348812, 0.0)"><circle r="1.0" /></g><g transform="translate(1.348812, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.348812, 0.0)"><circle r="1.0" /></g><g transform="translate(1.348812, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.348812, 0.0)"><circle r="1.0" /></g><g transform="translate(1.348812, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+31<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.288837, 0.0)"><circle r="1.0" /></g><g transform="translate(1.288837, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.288837, 0.0)"><circle r="1.0" /></g><g transform="translate(1.288837, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.288837, 0.0)"><circle r="1.0" /></g><g transform="translate(1.288837, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+32<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.218867, 0.0)"><circle r="1.0" /></g><g transform="translate(1.218867, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.218867, 0.0)"><circle r="1.0" /></g><g transform="translate(1.218867, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.218867, 0.0)"><circle r="1.0" /></g><g transform="translate(1.218867, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+33<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.138900, 0.0)"><circle r="1.0" /></g><g transform="translate(1.138900, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.138900, 0.0)"><circle r="1.0" /></g><g transform="translate(1.138900, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.138900, 0.0)"><circle r="1.0" /></g><g transform="translate(1.138900, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+34<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-1.048937, 0.0)"><circle r="1.0" /></g><g transform="translate(1.048937, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-1.048937, 0.0)"><circle r="1.0" /></g><g transform="translate(1.048937, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-1.048937, 0.0)"><circle r="1.0" /></g><g transform="translate(1.048937, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+35<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.948979, 0.0)"><circle r="1.0" /></g><g transform="translate(0.948979, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.948979, 0.0)"><circle r="1.0" /></g><g transform="translate(0.948979, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.948979, 0.0)"><circle r="1.0" /></g><g transform="translate(0.948979, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+36<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.839025, 0.0)"><circle r="1.0" /></g><g transform="translate(0.839025, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.839025, 0.0)"><circle r="1.0" /></g><g transform="translate(0.839025, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.839025, 0.0)"><circle r="1.0" /></g><g transform="translate(0.839025, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+37<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.719700, 0.0)"><circle r="1.0" /></g><g transform="translate(0.719700, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.719700, 0.0)"><circle r="1.0" /></g><g transform="translate(0.719700, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.719700, 0.0)"><circle r="1.0" /></g><g transform="translate(0.719700, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+38<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.604748, 0.0)"><circle r="1.0" /></g><g transform="translate(0.604748, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.604748, 0.0)"><circle r="1.0" /></g><g transform="translate(0.604748, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.604748, 0.0)"><circle r="1.0" /></g><g transform="translate(0.604748, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+39<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.499791, 0.0)"><circle r="1.0" /></g><g transform="translate(0.499791, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.499791, 0.0)"><circle r="1.0" /></g><g transform="translate(0.499791, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.499791, 0.0)"><circle r="1.0" /></g><g transform="translate(0.499791, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+40<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.404831, 0.0)"><circle r="1.0" /></g><g transform="translate(0.404831, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.404831, 0.0)"><circle r="1.0" /></g><g transform="translate(0.404831, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.404831, 0.0)"><circle r="1.0" /></g><g transform="translate(0.404831, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+41<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.319866, 0.0)"><circle r="1.0" /></g><g transform="translate(0.319866, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.319866, 0.0)"><circle r="1.0" /></g><g transform="translate(0.319866, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.319866, 0.0)"><circle r="1.0" /></g><g transform="translate(0.319866, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+42<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.244897, 0.0)"><circle r="1.0" /></g><g transform="translate(0.244897, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.244897, 0.0)"><circle r="1.0" /></g><g transform="translate(0.244897, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.244897, 0.0)"><circle r="1.0" /></g><g transform="translate(0.244897, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+43<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.179925, 0.0)"><circle r="1.0" /></g><g transform="translate(0.179925, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.179925, 0.0)"><circle r="1.0" /></g><g transform="translate(0.179925, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.179925, 0.0)"><circle r="1.0" /></g><g transform="translate(0.179925, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+44<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.124947, 0.0)"><circle r="1.0" /></g><g transform="translate(0.124947, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.124947, 0.0)"><circle r="1.0" /></g><g transform="translate(0.124947, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.124947, 0.0)"><circle r="1.0" /></g><g transform="translate(0.124947, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+45<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.079966, 0.0)"><circle r="1.0" /></g><g transform="translate(0.079966, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.079966, 0.0)"><circle r="1.0" /></g><g transform="translate(0.079966, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.079966, 0.0)"><circle r="1.0" /></g><g transform="translate(0.079966, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+46<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.044981, 0.0)"><circle r="1.0" /></g><g transform="translate(0.044981, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.044981, 0.0)"><circle r="1.0" /></g><g transform="translate(0.044981, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.044981, 0.0)"><circle r="1.0" /></g><g transform="translate(0.044981, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+47<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.019991, 0.0)"><circle r="1.0" /></g><g transform="translate(0.019991, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.019991, 0.0)"><circle r="1.0" /></g><g transform="translate(0.019991, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.019991, 0.0)"><circle r="1.0" /></g><g transform="translate(0.019991, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+48<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.004997, 0.0)"><circle r="1.0" /></g><g transform="translate(0.004997, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.004997, 0.0)"><circle r="1.0" /></g><g transform="translate(0.004997, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.004997, 0.0)"><circle r="1.0" /></g><g transform="translate(0.004997, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>+49<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><filter id="blur" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" /></filter><filter id="goo" width="300%" height="300%" x="-100%" y="-100%">  <feGaussianBlur result="blur" stdDeviation="0.2" />  <feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />  <feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter><g transform="translate(0.0, 2.2)"><g fill="#FF0000"><g transform="translate(-0.0, 0.0)"><circle r="1.0" /></g><g transform="translate(0.0, 0.0)"><circle r="1.0" /></g></g></g><g fill="#FF0000" filter="url(#blur)"><g transform="translate(-0.0, 0.0)"><circle r="1.0" /></g><g transform="translate(0.0, 0.0)"><circle r="1.0" /></g></g><g transform="translate(0.0, -2.2)"><g fill="#FF0000" filter="url(#goo)"><g transform="translate(-0.0, 0.0)"><circle r="1.0" /></g><g transform="translate(0.0, 0.0)"><circle r="1.0" /></g></g></g></g></g></svg>

+ examples/goo.hs view

@@ -0,0 +1,63 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Control.Lens++import           Graphics.SvgTree+import           Reanimate++main :: IO ()+main = reanimate $ playThenReverseA $ mkAnimation 5 $ \t ->+    let s = fromToS 0 1.5 $ curveS 2 t in+    mkGroup+    [ mkBackground "black"+    , FilterTree $ mkFilter "blur"+      [FEGaussianBlur $ defaultSvg+        & gaussianBlurStdDeviationX .~ Num dev+        & filterResult .~ Just "blur"+      ] & filterWidth .~ pure (Percent 3)+        & filterX .~ pure (Percent (-1))+        & filterHeight .~ pure (Percent 3)+        & filterY .~ pure (Percent (-1))+    , FilterTree $ mkFilter "goo"+      [FEGaussianBlur $ defaultSvg+        & gaussianBlurStdDeviationX .~ Num dev+        & filterResult .~ Just "blur"+      ,FEColorMatrix $ defaultSvg+        & colorMatrixType .~ Matrix+        & colorMatrixValues .~ "1 0 0 0 0 \+                               \0 1 0 0 0 \+                               \0 0 1 0 0 \+                               \0 0 0 " ++ show (sharpness*2) ++ " -" ++ show sharpness+        & filterResult .~ pure "goo"+      ,FEComposite $ defaultSvg+        & compositeIn .~ pure SourceGraphic+        & compositeIn2 .~ pure (SourceRef "goo")+        & compositeOperator .~ CompositeAtop+      ] & filterWidth .~ pure (Percent 3)+        & filterX .~ pure (Percent (-1))+        & filterHeight .~ pure (Percent 3)+        & filterY .~ pure (Percent (-1))+    , translate 0 (radius*2.2) $ withFillColor "red" $ mkGroup+      [ translate (s*(-radius)) 0 circ+      , translate (s*radius) 0 circ+      ]+    , withFillColor "red" $ mkGroup+      [ translate (s*(-radius)) 0 circ+      , translate (s*radius) 0 circ+      ] & filterRef .~ pure (Ref "blur")+    , translate 0 (-radius*2.2) $ withFillColor "red" $ mkGroup+      [ translate (s*(-radius)) 0 circ+      , translate (s*radius) 0 circ+      ] & filterRef .~ pure (Ref "goo")+    ]+  where+    sharpness = 10 :: Integer+    dev = 0.2+    radius = 1+    circ = mkCircle radius++mkFilter :: String -> [FilterElement] -> Filter+mkFilter ident fe = defaultSvg & filterChildren .~ fe & attrId .~ Just ident

+ examples/latex_basic.hs view

@@ -0,0 +1,17 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Reanimate++main :: IO ()+main = reanimate $ playThenReverseA $ mkAnimation 2 $ \t ->+    mkGroup+      [ mkBackground "black"+      , withStrokeColor "white" $ withFillOpacity 0 text+      , withFillColor "white" $ withFillOpacity t text+      ]+  where+    text = withStrokeWidth 0.01 $ scale 2 $ center $ latexAlign+      "\\sum_{k=1}^\\infty {1 \\over k^2} = {\\pi^2 \\over 6}"

+ examples/latex_color.hs view

@@ -0,0 +1,20 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Reanimate++main :: IO ()+main = reanimate $ animate $ const $+    mkGroup+    [ mkBackground "black"+    , withStrokeColor "white" $+      withSubglyphs [0] (withFillColor "blue") $+      withSubglyphs [1] (withFillColor "yellow") $+      withSubglyphs [2] (withFillColor "green") $+      withSubglyphs [3] (withFillColor "red") $+      withSubglyphs [4] (withFillColor "darkslategrey") $+      svg ]+  where+    svg = withStrokeWidth 0.01 $ scale 4 $ center $ latex "\\LaTeX"

+ examples/latex_draw.hs view

@@ -0,0 +1,20 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Reanimate++main :: IO ()+main = reanimate $+    bg `parA` (playThenReverseA $ drawText `andThen` fillText)+  where+    bg = animate $ const $ mkBackground "black"+    msg = "\\sum_{k=1}^\\infty {1 \\over k^2} = {\\pi^2 \\over 6}"+    glyphs = withStrokeWidth 0.01 $ center $ latexAlign msg+    fillText = mkAnimation 1 $ \t ->+      scale 2 $ withFillColor "white" $ withFillOpacity t glyphs+    drawText = mkAnimation 2 $ \t ->+      scale 2 $+        withStrokeColor "white" $ withFillOpacity 0 $+          partialSvg t glyphs

+ examples/latex_wheel.hs view

@@ -0,0 +1,81 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecursiveDo       #-}+module Main (main) where++import           Control.Monad    (forM_)+import           Graphics.SvgTree (Tree)+import           Reanimate+import           Reanimate.Driver (reanimate)+import           Reanimate.Effect++main :: IO ()+main = reanimate $ bg `parA` mainScene+  where+    bg = animate $ const $ mkBackground "black"++mainScene :: Animation+mainScene = sceneAnimation $ mdo+    play $ drawCircle+      # setDuration drawCircleT+      # applyE (constE $ scaleXY (-1) 1)+    fork $ play $ drawCircle+      # freezeAtPercentage 1+      # setDuration rotDur+    rotDur <- withSceneDuration $ waitAll $+      forM_ svgs $ \svg -> do+        fork $ play $ drawTick+          # setDuration rotateT+          # repeatA rotateN+          # applyE (overBeginning 0.5 drawInE)+          # applyE (overEnding 0.5 drawOutE)+        fork $ play $ drawSVG svg+          # setDuration rotateT+          # repeatA rotateN+          # applyE (overBeginning rotateT drawInE)+          # applyE (delayE rotateT $ overBeginning 1 fillInE)+          # applyE (overEnding 0.5 fadeOutE)+        wait (rotateT / fromIntegral (1+length svgs))+    play $ drawCircle+      # setDuration drawCircleT+      # reverseA+    return ()+  where+    drawCircleT = 1+    rotateT     = 5+    rotateN     = 3++    svgCAF = center $ latex "\\LaTeX"+    getNth n = snd (splitGlyphs [n] svgCAF)+    svgs = [+        withStrokeWidth 0.01 $+        scale 2 $+        translate 0 (tickLength*2) $+        withStrokeColor "white" $+        withFillColor "white" $+        center $ getNth n+      | n <- [0..4]]++radius, tickLength :: Double+radius = 1.25+tickLength = 0.25++drawCircle :: Animation+drawCircle = animate $ \t ->+    withFillOpacity 0 $+    withStrokeColor "white" $+    rotate (-90) $+    partialSvg t circPath+  where+    circPath = pathify $ mkCircle radius++drawTick :: Animation+drawTick = drawSVG $ mkLine (0, 0) (0, tickLength)++drawSVG :: Tree -> Animation+drawSVG svg = animate $ \t ->+    withStrokeColor "white" $+    rotate (t*360) $+    translate 0 radius $+    svg

+ examples/polyshape_test1.hs view

@@ -0,0 +1,93 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecordWildCards   #-}+module Main (main) where++import           Control.Lens        ()+import           Data.List+import qualified Geom2D.CubicBezier  as G+import           Reanimate+import           Reanimate.PolyShape+++polygonTest :: Animation+polygonTest = animate $ \_ ->+    std $ gridLayout $ transpose+      [ test0, test1, test2, test3, test4, test5 ]+  where+    test0 = column ppA poly1+    test1 = column ppA poly2+    test2 = column ppA poly3+    test3 = column ppA poly4+    test4 = column ppB [boxPolyShape]+    test5 = column ppB [starPolyShape]++    column pp poly = map pp+      [ poly+      , map plFromPolygon $ plDecompose' 0.05 poly+      , map plFromPolygon $ plDecompose poly ]+++    poly1 =+      svgToPolyShapes $ lowerTransformations $+      center $ scale 3 $+      latex "$\\Phi$"+    poly2 =+      svgToPolyShapes $ lowerTransformations $+      center $ scale 3 $+      latex "$\\vartheta$"+    poly3 =+      svgToPolyShapes $ lowerTransformations $+      center $ scale 3 $+      latex "$\\Xi$"+    poly4 =+      svgToPolyShapes $ lowerTransformations $+      center $ scale 3 $+      latex "$\\Theta$"++    ppA = renderPolyShapes+    ppB = lowerTransformations . scale 0.6 . center . renderPolyShapes+    std =+      withFillOpacity 1 .+      withFillColor "blue" .+      withStrokeWidth 0.01 .+      withStrokeColor "white"+++boxPolyShape :: PolyShape+boxPolyShape = PolyShape $ G.ClosedPath+  [(G.Point 0 0, G.JoinLine)+  ,(G.Point 0 3, G.JoinLine)+  ,(G.Point 1 3, G.JoinLine)+  ,(G.Point 1 1, G.JoinLine)+  ,(G.Point 2 1, G.JoinLine)+  ,(G.Point 2 2, G.JoinLine)+  ,(G.Point 0 2, G.JoinLine)+  ,(G.Point 0 3, G.JoinLine)+  ,(G.Point 3 3, G.JoinLine)+  ,(G.Point 3 0, G.JoinLine)+  ]++{-+squarePolyShape :: PolyShape+squarePolyShape = PolyShape $ G.ClosedPath+  [(G.Point 0 0, G.JoinLine)+  ,(G.Point 1 0, G.JoinLine)+  ,(G.Point 1 1, G.JoinLine)+  ,(G.Point 0 1, G.JoinLine)]+-}++starPolyShape :: PolyShape+starPolyShape = PolyShape $ G.ClosedPath+  [(G.Point 0 0, G.JoinLine)+  ,(G.Point 1 2, G.JoinLine)+  ,(G.Point 2 0, G.JoinLine)+  ,(G.Point 0 1, G.JoinLine)+  ,(G.Point 2 1, G.JoinLine)+  ]++main :: IO ()+main = reanimate $ bg `parA` polygonTest+  where+    bg = animate $ const $ mkBackground "black"

+ examples/polyshape_test2.hs view

@@ -0,0 +1,35 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecordWildCards   #-}+module Main (main) where++import           Reanimate+import           Reanimate.PolyShape++polygonTest :: Animation+polygonTest = mkAnimation 10 $ \t ->+    let s = fromToS 0.5 (-0.5) t+        bigBox = head $ svgToPolyShapes $ pathify $+          mkRect 2 2+        smallBox = head $ svgToPolyShapes $ pathify $+          translate (0) (screenHeight*s) $+          rotate (-45) $+          mkRect 1 1++        overlap = mkGroup $ map renderPolyShape [bigBox, smallBox]+        merged = translate (screenWidth/2*0.1) 0 $+          mkGroup $ map renderPolyShape $+          unionPolyShapes [bigBox, smallBox]+    in std $ gridLayout [[ overlap, merged ]]+  where+    std =+      withFillOpacity 1 .+      withFillColor "blue" .+      withStrokeWidth 0.01 .+      withStrokeColor "white"++main :: IO ()+main = reanimate $ bg `parA` polygonTest+  where+    bg = animate $ const $ mkBackground "black"

+ examples/polyshape_test3.hs view

@@ -0,0 +1,49 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecordWildCards   #-}+module Main (main) where++import           Reanimate+import           Reanimate.PolyShape+import qualified Geom2D.CubicBezier  as G++polygonTest :: Animation+polygonTest = mkAnimation 10 $ \t ->+    let original =+          renderPolyShapes [iShape]+        originalP =+          renderPolyShapes $ map (plPartial t) [iShape]+        decomposed =+          renderPolyShapes $+          map plFromPolygon $ plDecompose [iShape]+        decomposedP =+          renderPolyShapes $ map (plPartial' t) $ concat $ plGroupTouching $+          map plFromPolygon $ plDecompose $ [iShape]+    in std $ gridLayout+      [[original, originalP]+      ,[decomposed, decomposedP]]+  where+    std =+      withFillOpacity 1 .+      withFillColor "blue" .+      withStrokeWidth 0.02 .+      withStrokeColor "white"++main :: IO ()+main = reanimate $ bg `parA` polygonTest+  where+    bg = animate $ const $ mkBackground "black"++iShape :: PolyShape+iShape = PolyShape $ G.ClosedPath+  [(G.Point 2 2, G.JoinLine)+  ,(G.Point 0 2, G.JoinLine)+  ,(G.Point 0 1, G.JoinLine)+  ,(G.Point 1 1, G.JoinLine)+  ,(G.Point 1 0, G.JoinLine)+  ,(G.Point 3 0, G.JoinLine)+  ,(G.Point 3 1, G.JoinLine)+  ,(G.Point 4 1, G.JoinLine)+  ,(G.Point 4 2, G.JoinLine)+  ]

+ examples/polyshape_test4.hs view

@@ -0,0 +1,34 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecordWildCards   #-}+module Main (main) where++import           Reanimate+import           Reanimate.PolyShape++polygonTest :: Animation+polygonTest = mapA std $+    let shapes = svgToPolyShapes $ center $ scale 6 $ latex "$\\infty$"+        groups =+          plGroupTouching $+          map plFromPolygon $ plDecompose $ shapes+        -- totalLen = sum $ map (maximum . map (plArea.snd)) groups+        totalLen = fromIntegral $ length groups+        anis = [ setDuration dur $ animate $ \t -> renderPolyShapes $ map (plPartial' t) group+               | group <- groups+               , let groupLen = 1 -- maximum (map (plArea.snd) group)+                     dur = groupLen/totalLen * totalT ]+    in foldr andThen (pause 0) anis+  where+    totalT = 5+    std =+      withFillOpacity 1 .+      withFillColor "blue" .+      withStrokeWidth 0.00 .+      withStrokeColor "white"++main :: IO ()+main = reanimate $ bg `parA` polygonTest+  where+    bg = animate $ const $ mkBackground "black"

+ examples/raster.golden view

file too large to diff

+ examples/raster.hs view

@@ -0,0 +1,16 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+module Main (main) where++import           Reanimate+import           Codec.Picture++main :: IO ()+main = reanimate $ mkAnimation 5 $ \t ->+    mkGroup+      [ mkBackground "black"+      , rotate (t*360) $ scaleToWidth 6 $ embedImage img+      ]+  where+    img = generateImage pixelRenderer 255 255+    pixelRenderer x y = PixelRGB8 (fromIntegral x) (fromIntegral y) 128

+ examples/shatter.hs view

@@ -0,0 +1,135 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Chiphunk.Low+import           Control.Monad+import           Graphics.SvgTree    (Tree)+import           Linear.V2+import           Reanimate+import           Reanimate.Chiphunk+import           Reanimate.PolyShape+import           System.IO.Unsafe++test :: Animation+test = unsafePerformIO $ do+  bodyStore <- newBodyStore+  let gravity = Vect 0 (-1)++  -- Create an empty space.+  space <- spaceNew+  spaceCollisionSlop space $= (screenWidth/2560)+  spaceGravity space $= gravity++  -- Add a static line segment shape for the ground.+  -- We'll make it slightly tilted so the ball will roll off.+  -- We attach it to a static body to tell Chipmunk it shouldn't be movable.+  static <- get $ spaceStaticBody space+  ground <- segmentShapeNew static+    (Vect (-screenWidth/2) 0)+    (Vect (screenWidth/2) (-screenHeight/2)) 0+  -- ground <- polyShapeNewRaw static+  --   [ Vect (-screenWidth/2) (screenHeight/2)+  --   , Vect (screenWidth/2) (-screenHeight/2)+  --   , Vect (-screenWidth/2) (-screenHeight/2)+  --   , Vect (-screenWidth/2) (screenHeight/2) ] 0+  shapeFriction ground $= 1+  spaceAddShape space ground++++  -- Now let's make a ball that falls onto the line and rolls off.+  -- First we need to make a cpBody to hold the physical properties of the object.+  -- These include the mass, position, velocity, angle, etc. of the object.+  -- Then we attach collision shapes to the Body to give it a size and shape.++  let toVect (V2 x y) = Vect x y++  let svg = center $ scale 2 $ latex "\\LaTeX"+      poly = svgToPolyShapes svg+      vectGroup = plDecompose poly+            --mkCircle (Num radius)+      -- vects = svgToVects svg+      -- vects' = fst $ convexHull vects 0+      -- svg' =+      --   withFillOpacity 0 $ withStrokeColor "white" $+      --   withStrokeWidth 0.01 $+      --   renderPolyShapes (map plFromPolygon vectGroup)+  --+  -- ballBody <- polyShapesToBody space poly+  -- bodyPosition ballBody $= Vect (-screenWidth/4) (screenHeight/2)+  --+  -- addToBodyStore bodyStore ballBody $+  --   withFillColor "white" $+  --   mkGroup+  --     [ svg' ]++  -- let splitPolys = vectGroup+  forM_ vectGroup $ \polygon -> do+    bd <- polygonsToBody space [map toVect polygon]+    bodyPosition bd $= Vect 0 (screenHeight/3)+    addToBodyStore bodyStore bd $+      renderPolyShape $ plFromPolygon polygon+      -- withFillColor "white" $+      -- mkGroup+      --   [ --withStrokeWidth (Num 0.005) $+      --     -- withStrokeWidth (Num 0.00) $+      --     -- withStrokeColor "white" $+      --     -- withFillOpacity 1 $+      --     renderPolyShape $ plFromPolygon polygon+      --   ]++  ani <- simulate space bodyStore 60 60 10+  spaceFreeRecursive space+  return ani++-- data LineCommand+--   = LineMove RPoint+--   -- | LineDraw RPoint+--   | LineBezier [RPoint]+--   | LineEnd++-- vectsToSVG :: [Vect] -> Tree+-- vectsToSVG (Vect x y:rest) =+--   mkPath $+--     MoveTo OriginAbsolute [V2 x y] :+--     [ LineTo OriginAbsolute [V2 a b] | Vect a b <- rest ] +++--     [ EndPath ]+--   where+--     mkPath cmds = PathTree $ defaultSvg & pathDefinition .~ cmds++-- polygonsToSVG :: [[Vect]] -> Tree+-- polygonsToSVG = merge . mkGroup . map vectsToSVG+--   where+--     merge svg = PathTree $ defaultSvg & pathDefinition .~ extractPath svg++-- svgToVects :: Tree -> [Vect]+-- svgToVects svg = map worker (lineToPoints 200 cmds)+--   where+--     worker (V2 x y) = Vect x y+--     cmds = toLineCommands $ wibble $ extractPath svg+--     wibble xs = takeWhile (/=EndPath) xs ++ [EndPath]++chunkPolyshapes :: Tree -> Tree+chunkPolyshapes t =+  withStrokeColor "white" $+  withStrokeWidth 0.01 $+  withFillColor "white" $ t++-- plArea :: PolyShape -> Double+-- plArea pl = areaForPoly (map toVect $ plPolygonify polyShapeTolerance pl) 0+--   where+--     toVect (Point x y) = Vect x y++reorient :: Tree -> Tree+reorient = id -- scale 4 . translate 0 (-0.9)++main :: IO ()+main = reanimate $ bg `parA` mapA reorient (line `parA` mapA chunkPolyshapes test)+  where+    bg = animate $ const $ mkBackground "black"+    line = animate $ const $ withStrokeColor "white" $+      withStrokeWidth 0.01 $+      mkLine (-screenWidth/2, 0)+             (screenWidth/2, -screenHeight/2)

+ examples/signals.hs view

@@ -0,0 +1,89 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecordWildCards   #-}+module Main (main) where++import           Data.Monoid         ((<>))+import           Data.Text           (Text, pack)+import           Graphics.SvgTree    hiding (Text)+import           Numeric+import           Reanimate.Animation+import           Reanimate.Constants+import           Reanimate.Driver    (reanimate)+import           Reanimate.LaTeX+import           Reanimate.Signal+import           Reanimate.Svg++main :: IO ()+main = reanimate $ pauseAtEnd 5 $+    curvesExample (\_ -> ([], "[]"))+      `seqA`+    curvesExample (\s ->+      ( [(1, constantS s)]+      , "[(1, constantS " <> ppD s <> ")]"))+      `seqA`+    curvesExample (\s ->+      ( [(s, constantS 0), (1, id)]+      , "[(" <> ppD s <> ", constantS 0), (1, id)]"))+      `seqA`+    curvesExample (\s ->+      ( [(s, constantS 1), (1, reverseS)]+      , "[(" <> ppD s <> ", constantS 1), (1, reverseS)]"))+      `seqA`+    curvesExample (\s ->+      ( [(1, curveS (2+s*3))]+      , "[(1, curveS "<> ppD (2+s*3) <>")]"))+      `seqA`+    curvesExample (\s ->+      ( [(1, fromToS s 1 . curveS 5)]+      , "[(1, fromToS "<>  ppD s <>" 1 \\$ curveS 5)]"))+      `seqA`+    curvesExample (\s ->+      ( [(1, bellS (2+s*3))]+      , "[(1, bellS "<> ppD (2+s*3)<>")]"))+  where+    ppD s = pack (showFFloat (Just 2) s "")++convertX, convertY :: Double -> Double+convertX x = x*(screenWidth/320)+convertY y = y*(screenHeight/180)++curvesExample :: (Double -> ([(Double, Double -> Double)], Text)) -> Animation+curvesExample gen = mkAnimation 2 $ \t ->+    mkGroup+    [ mkBackground "black"+    , withFillColor "white" $+      translate 0 (screenHeight*0.35) $+      center $ latex "Signals"+    , let (curveFns, name) = gen t in+      center $+      mkGroup+        [ withStrokeColor "white" $ withStrokeWidth 0.01 $+          mkGroup+          [ mkLine (0, 0)+                   (convertX 200, 0)+          , mkLine (0, 0)+                   (0, convertY 50) ]+        , withStrokeColor "white" $ withStrokeWidth 0.01 $+          mkGroup+          [ mkLine (0, convertX $ y)+                   (convertX 200, convertX y)+          | y <- [10,20,30,40,50] ]+        , withFillColor "white" $+          mkGroup+            [ translate (convertX $ -5) (convertX $ -5)  $ scale 0.5 $ center $ latex "0"+            , translate (convertX $ -5) (convertX $ 50)  $ scale 0.5 $ center $ latex "1"+            , translate (convertX $ 205) (convertX $ -5) $ scale 0.5 $ center $ latex "1"+            , translate (convertX $ 100) (convertX $ -30)$ scale 0.6 $ center $ latex name ]+        , withFillOpacity 0 $ withStrokeColor "green" $ -- withStrokeWidth 0.5 $+          lowerTransformations $ scaleXY (convertX $ 200) (convertX $ (50)) $ mkSignalLine (fromListS curveFns)+        ]+    ]++mkSignalLine :: Signal -> Tree+mkSignalLine fn = mkLinePath+    [ (x/steps, fn (x/steps))+    | x <- [0 .. steps] ]+  where+    steps = 1000

+ examples/simulate_equation.hs view

@@ -0,0 +1,201 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecordWildCards   #-}+module Main (main) where++import           Chiphunk.Low+import           Control.Monad+import           Graphics.SvgTree    (Tree)+import           Linear.V2+import           Reanimate.Chiphunk+import           Reanimate+import           Reanimate.PolyShape+import           System.IO.Unsafe++test :: Animation+test = unsafePerformIO $ do+  bodyStore <- newBodyStore+  let gravity = Vect 0 (-1)++  -- Create an empty space.+  space <- spaceNew+  -- spaceCollisionSlop space $= (screenWidth/2560)+  spaceGravity space $= gravity++  -- Add a static line segment shape for the ground.+  -- We'll make it slightly tilted so the ball will roll off.+  -- We attach it to a static body to tell Chipmunk it shouldn't be movable.+  static <- get $ spaceStaticBody space+  ground <- segmentShapeNew static+    (Vect (-screenWidth/2) (screenHeight/2))+    (Vect (screenWidth/2) (-screenHeight/2)) 0+  shapeFriction ground $= 1+  spaceAddShape space ground++  -- Now let's make a ball that falls onto the line and rolls off.+  -- First we need to make a cpBody to hold the physical properties of the object.+  -- These include the mass, position, velocity, angle, etc. of the object.+  -- Then we attach collision shapes to the Body to give it a size and shape.++  let toVect (V2 x y) = Vect x y++  let svg = center $ scale 2 $ latex "$\\Phi$"+      poly = svgToPolyShapes svg+      vectGroup = plDecompose' 1 poly+            --mkCircle (Num radius)+      -- vects = svgToVects svg+      -- vects' = fst $ convexHull vects 0+      -- svg' =+      --   withFillOpacity 0 $ withStrokeColor "white" $+      --   withStrokeWidth 0.01 $+      --   renderPolyShapes (map plFromPolygon vectGroup)+  --+  -- ballBody <- polyShapesToBody space poly+  -- bodyPosition ballBody $= Vect (-screenWidth/4) (screenHeight/2)+  --+  -- addToBodyStore bodyStore ballBody $+  --   withFillColor "white" $+  --   mkGroup+  --     [ svg' ]++  -- let splitPolys = vectGroup+  forM_ vectGroup $ \polygon -> do+    bd <- polygonsToBody space [map toVect polygon]+    bodyPosition bd $= Vect 0 (screenHeight/3)+    addToBodyStore bodyStore bd $+      renderPolyShape $ plFromPolygon polygon+      -- withFillColor "white" $+      -- mkGroup+      --   [ --withStrokeWidth (Num 0.005) $+      --     -- withStrokeWidth (Num 0.00) $+      --     -- withStrokeColor "white" $+      --     -- withFillOpacity 1 $+      --     renderPolyShape $ plFromPolygon polygon+      --   ]++  ani <- simulate space bodyStore 60 10 10+  spaceFreeRecursive space+  return ani++-- data LineCommand+--   = LineMove RPoint+--   -- | LineDraw RPoint+--   | LineBezier [RPoint]+--   | LineEnd++-- vectsToSVG :: [Vect] -> Tree+-- vectsToSVG (Vect x y:rest) =+--   mkPath $+--     MoveTo OriginAbsolute [V2 x y] :+--     [ LineTo OriginAbsolute [V2 a b] | Vect a b <- rest ] +++--     [ EndPath ]+--   where+--     mkPath cmds = PathTree $ defaultSvg & pathDefinition .~ cmds++-- polygonsToSVG :: [[Vect]] -> Tree+-- polygonsToSVG = merge . mkGroup . map vectsToSVG+--   where+--     merge svg = PathTree $ defaultSvg & pathDefinition .~ extractPath svg++-- svgToVects :: Tree -> [Vect]+-- svgToVects svg = map worker (lineToPoints 200 cmds)+--   where+--     worker (V2 x y) = Vect x y+--     cmds = toLineCommands $ wibble $ extractPath svg+--     wibble xs = takeWhile (/=EndPath) xs ++ [EndPath]++chunkPolyshapes :: Tree -> Tree+chunkPolyshapes t =+  mkGroup+  [+  -- withFillColor "white" $+  -- withFillOpacity 1 $+  -- withStrokeWidth (Num 0.01) $+  -- withStrokeColor "blue" $+  -- mkGroup $ map renderPolyShape $+  -- map mergePolyShapeHoles $+  -- plGroupShapes $+  -- -- unionPolyShapes $+  -- traceUnion $+  -- svgToPolyShapes t+    withStrokeWidth 0.001 $+    withStrokeColor "red" $+    withFillOpacity 0 $+    mkGroup $ map renderPolyShape $+    svgToPolyShapes t+    -- withStrokeWidth 0.001 $+    -- withStrokeColor "red" $+    -- mkGroup $ map renderPolyShape [pl12,pl13]+  ]++-- plArea :: PolyShape -> Double+-- plArea pl = areaForPoly (map toVect $ plPolygonify polyShapeTolerance pl) 0+--   where+--     toVect (Point x y) = Vect x y++reorient :: Tree -> Tree+reorient = scale 6 . translate 0 (-0.9)++-- traceUnion t =+--   let out = unionPolyShapes t+--   in trace (unlines $+--             ("Trace: " ++ show (sum $ map plArea t)) :+--             ("Check: " ++ show (sum $ map plArea out)) :+--             map show t ++ ["Out:"] ++ map show out) out++-- pl1 = PolyShape {unPolyShape = ClosedPath [(Point 9.076152025049407e-2 0.8793158714390639,JoinLine),(Point 0.48865783997158957 0.5875446050720555,JoinLine),(Point 0.6291445682322502 0.560956966929786,JoinLine),(Point 0.684414274089106 0.6254399758525935,JoinLine),(Point 8.549729225029659e-2 0.9226054512958702,JoinLine)]}+-- pl2 = PolyShape {unPolyShape = ClosedPath [(Point 0.3174796674934045 (-0.17830385091116296),JoinLine),(Point 0.3930521201476444 (-0.22384314349780887),JoinLine),(Point 0.42400439387727545 (-0.17026635397131717),JoinLine),(Point 0.367180526197663 (-0.13743818486413273),JoinLine)]}+-- pl3 = PolyShape {unPolyShape = ClosedPath [(Point 3.818529643334073e-2 4.994390978944008e-2,JoinLine),(Point 3.5509598929490127e-3 3.0061273354143103e-2,JoinLine),(Point 2.6643683455205014e-2 (-1.3314171733262437e-2),JoinLine)]}+-- pl4 = PolyShape {unPolyShape = ClosedPath [(Point 8.041123459068245e-2 (-4.592522065745819e-2),JoinLine),(Point 0.29675416515553454 (-0.17235110729572378),JoinLine),(Point 0.34590008699238584 (-0.13081971694800998),JoinLine),(Point 0.22737727571852562 4.513304505856075e-2,JoinLine),(Point 0.10498823211784264 (-3.373201779345303e-3),JoinLine)]}+-- pl5 = PolyShape {unPolyShape = ClosedPath [(Point 4.1547772506933034e-2 0.10908491253751296,JoinLine),(Point 5.7556283592893165e-2 (-2.2936657573235042e-2),JoinLine),(Point 0.18645395693905423 2.887370173550552e-2,JoinLine),(Point 0.24063435970720265 0.12675372820097613,JoinLine),(Point 0.19807899284556882 0.17285980812856805,JoinLine),(Point 8.45668830191807e-2 0.18680141998908184,JoinLine)]}+-- pl6 = PolyShape {unPolyShape = ClosedPath [(Point (-0.2574090456009813) 0.22352645168090446,JoinLine),(Point (-0.27139525022076605) 0.16073053060077958,JoinLine),(Point (-9.444562231853837e-2) 4.994785063168361e-2,JoinLine),(Point (-4.012849544398306e-2) 6.733655689772311e-2,JoinLine),(Point (-4.6550067413171026e-2) 0.20017002713448606,JoinLine)]}+-- pl7 = PolyShape {unPolyShape = ClosedPath [(Point (-0.3714373753139388) 0.20874389306710772,JoinLine),(Point (-0.29452803703157854) 0.1655072120141602,JoinLine),(Point (-0.2835217605861194) 0.22889335799870397,JoinLine),(Point (-0.34012040364470725) 0.2621083279509192,JoinLine)]}+-- pl8 = PolyShape {unPolyShape = ClosedPath [(Point 0.1712163207191154 0.2149766965620984,JoinLine),(Point 0.19616659305280632 0.1905738263277067,JoinLine),(Point 0.6315796735654418 0.5328570813993471,JoinLine),(Point 0.49895896036053317 0.5862908698518825,JoinLine)]}+-- pl9 = PolyShape {unPolyShape = ClosedPath [(Point 0.10739670009207455 0.19390054402859663,JoinLine),(Point 0.16776933204268935 0.17681618959615353,JoinLine),(Point 0.19166035517967667 0.1970425575035583,JoinLine),(Point 0.16584071117957827 0.2205236594561943,JoinLine)]}+-- pl10 = PolyShape {unPolyShape = ClosedPath [(Point (-0.3669271639958152) 1.1382616686769857,JoinLine),(Point (-0.30169633405804164) 1.1454435521784956,JoinLine),(Point (-0.2858326377769962) 1.2078015601462844,JoinLine),(Point (-0.3736986541543818) 1.199765022618315,JoinLine)]}+-- pl11 = PolyShape {unPolyShape = ClosedPath [(Point (-3.0061173114158422e-2) 1.1779482589541495,JoinLine),(Point 5.4907529076574785e-3 1.2315286122957358,JoinLine),(Point (-3.4177530164954735e-2) 1.2269151735259667,JoinLine)]}+-- pl12 = PolyShape {unPolyShape = ClosedPath+--   [(Point (-0.301730083226429*10) 1.1457103198223786,JoinLine)+--   ,(Point (-0.10299641326632633*10) 1.0714677466302471,JoinLine)+--   ,(Point (-3.162369257155477e-2*10) 1.182092647608354,JoinLine)+--   ,(Point (-3.636877035247056e-2*10) 1.2310026399913667,JoinLine)+--   ,(Point (-0.28589249688644447*10) 1.208074964264014,JoinLine)]}+-- pl13 = PolyShape {unPolyShape = ClosedPath+--   [(Point (-9.39646610882567e-2*10) 0.96018603098516,JoinLine)+--   ,(Point (-6.465077411411442e-2*10) 0.9514465910530718,JoinLine)+--   ,(Point (0.14134955357291654*10) 1.2461928296570437,JoinLine)+--   ,(Point (8.29425965486209e-3*10) 1.2330682613363688,JoinLine)+--   ,(Point (-0.10287959610529117*10) 1.0717052650151784,JoinLine)]}+-- pl14 = PolyShape {unPolyShape = ClosedPath [(Point (-0.6410657779553459) 0.5634659418454123,JoinLine),(Point (-0.641345175626591) 0.555247219163176,JoinLine),(Point (-0.4420444191709594) 0.5513358399243028,JoinLine),(Point (-0.10594072095664082) 0.9023816092645105,JoinLine),(Point (-7.577913627887163e-2) 0.9355404742795719,JoinLine),(Point (-0.10373629906690308) 0.9479533236181756,JoinLine)]}+-- pl15 = PolyShape {unPolyShape = ClosedPath [(Point (-3.523485505752828e-2) 0.1998408875682416,JoinLine),(Point 1.2546982880291841e-2 0.15208851089779252,JoinLine),(Point 0.13018455413761065 0.208301106923033,JoinLine),(Point 8.433578523127425e-2 0.9418697065712005,JoinLine),(Point (-7.884702019521485e-2) 0.932428903501462,JoinLine),(Point (-8.084970167352624e-2) 0.9296667902794287,JoinLine)]}+-- pl16 = PolyShape {unPolyShape = ClosedPath [(Point (-7.878197627394322e-2) 0.9319709148544943,JoinLine),(Point 8.438182768423004e-2 0.941734614325483,JoinLine),(Point 8.518191684165782e-2 0.9853357574063363,JoinLine),(Point 8.15663333974107e-2 0.9853939259545145,JoinLine),(Point (-4.936159754845773e-2) 0.9727171460725276,JoinLine)]}+-- pl17 = PolyShape {unPolyShape = ClosedPath [(Point (-4.99911351869741e-2) 0.9726181699897635,JoinLine),(Point 8.094809532371453e-2 0.9851776987711782,JoinLine),(Point 7.384845354621125e-2 1.0968271981504014,JoinLine),(Point 4.400324523877765e-2 1.1025518925313644,JoinLine)]}+-- pl18 = PolyShape {unPolyShape = ClosedPath [(Point 4.8482888984171635e-2 1.1105768787999895,JoinLine),(Point 7.512899062784217e-2 1.0959654499901599,JoinLine),(Point 0.2822087302816073 1.1420633097553252,JoinLine),(Point 0.27513287205836434 1.2060076125068004,JoinLine),(Point 0.20204313118994668 1.2231219927110881,JoinLine)]}+-- pl19 = PolyShape {unPolyShape = ClosedPath [(Point 0.2748784478150325 1.2078902086770202,JoinLine),(Point 0.2820822061918643 1.1439601884266248,JoinLine),(Point 0.3457225261391361 1.127943000720636,JoinLine),(Point 0.36082444597621127 1.187946730956635,JoinLine)]}+-- pl20 = PolyShape {unPolyShape = ClosedPath [(Point (-0.6864531908080556) 0.5032767356555317,JoinLine),(Point (-9.929294916146593e-2) 0.20829491627795255,JoinLine),(Point (-8.483230342755331e-2) 0.23523598173633797,JoinLine),(Point (-0.49217693932265094) 0.547917843618004,JoinLine)]}+-- pl21 = PolyShape {unPolyShape = ClosedPath [(Point (-9.274301086931341e-2) 0.2153671046631685,JoinLine),(Point (-4.68781647762479e-2) 0.2005165600411279,JoinLine),(Point (-4.790067311086227e-2) 0.23865704773924823,JoinLine),(Point (-7.795810209993242e-2) 0.2330461435659677,JoinLine)]}++-- unionTest = parsed+--   where+--     svg = center $ scale 2 $ latex "I"+--     poly = svgToPolyShapes svg+--     vectGroup = plDecompose' 1 poly+--     rendered = mkGroup $ take 100 $ map (renderPolyShape . plFromPolygon) vectGroup+--     parsed = svgToPolyShapes rendered+--+--     myDecompose tol =+--       concatMap decomposePolygon .+--       map (plPolygonify tol) .+--       map mergePolyShapeHoles .+--       plGroupShapes .+--       unionPolyShapes++main :: IO ()+main = reanimate $ bg `parA` mapA reorient (line `parA` mapA chunkPolyshapes test)+  where+    bg = animate $ const $ mkBackground "black"+    line = animate $ const $ withStrokeColor "white" $+      withStrokeWidth 0.01 $+      mkLine (-screenWidth/2, screenHeight/2)+             (screenWidth/2, -screenHeight/2)

+ examples/simulate_gravity.golden view

@@ -0,0 +1,50 @@+0<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 4.5)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+1<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 4.467592)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+2<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 4.365740)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+3<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 4.194444)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+4<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 3.953703)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+5<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 3.711111)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+6<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 3.345370)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+7<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 2.910185)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+8<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 2.405555)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+9<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 1.831481)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+10<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 1.187962)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+11<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, 0.475000)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+12<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, -0.307407)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+13<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.0, -0.983333)"><g transform="rotate(0.0)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+14<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.116802, -1.251369)"><g transform="rotate(-6.951933)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+15<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.286535, -1.299106)"><g transform="rotate(-17.054261)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+16<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.468335, -1.350237)"><g transform="rotate(-27.874763)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+17<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.662202, -1.404762)"><g transform="rotate(-39.413441)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+18<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(0.868134, -1.462681)"><g transform="rotate(-51.670293)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+19<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(1.086133, -1.523993)"><g transform="rotate(-64.645320)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+20<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(1.316199, -1.588699)"><g transform="rotate(-78.338523)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+21<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(1.508939, -1.642907)"><g transform="rotate(-89.810171)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+22<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(1.760723, -1.713722)"><g transform="rotate(-104.796088)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+23<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(2.024575, -1.787930)"><g transform="rotate(-120.500180)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+24<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(2.300492, -1.865532)"><g transform="rotate(-136.922447)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+25<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(2.588476, -1.946527)"><g transform="rotate(-154.062889)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+26<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(2.888526, -2.030916)"><g transform="rotate(-171.921506)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+27<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(3.200643, -2.118699)"><g transform="rotate(-190.498298)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+28<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(3.524826, -2.209875)"><g transform="rotate(-209.793265)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+29<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(3.792860, -2.285260)"><g transform="rotate(-225.746325)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+30<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(4.138763, -2.382545)"><g transform="rotate(-246.334007)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+31<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(4.496732, -2.483224)"><g transform="rotate(-267.639863)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+32<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(4.866767, -2.587296)"><g transform="rotate(-289.663895)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+33<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(5.248868, -2.694762)"><g transform="rotate(-312.406102)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+34<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(5.643036, -2.805622)"><g transform="rotate(-335.866484)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+35<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(6.049270, -2.919875)"><g transform="rotate(-360.045040)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+36<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(6.467571, -3.037523)"><g transform="rotate(-384.941772)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+37<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(6.810899, -3.134084)"><g transform="rotate(-405.376243)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+38<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(7.250920, -3.257839)"><g transform="rotate(-431.565689)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+39<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(7.703006, -3.384989)"><g transform="rotate(-458.473311)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+40<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(8.167159, -3.515532)"><g transform="rotate(-486.099107)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+41<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(8.639839, -3.668843)"><g transform="rotate(-514.232414)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+42<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(9.112840, -3.889838)"><g transform="rotate(-542.384872)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+43<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(9.585842, -4.180277)"><g transform="rotate(-570.537330)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+44<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(10.058843, -4.540160)"><g transform="rotate(-598.689788)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+45<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(10.437244, -4.878067)"><g transform="rotate(-621.211754)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+46<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(10.910246, -5.362951)"><g transform="rotate(-649.364212)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+47<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(11.383247, -5.917279)"><g transform="rotate(-677.516670)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+48<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(11.856249, -6.541051)"><g transform="rotate(-705.669128)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>+49<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><line stroke-width="0.01" stroke="#FFFFFF" x1="-8.0" x2="8.0" y2="-4.5" /></g><g><g transform="translate(12.329250, -7.234268)"><g transform="rotate(-733.821586)"><g fill="#FFFFFF"><circle r="1.0" /><line stroke="#000000" y2="1.0" /></g></g></g></g></g></g></svg>

+ examples/simulate_gravity.hs view

@@ -0,0 +1,79 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RecordWildCards   #-}+module Main (main) where++import           Chiphunk.Low+import           Reanimate.Chiphunk+import           Reanimate+import           System.IO.Unsafe+++test :: Animation+test = unsafePerformIO $ do+  bodyStore <- newBodyStore+  let gravity = Vect 0 (-10)++  -- Create an empty space.+  space <- spaceNew+  spaceGravity space $= gravity++  -- Add a static line segment shape for the ground.+  -- We'll make it slightly tilted so the ball will roll off.+  -- We attach it to a static body to tell Chipmunk it shouldn't be movable.+  static <- get $ spaceStaticBody space+  ground <- segmentShapeNew static+    (Vect (-screenWidth/2) 0)+    (Vect (screenWidth/2) (-screenHeight/2)) 0+  shapeFriction ground $= 1+  spaceAddShape space ground++  -- Now let's make a ball that falls onto the line and rolls off.+  -- First we need to make a cpBody to hold the physical properties of the object.+  -- These include the mass, position, velocity, angle, etc. of the object.+  -- Then we attach collision shapes to the Body to give it a size and shape.++  let radius = 1+  let mass = 1++  -- The moment of inertia is like mass for rotation+  -- Use the momentFor* functions to help you approximate it.+  let moment = momentForCircle mass 0 radius (Vect 0 0)++  -- The spaceAdd* functions return the thing that you are adding.+  ballBody <- bodyNew mass moment+  spaceAddBody space ballBody+  bodyPosition ballBody $= Vect 0 (screenHeight/2)++  -- Now we create the collision shape for the ball.+  -- You can create multiple collision shapes that point to the same body.+  -- They will all be attached to the body and move around to follow it.+  ballShape <- circleShapeNew ballBody radius (Vect 0 0)+  spaceAddShape space ballShape+  shapeFriction ballShape $= 0.7++  addToBodyStore bodyStore ballBody $+    withFillColor "white" $+    mkGroup+      [ mkCircle radius+      , withStrokeColor "black" $+        mkLine (0, 0) (0, radius) ]++  ani <- simulate space bodyStore 60 3 4++  shapeFree ballShape+  bodyFree ballBody+  shapeFree ground+  spaceFree space+  return ani+++main :: IO ()+main = reanimate $ bg `parA` line `parA` test+  where+    bg = animate $ const $ mkBackground "black"+    line = animate $ const $ withStrokeColor "white" $+      withStrokeWidth 0.01 $+      mkLine (-screenWidth/2, 0)+             (screenWidth/2, -screenHeight/2)

+ examples/sorting.hs view

@@ -0,0 +1,240 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE RankNTypes        #-}+module Main (main) where++import           Codec.Picture+import           Control.Monad.ST+import           Control.Monad.State.Strict+import           Data.Text                   (Text)+import qualified Data.Vector.Generic.Mutable as GV+import           Data.Vector.Unboxed         (Vector)+import qualified Data.Vector.Unboxed         as V+import           Reanimate+import           System.Random+import           System.Random.Shuffle++main :: IO ()+main = reanimate $+  demonstrateAlgorithm "Bubble sort" bubbleSort `seqA`+  demonstrateAlgorithm "Merge sort (left leaning)" mergeSort `seqA`+  demonstrateAlgorithm "Merge sort" mergeSortUp `seqA`+  demonstrateAlgorithm "Insertion sort" insertSort `seqA`+  demonstrateAlgorithm "Selection sort" selectionSort `seqA`+  adjustDuration (*3) (demonstrateAlgorithm "Quicksort" quicksort)++demonstrateAlgorithm :: Text -> (forall s. S s ()) -> Animation+demonstrateAlgorithm name algo = mkAnimation 10 $ \t ->+    let img = generateImage pixelRenderer width height+        seed = round (t * 3000)+        pixelRenderer x y = turbo (fromIntegral num / fromIntegral width)+          where+            num = (sortedDat !! y) V.! x+        sortedDat = runSort' seed algo width+        -- width = 1024+        width = 500+        height = length sortedDat+    in mkGroup+      [ mkBackground "black"++      , translate 0 (-screenWidth*0.03) $ center $ scaleXY (-1) 1 $+        scaleToSize 7.5 7.5 $ embedImage img+      , translate 0 (screenWidth*0.24) $ withFillColor "white" $ scale 1 $ center $+        latex name+      , withFillColor "white" $+        translate (-screenWidth*0.26) (-screenHeight*0.05) $+        rotate (-90) $ scale 0.5 $ center $+        latex "$Time \\rightarrow$"+      , withFillColor "white" $ translate ((screenWidth*0.30)) 0 $+        mkCircle ((1-t)*0.5)+      ]+  where+++-- main :: IO ()+-- main = print $ length $ runSort bubbleSort 2560++-- [3,4,1,2]+-- [++-- [1,2,3,4]+-- 0 3+-- half: 0 + 3`div`2 = 1+-- mergeSort 0 (0+1)+-- mergeSort (0+1) 3++data Env s = Env+  { envHistory :: [Vector Int]+  , envState   :: V.MVector s Int }++type S s a = StateT (Env s) (ST s) a++-- runSort :: (forall s. S s ()) -> Int -> [Vector Int]+-- runSort = runSort' 0xDEADBEEF++runSort' :: Int -> (forall s. S s ()) -> Int -> [Vector Int]+runSort' seed sortFn len = reverse $ runST (do+    arr <- V.thaw (V.fromList lst)+    let env = Env [] arr+    envHistory <$> execStateT sortFn env)+  where+    lst = shuffle' [1 .. len] len (mkStdGen seed)++readS :: Int -> S s Int+readS idx = do+  arr <- gets envState+  GV.unsafeRead arr idx++writeS :: Int -> Int -> S s ()+writeS idx val = do+  arr <- gets envState+  GV.unsafeWrite arr idx val++swapS :: Int -> Int -> S s ()+swapS a b = do+  arr <- gets envState+  GV.unsafeSwap arr a b++inputLength :: S s Int+inputLength = GV.length <$> gets envState++snapshot :: S s ()+snapshot = do+  arr <- gets envState+  vec <- V.freeze arr+  modify $ \st -> st { envHistory = vec : envHistory st }++mergeSort :: S s ()+mergeSort = do+  snapshot+  len <- inputLength+  mergeSort' 0 (len-1)++mergeSort' :: Int -> Int -> S s ()+mergeSort' start end | start == end = return ()+mergeSort' start end = do+  let half = start + (end-start) `div` 2+  mergeSort' start half+  mergeSort' (half+1) end+  leftVals <- mapM readS [start .. half]+  rightVals <- mapM readS [half+1 .. end]+  zipWithM_ writeS [start..] (merge leftVals rightVals)+  snapshot++merge :: Ord a => [a] -> [a] -> [a]+merge [] xs = xs+merge xs [] = xs+merge (x:xs) (y:ys)+  | x < y     = x : merge xs (y:ys)+  | otherwise = y : merge (x:xs) ys+++mergeSortUp :: S s ()+mergeSortUp = do+  snapshot+  len <- inputLength+  let chunkSizes = takeWhile (< len) $ map (2^) [0::Int ..]+  forM_ chunkSizes $ bottomUpMergeSort'++bottomUpMergeSort' :: Int -> S s ()+bottomUpMergeSort' chunkSize = do+  len <- inputLength+  forM_ [0, chunkSize*2 .. len-1] $ \idx -> do+    leftVals <- mapM readS (take chunkSize [idx .. len-1])+    rightVals <- mapM readS (take chunkSize (drop chunkSize [idx .. len-1]))+    zipWithM_ writeS [idx..] (merge leftVals rightVals)+    snapshot++selectionSort :: S s ()+selectionSort = do+  snapshot+  len <- inputLength+  forM_ [0 .. len-1] $ \j -> do+    i <- findMin j (j+1) len+    swapS j i+    snapshot+  where+    findMin j i len | i >= len = return j+    findMin j i len = do+      jVal <- readS j+      iVal <- readS i+      if iVal < jVal+        then findMin i (i+1) len+        else findMin j (i+1) len++insertSort :: S s ()+insertSort = do+  snapshot+  len <- inputLength+  forM_ [1 .. len-1] $ \j -> do+    a <- readS j+    worker a j+    snapshot+  where+    worker a 0 = writeS 0 a+    worker a j = do+      b <- readS (j-1)+      if (a < b)+        then do+          writeS j b+          worker a (j-1)+        else+          writeS j a+++bubbleSort :: S s ()+bubbleSort = do+  worker True 0+  where+    worker True 0 = do+      snapshot+      len <- inputLength+      worker False (len-1)+    worker False 0 = snapshot+    worker changed n = do+      a <- readS n+      b <- readS (n-1)+      if a < b+        then do+          writeS n b+          writeS (n-1) a+          when (n `mod` 50 == 0) snapshot+          worker True (n-1)+        else worker changed (n-1)++quicksort :: S s ()+quicksort = do+    snapshot+    len <- inputLength+    worker [(0, len-1)]+  where+    worker :: [(Int,Int)] -> S s ()+    worker [] = return ()+    worker ((lo,hi):rest) = do+      pivot <- readS (lo + (hi-lo) `div` 2)+      p <- partition pivot lo hi+      snapshot+      worker $ insertWork (lo, p) $ insertWork (p+1, hi) $ rest++    partition pivot lo hi = do+      loVal <- readS lo+      hiVal <- readS hi+      if loVal < pivot+        then partition pivot (lo+1) hi+        else if hiVal > pivot+          then partition pivot lo (hi-1)+          else if lo >= hi+            then return hi+            else do+              writeS lo hiVal+              writeS hi loVal+              snapshot+              partition pivot (lo+1) (hi-1)++    insertWork :: (Int,Int) -> [(Int,Int)] -> [(Int,Int)]+    insertWork (lo, hi) rest | lo >= hi = rest+    insertWork (lo, hi) [] = [(lo, hi)]+    insertWork (lo, hi) ((lo', hi'):rest)+      | hi-lo > hi'-lo' = (lo,hi) : (lo', hi') : rest+      | otherwise       = (lo', hi') : insertWork (lo, hi) rest

+ examples/sphere.hs view

@@ -0,0 +1,66 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE QuasiQuotes #-}+module Main (main) where++import           Reanimate+import           Data.String.Here++main :: IO ()+main = reanimate $ mkAnimation 5 $ \t ->+    let s = fromToS 0 360 t in+    mkGroup+    [ mkBackground "black"+    , povray [] (script s) ]+  where+    script s = [iTrim|+//EXAMPLE OF SPHERE++//Files with predefined colors and textures+#include "colors.inc"+#include "glass.inc"+#include "golds.inc"+#include "metals.inc"+#include "stones.inc"+#include "woods.inc"++#include "shapes3.inc"++//Place the camera+camera {+  orthographic+  angle 50+  location <0,0,-10>+  look_at  <0,0,0>+  right x*image_width/image_height+}+++//Ambient light to "brighten up" darker pictures+global_settings { ambient_light White*3 }++//Set a background color+//background { color White }+//background { color rgbt <0.1, 0, 0, 0> } // red+background { color rgbt <0, 0, 0, 1> } // transparent++//Sphere with specified center point and radius+sphere {+  <0,0,0>, 2+  texture {+    pigment{ color rgbt <0,0,1,0.1> }+  }+}++object {+  Ring_Sphere(2.00, 2.02, 0.015, 0.015, 12, 12)+  texture {+    pigment{ color<1,1,1> }+  }+  rotate <0,${s},0>+  rotate <-30,0,0>+}+++             |]

+ examples/sunflower.hs view

@@ -0,0 +1,42 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import qualified Data.Colour.Palette.BrewerSet as D+import           Diagrams.Prelude              hiding (Animation, boundingBox,+                                                center, circle, duration,+                                                fontSize, rotate, scale,+                                                translate)+import qualified Diagrams.Prelude              as D+import           Reanimate.Diagrams+import           Reanimate hiding ((#))++main :: IO ()+main = reanimate $ mkAnimation 10 $ \t ->+    let n = fromToS 1 500 t+        rot = fromToS 0 45 t+    in mkGroup+    [ mkBackground "black"+    , rotate rot $ translate (-320/2) (-180/2)+      (dSvg $ round n) ]+  where+    dSvg n = renderDiagram $ withEnvelope (D.rect 320 180 :: SvgDiagram) $+      D.scale 0.2 $ sunflower n++    mkCoords :: [P2 Double]+    mkCoords =[coord (fromIntegral i) | i <- [1::Int ..]]+      where+        coord m = p2 $ fromPolar (sqrt m) (2.4 * m)+        fromPolar r theta = (r * cos theta, r * sin theta)++    floret :: Double -> SvgDiagram+    floret r = D.circle 0.6 # lw none # fc (colors !! n)+      where+        n = floor (1.4 * sqrt r) `mod` 10+        colors = black : (reverse $ D.brewerSet D.YlOrBr 9)++    sunflower :: Int ->  SvgDiagram+    sunflower n = frame 4 $ position $ take n $ zip mkCoords florets+      where+        florets = [ floret (sqrt (fromIntegral i)) | i <- [1::Int ..]]

+ examples/tangent_and_normal.golden view

@@ -0,0 +1,50 @@+0<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 22.0169, 94.9841)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M22.0169,94.9841 l75.9663,65.0317" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 92.5159, 89.5169)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M27.4841,165.4831 l65.0317,-75.9663" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M63.2516,123.7017 l-3.7983,-3.2516 l-3.2516,3.7983 l3.7983,3.2516 Z" /></g></g></g></g></g></g></g></svg>+1<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 22.6904, 94.1973)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M22.6904,94.1973 l75.9638,65.0346" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 93.1896, 88.7327)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M28.155,164.6965 l65.0346,-75.9638" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M63.9241,122.9164 l-3.7982,-3.2517 l-3.2517,3.7982 l3.7982,3.2517 Z" /></g></g></g></g></g></g></g></svg>+2<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 24.7257, 91.8211)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M24.7257,91.8211 l75.9271,65.0774" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 95.228, 86.3962)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M30.1506,162.3234 l65.0774,-75.9271" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M65.9432,120.5634 l-3.7964,-3.2539 l-3.2539,3.7964 l3.7964,3.2539 Z" /></g></g></g></g></g></g></g></svg>+3<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 28.1666, 87.8152)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M28.1666,87.8152 l75.7673,65.2634" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 98.682, 82.5633)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M33.4186,158.3306 l65.2634,-75.7673" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M69.3135,116.6586 l-3.7884,-3.2632 l-3.2632,3.7884 l3.7884,3.2632 Z" /></g></g></g></g></g></g></g></svg>+4<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 33.0883, 82.1363)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M33.0883,82.1363 l75.3296,65.7682" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 103.6372, 77.3556)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M37.869,152.6852 l65.7682,-75.3296" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M74.0415,111.2539 l-3.7665,-3.2884 l-3.2884,3.7665 l3.7665,3.2884 Z" /></g></g></g></g></g></g></g></svg>+5<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 39.6069, 74.77)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M39.6069,74.77 l74.3701,66.8512" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 110.2176, 71.0105)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M43.3664,145.3807 l66.8512,-74.3701" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M80.1345,104.4771 l-3.7185,-3.3426 l-3.3426,3.7185 l3.7185,3.3426 Z" /></g></g></g></g></g></g></g></svg>+6<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 47.9097, 65.7698)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M47.9097,65.7698 l72.4904,68.885" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 118.5974, 63.9671)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M49.7124,136.4574 l68.885,-72.4904" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M87.5991,96.5877 l-3.6245,-3.4443 l-3.4443,3.6245 l3.6245,3.4443 Z" /></g></g></g></g></g></g></g></svg>+7<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 58.3358, 55.2976)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M58.3358,55.2976 l68.969,72.4105" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 129.0255, 57.0184)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M56.615,125.9873 l72.4105,-68.969" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M96.4408,88.0544 l-3.4484,-3.6205 l-3.6205,3.4484 l3.4484,3.6205 Z" /></g></g></g></g></g></g></g></svg>+8<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 71.5842, 43.6799)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M71.5842,43.6799 l62.3369,78.1928" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 141.849, 51.6079)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M63.6562,113.9447 l78.1928,-62.3369" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M106.6623,79.6595 l-3.1168,-3.9096 l-3.9096,3.1168 l3.1168,3.9096 Z" /></g></g></g></g></g></g></g></svg>+9<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 89.2156, 31.6328)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M89.2156,31.6328 l49.367,86.9649" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 157.3816, 50.4317)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M70.4167,99.7987 l86.9649,-49.367" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M118.2474,72.6469 l-2.4684,-4.3482 l-4.3482,2.4684 l2.4684,4.3482 Z" /></g></g></g></g></g></g></g></svg>+10<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 113.8732, 21.5299)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M113.8732,21.5299 l24.8051,96.8747" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 174.7131, 57.5647)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M77.8384,82.3698 l96.8747,-24.8051" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M131.1195,68.727 l-1.2403,-4.8437 l-4.8437,1.2403 l1.2403,4.8437 Z" /></g></g></g></g></g></g></g></svg>+11<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 146.7504, 19.5381)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M146.7504,19.5381 l-13.3076,99.1106" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 189.652, 75.7472)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M90.5414,62.4396 l99.1106,13.3076" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M145.0522,69.7588 l0.6654,-4.9555 l-4.9555,-0.6654 l-0.6654,4.9555 Z" /></g></g></g></g></g></g></g></svg>+12<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 181.0389, 31.6189)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M181.0389,31.6189 l-50.5951,86.2562" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 198.8694, 100.0445)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M112.6132,49.4494 l86.2562,50.5951" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M160.0541,77.2767 l2.5298,-4.3128 l-4.3128,-2.5298 l-2.5298,4.3128 Z" /></g></g></g></g></g></g></g></svg>+13<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 207.6502, 52.5581)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M207.6502,52.5581 l-69.6997,71.7074" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 208.6541, 123.2616)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M136.9467,53.5619 l71.7074,69.6997" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M176.3857,91.8968 l3.485,-3.5854 l-3.5854,-3.485 l-3.485,3.5854 Z" /></g></g></g></g></g></g></g></svg>+14<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 225.5818, 71.4667)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M225.5818,71.4667 l-74.3038,66.9249" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 221.8924, 142.0811)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M154.9674,67.7773 l66.9249,74.3038" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M191.7761,108.6444 l3.7152,-3.3462 l-3.3462,-3.7152 l-3.7152,3.3462 Z" /></g></g></g></g></g></g></g></svg>+15<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 237.7302, 84.8372)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M237.7302,84.8372 l-72.5465,68.8259" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 235.8699, 155.5234)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M167.044,82.9769 l68.8259,72.5465" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M204.8983,122.8775 l3.6273,-3.4413 l-3.4413,-3.6273 l-3.6273,3.4413 Z" /></g></g></g></g></g></g></g></svg>+16<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 242.0332, 89.1121)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M242.0332,89.1121 l-61.2747,79.028" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 250.9099, 159.2634)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M171.8819,97.9887 l79.028,61.2747" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M215.3473,131.6898 l3.0637,-3.9514 l-3.9514,-3.0637 l-3.0637,3.9514 Z" /></g></g></g></g></g></g></g></svg>+17<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 235.9136, 85.9234)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M235.9136,85.9234 l-34.9141,93.707" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 265.31, 150.234)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M171.603,115.3198 l93.707,34.9141" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M223.1419,134.5226 l1.7457,-4.6854 l-4.6854,-1.7457 l-1.7457,4.6854 Z" /></g></g></g></g></g></g></g></svg>+18<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 221.9104, 83.7055)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M221.9104,83.7055 l3.1744,99.9496" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 273.4725, 132.0931)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M173.5229,135.2675 l99.9496,-3.1744" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M228.4951,133.5216 l-0.1587,-4.9975 l-4.9975,0.1587 l0.1587,4.9975 Z" /></g></g></g></g></g></g></g></svg>+19<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 209.3483, 86.2147)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M209.3483,86.2147 l35.667,93.4231" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 273.8933, 115.0928)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M180.4703,150.7597 l93.4231,-35.667" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M231.853,131.1429 l-1.7833,-4.6712 l-4.6712,1.7833 l1.7833,4.6712 Z" /></g></g></g></g></g></g></g></svg>+20<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 203.1141, 89.3197)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M203.1141,89.3197 l53.6286,84.4036" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 272.1303, 104.7072)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M187.7267,158.3359 l84.4036,-53.6286" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M234.1486,128.8401 l-2.6814,-4.2202 l-4.2202,2.6814 l2.6814,4.2202 Z" /></g></g></g></g></g></g></g></svg>+21<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.1119, 90.722)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.1119,90.722 l61.7412,78.664" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 271.3145, 99.1834)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M192.6505,160.9246 l78.664,-61.7412" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M235.9157,126.9669 l-3.0871,-3.9332 l-3.9332,3.0871 l3.0871,3.9332 Z" /></g></g></g></g></g></g></g></svg>+22<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.0168, 90.794)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.0168,90.794 l64.9093,76.0709" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 271.5069, 96.3748)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M195.436,161.2841 l76.0709,-64.9093" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M237.275,125.584 l-3.2455,-3.8035 l-3.8035,3.2455 l3.2455,3.8035 Z" /></g></g></g></g></g></g></g></svg>+23<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.5296, 90.3493)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.5296,90.3493 l65.8426,75.2645" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 272.0832, 95.0602)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M196.8187,160.9028 l75.2645,-65.8426" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M238.2142,124.6894 l-3.2921,-3.7632 l-3.7632,3.2921 l3.2921,3.7632 Z" /></g></g></g></g></g></g></g></svg>+24<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.9498, 89.9808)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.9498,89.9808 l65.9784,75.1455" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 272.5118, 94.5643)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M197.3663,160.5428 l75.1455,-65.9784" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M238.6963,124.2546 l-3.2989,-3.7573 l-3.7573,3.2989 l3.2989,3.7573 Z" /></g></g></g></g></g></g></g></svg>+25<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.9498, 89.9808)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.9498,89.9808 l65.9784,75.1455" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 272.5118, 94.5643)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M197.3663,160.5428 l75.1455,-65.9784" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M238.6963,124.2546 l-3.2989,-3.7573 l-3.7573,3.2989 l3.2989,3.7573 Z" /></g></g></g></g></g></g></g></svg>+26<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.5296, 90.3493)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.5296,90.3493 l65.8426,75.2645" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 272.0832, 95.0602)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M196.8187,160.9028 l75.2645,-65.8426" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M238.2142,124.6894 l-3.2921,-3.7632 l-3.7632,3.2921 l3.2921,3.7632 Z" /></g></g></g></g></g></g></g></svg>+27<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.0168, 90.794)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.0168,90.794 l64.9093,76.0709" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 271.5069, 96.3748)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M195.436,161.2841 l76.0709,-64.9093" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M237.275,125.584 l-3.2455,-3.8035 l-3.8035,3.2455 l3.2455,3.8035 Z" /></g></g></g></g></g></g></g></svg>+28<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 201.1119, 90.722)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M201.1119,90.722 l61.7412,78.664" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 271.3145, 99.1834)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M192.6505,160.9246 l78.664,-61.7412" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M235.9157,126.9669 l-3.0871,-3.9332 l-3.9332,3.0871 l3.0871,3.9332 Z" /></g></g></g></g></g></g></g></svg>+29<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 203.1141, 89.3197)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M203.1141,89.3197 l53.6286,84.4036" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 272.1303, 104.7072)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M187.7267,158.3359 l84.4036,-53.6286" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M234.1486,128.8401 l-2.6814,-4.2202 l-4.2202,2.6814 l2.6814,4.2202 Z" /></g></g></g></g></g></g></g></svg>+30<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 209.3483, 86.2147)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M209.3483,86.2147 l35.667,93.4231" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 273.8933, 115.0928)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M180.4703,150.7597 l93.4231,-35.667" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M231.853,131.1429 l-1.7833,-4.6712 l-4.6712,1.7833 l1.7833,4.6712 Z" /></g></g></g></g></g></g></g></svg>+31<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 221.9104, 83.7055)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M221.9104,83.7055 l3.1744,99.9496" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 273.4725, 132.0931)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M173.5229,135.2675 l99.9496,-3.1744" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M228.4951,133.5216 l-0.1587,-4.9975 l-4.9975,0.1587 l0.1587,4.9975 Z" /></g></g></g></g></g></g></g></svg>+32<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 235.9136, 85.9234)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M235.9136,85.9234 l-34.9141,93.707" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 265.31, 150.234)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M171.603,115.3198 l93.707,34.9141" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M223.1419,134.5226 l1.7457,-4.6854 l-4.6854,-1.7457 l-1.7457,4.6854 Z" /></g></g></g></g></g></g></g></svg>+33<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 242.0332, 89.1121)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M242.0332,89.1121 l-61.2747,79.028" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 250.9099, 159.2634)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M171.8819,97.9887 l79.028,61.2747" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M215.3473,131.6898 l3.0637,-3.9514 l-3.9514,-3.0637 l-3.0637,3.9514 Z" /></g></g></g></g></g></g></g></svg>+34<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 237.7302, 84.8372)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M237.7302,84.8372 l-72.5465,68.8259" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 235.8699, 155.5234)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M167.044,82.9769 l68.8259,72.5465" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M204.8983,122.8775 l3.6273,-3.4413 l-3.4413,-3.6273 l-3.6273,3.4413 Z" /></g></g></g></g></g></g></g></svg>+35<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 225.5818, 71.4667)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M225.5818,71.4667 l-74.3038,66.9249" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 221.8924, 142.0811)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M154.9674,67.7773 l66.9249,74.3038" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M191.7761,108.6444 l3.7152,-3.3462 l-3.3462,-3.7152 l-3.7152,3.3462 Z" /></g></g></g></g></g></g></g></svg>+36<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 207.6502, 52.5581)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M207.6502,52.5581 l-69.6997,71.7074" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 208.6541, 123.2616)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M136.9467,53.5619 l71.7074,69.6997" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M176.3857,91.8968 l3.485,-3.5854 l-3.5854,-3.485 l-3.485,3.5854 Z" /></g></g></g></g></g></g></g></svg>+37<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 181.0389, 31.6189)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M181.0389,31.6189 l-50.5951,86.2562" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 198.8694, 100.0445)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M112.6132,49.4494 l86.2562,50.5951" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M160.0541,77.2767 l2.5298,-4.3128 l-4.3128,-2.5298 l-2.5298,4.3128 Z" /></g></g></g></g></g></g></g></svg>+38<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 146.7504, 19.5381)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M146.7504,19.5381 l-13.3076,99.1106" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 189.652, 75.7472)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M90.5414,62.4396 l99.1106,13.3076" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M145.0522,69.7588 l0.6654,-4.9555 l-4.9555,-0.6654 l-0.6654,4.9555 Z" /></g></g></g></g></g></g></g></svg>+39<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 113.8732, 21.5299)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M113.8732,21.5299 l24.8051,96.8747" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 174.7131, 57.5647)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M77.8384,82.3698 l96.8747,-24.8051" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M131.1195,68.727 l-1.2403,-4.8437 l-4.8437,1.2403 l1.2403,4.8437 Z" /></g></g></g></g></g></g></g></svg>+40<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 89.2156, 31.6328)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M89.2156,31.6328 l49.367,86.9649" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 157.3816, 50.4317)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M70.4167,99.7987 l86.9649,-49.367" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M118.2474,72.6469 l-2.4684,-4.3482 l-4.3482,2.4684 l2.4684,4.3482 Z" /></g></g></g></g></g></g></g></svg>+41<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 71.5842, 43.6799)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M71.5842,43.6799 l62.3369,78.1928" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 141.849, 51.6079)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M63.6562,113.9447 l78.1928,-62.3369" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M106.6623,79.6595 l-3.1168,-3.9096 l-3.9096,3.1168 l3.1168,3.9096 Z" /></g></g></g></g></g></g></g></svg>+42<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 58.3358, 55.2976)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M58.3358,55.2976 l68.969,72.4105" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 129.0255, 57.0184)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M56.615,125.9873 l72.4105,-68.969" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M96.4408,88.0544 l-3.4484,-3.6205 l-3.6205,3.4484 l3.4484,3.6205 Z" /></g></g></g></g></g></g></g></svg>+43<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 47.9097, 65.7698)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M47.9097,65.7698 l72.4904,68.885" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 118.5974, 63.9671)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M49.7124,136.4574 l68.885,-72.4904" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M87.5991,96.5877 l-3.6245,-3.4443 l-3.4443,3.6245 l3.6245,3.4443 Z" /></g></g></g></g></g></g></g></svg>+44<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 39.6069, 74.77)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M39.6069,74.77 l74.3701,66.8512" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 110.2176, 71.0105)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M43.3664,145.3807 l66.8512,-74.3701" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M80.1345,104.4771 l-3.7185,-3.3426 l-3.3426,3.7185 l3.7185,3.3426 Z" /></g></g></g></g></g></g></g></svg>+45<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 33.0883, 82.1363)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M33.0883,82.1363 l75.3296,65.7682" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 103.6372, 77.3556)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M37.869,152.6852 l65.7682,-75.3296" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M74.0415,111.2539 l-3.7665,-3.2884 l-3.2884,3.7665 l3.7665,3.2884 Z" /></g></g></g></g></g></g></g></svg>+46<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 28.1666, 87.8152)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M28.1666,87.8152 l75.7673,65.2634" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 98.682, 82.5633)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M33.4186,158.3306 l65.2634,-75.7673" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M69.3135,116.6586 l-3.7884,-3.2632 l-3.2632,3.7884 l3.7884,3.2632 Z" /></g></g></g></g></g></g></g></svg>+47<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 24.7257, 91.8211)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M24.7257,91.8211 l75.9271,65.0774" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 95.228, 86.3962)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M30.1506,162.3234 l65.0774,-75.9271" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M65.9432,120.5634 l-3.7964,-3.2539 l-3.2539,3.7964 l3.7964,3.2539 Z" /></g></g></g></g></g></g></g></svg>+48<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 22.6904, 94.1973)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M22.6904,94.1973 l75.9638,65.0346" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 93.1896, 88.7327)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M28.155,164.6965 l65.0346,-75.9638" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M63.9241,122.9164 l-3.7982,-3.2517 l-3.2517,3.7982 l3.7982,3.2517 Z" /></g></g></g></g></g></g></g></svg>+49<svg viewBox="-8.0 -4.5 16.0 9.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"><g stroke-width="0.05" transform="scale(1.0, -1.0)"><g><g fill="#000000" transform="translate(-8.0, -4.5)"><rect width="16.0" height="9.0" /></g><g transform="scale(0.04)"><g transform="scale(1.0, -1.0)"><g transform="translate(-160.0, -90.0)"><g stroke="#FFFFFF" transform="translate(-0.0, -0.0)"><defs /><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0"><path d="M60.0,127.5 c16.8155,-19.6429 33.631,-39.2857 50.0,-50.0 c16.369,-10.7143 32.2917,-12.5 50.0,-0.0 c17.7083,12.5 37.2024,39.2857 50.0,50.0 c12.7976,10.7143 18.8988,5.3571 25.0,-0.0" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 22.0169, 94.9841)" text-anchor="start">normal</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M22.0169,94.9841 l75.9663,65.0317" /></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#FFFFFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="1.0" stroke-opacity="1.0" font-size="12.000000px"><text stroke="none" transform="matrix(1.0, 0.0, 0.0, 1.0, 92.5159, 89.5169)" text-anchor="start">tangent</text></g><g stroke-width="0.960000" stroke="#FFFFFF" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M27.4841,165.4831 l65.0317,-75.9663" /></g><g stroke-width="0.960000" stroke="#008000" fill="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10.0" fill-opacity="0.0" stroke-opacity="1.0" font-size="12.000000px"><path d="M63.2516,123.7017 l-3.7983,-3.2516 l-3.2516,3.7983 l3.7983,3.2516 Z" /></g></g></g></g></g></g></g></svg>

+ examples/tangent_and_normal.hs view

@@ -0,0 +1,57 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+module Main (main) where++import           Diagrams.Prelude              hiding (Animation, boundingBox,+                                                center, circle, duration,+                                                fontSize, rotate, scale,+                                                translate)+import qualified Diagrams.Prelude              as D+import           Reanimate.Diagrams+import           Reanimate.Driver              (reanimate)+import           Reanimate.Animation+import           Reanimate.Signal+import           Reanimate.Svg+++main :: IO ()+main = reanimate $ playThenReverseA $ mkAnimation 5 $ \t ->+    let s = curveS 2 t in+    mkGroup+    [ mkBackground "black"+    , scale (2/50) $ scaleXY 1 (-1) $+      translate (-320/2) (-180/2) $ withStrokeColor "white" $+      renderDiagram $+        withEnvelope (D.rect 320 180 :: SvgDiagram) $+        D.scale 50 $ D.translate (V2 (-2) (-0.75)) $ dia s ]+  where+    dia param =+        frame 0.5 $ lc white $+        mconcat+          [ lc green $ rightAngleSquare+          , tangentLine+          , fc white $ baselineText "tangent" # D.translate tangentVector+          , normalLine+          , fc white $ topLeftText "normal" # D.translate (-normalVector)+          ] # moveTo pt # D.fontSize large+          <> strokeLocTrail spline+      where+        pts = map p2 [(0,0), (1,1), (2,1), (3,0), (3.5,0)]++        spline :: Located (Trail V2 Double)+        spline = cubicSpline False pts++        pt = atParam spline param+        tangentVector ::  V2 Double+        tangentVector = D.normalize $ tangentAtParam spline param+        normalVector = D.normalize $ normalAtParam spline param++        symmetricLine :: V2 Double -> SvgDiagram+        symmetricLine v = fromOffsets [2 *^ v] # D.center+        tangentLine :: SvgDiagram+        tangentLine = symmetricLine tangentVector+        normalLine = symmetricLine normalVector++        rightAngleSquare :: SvgDiagram+        rightAngleSquare = square 0.1 # alignBL # D.rotate (signedAngleBetween tangentVector unitX)

+ examples/vector_field.hs view

@@ -0,0 +1,57 @@+#!/usr/bin/env stack+-- stack runghc --package reanimate+{-# LANGUAGE OverloadedStrings #-}+{-# LANGUAGE FlexibleContexts #-}+module Main (main) where++import           Diagrams.Prelude              hiding (Animation, boundingBox,+                                                center, circle, duration,+                                                fontSize, rotate, scale,+                                                translate)+import qualified Diagrams.Prelude              as D+import           Reanimate.Diagrams+import           Reanimate hiding ((#))+++main :: IO ()+main = reanimate $ repeatA 5 $ mkAnimation 5 $ \t ->+    mkGroup+    [ mkBackground "black"+    , scale (2/50) $ center $ -- translate (-320/2) (-180/2) $+      withStrokeColor "white" $+      renderDiagram $+        withEnvelope (D.rect 320 180 :: SvgDiagram) $+        D.scale 50 $+        lc white $+        example t ]++vectorField :: (Double, Double) -> V2 Double+vectorField (x, y) = r2 (sin (y + 1), sin (x + 1))++arrowAtPoint :: (Double, Double) -> SvgDiagram+arrowAtPoint (x, y) = arrowAt' opts (p2 (x, y)) (sL *^ vf) # alignTL+  where+    vf   = vectorField (x, y)+    m    = norm $ vectorField (x, y)++-- Head size is a function of the length of the vector+-- as are tail size and shaft length.++    hs   = 0.02 * m+    sW   = 0.004 * m+    sL   = 0.05 + 0.1 * m+    opts = (with & arrowHead  .~ spike+                 & headLength .~ normalized hs+                 & shaftStyle %~ lwN sW)++example :: Double -> SvgDiagram+example n = field+  where+    xOffset = cos (2*pi*n)+    yOffset = sin (2*pi*n)+    locs   = [(x+xOffset, y+yOffset) | x <- [0.1, 0.3 .. 3.25], y <- [0.1, 0.3 .. 3.25]]++    points = map p2 locs++    arrows = map arrowAtPoint locs+    field   = position $ zip points arrows

reanimate.cabal view

@@ -3,7 +3,7 @@ --  see http://haskell.org/cabal/users-guide/  name:                reanimate-version:             0.1.8.0+version:             0.1.9.0 -- synopsis: -- description: license:             PublicDomain@@ -13,7 +13,7 @@ synopsis:            Animation library based on SVGs. homepage:            https://github.com/Lemmih/reanimate build-type:          Simple-extra-source-files:  ChangeLog.md+extra-source-files:  ChangeLog.md, examples/*.hs, examples/*.golden extra-doc-files:     docs/gifs/*.gif  @@ -45,8 +45,6 @@                       Reanimate.Animation                       Reanimate.Signal                       Reanimate.Render-                      Reanimate.Examples-                      Reanimate.Combinators                       Reanimate.LaTeX                       Reanimate.Svg                       Reanimate.Svg.Unuse

src/Reanimate/Builtin/Documentation.hs view

@@ -2,7 +2,9 @@  import Reanimate.Animation import Reanimate.Svg+import Reanimate.Raster import Reanimate.Constants+import Codec.Picture  docEnv :: Animation -> Animation docEnv = mapA $ \svg -> mkGroup@@ -38,3 +40,11 @@     withFillOpacity 1 $ mkCircle 0.5 ]   where     widthP = 0.8++showColorMap :: (Double -> PixelRGB8) -> SVG+showColorMap f = center $ scaleToSize screenWidth screenHeight $ embedImage img+  where+    width = 256+    height = 1+    img = generateImage pixelRenderer width height+    pixelRenderer x _y = f (fromIntegral x / fromIntegral (width-1))

src/Reanimate/Builtin/TernaryPlot.hs view

@@ -12,8 +12,9 @@ type CCoord = Double  -- Creates a centered ternary plot with a width of 5.-raster :: Int -> (ACoord -> BCoord -> CCoord -> PixelRGBA8) -> Tree-raster density fn =+ternaryPlot :: Int -- ^ Pixels in the X-axis.+            -> (ACoord -> BCoord -> CCoord -> PixelRGBA8) -> Tree+ternaryPlot density fn =     scaleToWidth stdWidth $     translate (-cX) (-cY) $     scaleToWidth 1 $

− src/Reanimate/Combinators.hs

@@ -1,14 +0,0 @@-module Reanimate.Combinators where--type Path = [(Double, Double)]--approxFnData :: Int -> (Double -> (Double, Double)) -> Path-approxFnData steps fn =-  fn 0 : [ fn (fromIntegral n/fromIntegral steps) | n <- [0..steps] ]--morphPath :: Path -> Path -> Double -> Path-morphPath src dst idx = zipWith worker src dst-  where-    worker (x1, y1) (x2, y2) =-      (x1 + (x2-x1)*idx-      ,y1 + (y2-y1)*idx)

− src/Reanimate/Examples.hs

@@ -1,563 +0,0 @@-{-# LANGUAGE Arrows                #-}-{-# LANGUAGE FlexibleContexts      #-}-{-# LANGUAGE OverloadedStrings     #-}-{-# LANGUAGE PackageImports        #-}-{-# LANGUAGE ParallelListComp      #-}-{-# LANGUAGE PartialTypeSignatures #-}-{-# LANGUAGE TypeFamilies          #-}-module Reanimate.Examples where--{--import           Control.Lens                  ()-import qualified Data.Map                      as M-import           Graphics.SvgTree              as S hiding (circle, width)-import           Linear.V2--import           Reanimate.Combinators-import           Reanimate.Diagrams-import           Reanimate.LaTeX-import           Reanimate.Monad-import           Reanimate.Signal-import           Reanimate.Svg--import           Diagrams.Prelude              (deg, turn, withEnvelope, (@@))-import qualified Diagrams.Prelude              as D-import qualified Diagrams.TwoD.Path.LSystem    as D--}--{--sinewave :: Ani ()-sinewave = proc () -> do-    duration 10 -< ()-    emit -< toHtml $ mkBackground "black"-    idx <- signalOscillate 0 1 -< ()-    emit -< do-      defs_ $ clipPath_ [id_ "clip"] $ toHtml $-        mkRect (Num 0, Num (-height)) (Num $ idx*width) (Num 320)-      toHtml $ translate margin height $ withStrokeColor "white" $-        withClipPathRef (Ref "clip") $ mkPathText $ renderPathText $ approxFnData 1000 wave-      toHtml $ withStrokeColor "white" $-        mkLine (Num margin, Num 10) (Num margin, Num 170)-      toHtml $ withStrokeColor "white" $-        mkLine (Num margin, Num height) (Num (margin+width), Num height)-    let (circX, circY) = wave idx-    emit -< g_ [transform_ $ Lucid.translate margin height] $-      circle_ [num_ cx_ circX, num_ cy_ circY, r_ "3", fill_ "red"]-  where-    freq = 3; margin = 30; width = 260; height = 90-    wave idx = (idx*width, sin (idx*pi*2*freq) * 50)--morph_wave :: Ani ()-morph_wave = proc () -> do-    duration 5 -< ()-    morph <- signalOscillate 0 1 -< ()-    emit -< toHtml $ mkBackground "black"-    emit -< toHtml $ withStrokeColor "white" $ mkGroup-      [ translate 30 50  $ mkPathText $ renderPathText wave1-      , translate 30 130 $ mkPathText $ renderPathText wave2-      , translate 30 90  $ mkPathText $ renderPathText $ morphPath wave1 wave2 morph-      , mkLine (Num 30, Num 10) (Num 30, Num 170)-      , mkLine (Num 30, Num 90) (Num 290, Num 90) ]-  where-    freq = 3; width = 260-    wave1 = approxFnData 1000 $ \idx -> (idx*width, sin (idx*pi*2*freq) * 20)-    wave2 = approxFnData 1000 $ \idx -> (idx*width, sin (idx*pi*2*(freq*3)) * 20)--morph_wave_circle :: Ani ()-morph_wave_circle = proc t -> do-    duration 5 -< ()-    idx <- signalOscillate 0 1 -< ()-    emit -< toHtml $ withStrokeColor "white" $ mkGroup-      [ mkBackground "black"-      , translate 30 90 $ mkPathText $ renderPathText $ morphPath circle wave1 idx-      , mkLine (Num 30, Num 10) (Num 30, Num 170)-      , mkLine (Num 30, Num 90) (Num 290, Num 90) ]-  where-    freq = 5; width = 260; radius = 50-    wave1 = approxFnData 1000 $ \idx -> (idx*width, sin (idx*pi*2*freq) * 20)-    circle = approxFnData 1000 $ \idx ->-      (cos (idx*pi*2+pi/2)*radius + width/2, sin (idx*pi*2+pi/2)*radius)--progressMeters :: Ani ()-progressMeters = proc () -> do-  emit -< rect_ [width_ "100%", height_ "100%", fill_ "black"]-  annotate' (adjustSpeed 1.0 progressMeter) -< g_ [transform_ $ Lucid.translate 40 20]-  annotate' (adjustSpeed 2.0 progressMeter) -< g_ [transform_ $ Lucid.translate 140 20]-  annotate' (adjustSpeed 0.5 progressMeter) -< g_ [transform_ $ Lucid.translate 240 20]--  emit -< do-    text_ [x_ "55", y_ "150", font_size_ "20"-          , text_anchor_ "middle"-          , fill_ "white"] "1x"-    text_ [x_ "155", y_ "150", font_size_ "20"-          , text_anchor_ "middle"-          , fill_ "white"] "2x"-    text_ [x_ "255", y_ "150", font_size_ "20"-          , text_anchor_ "middle"-          , fill_ "white"] "0.5x"--progressMeter :: Ani ()-progressMeter = loop $ proc () -> do-  duration 5 -< ()-  h <- signal 0 100 -< ()-  emit -< rect_ [ width_ "30", height_ "100", stroke_ "white", stroke_width_ "2", fill_opacity_ "0" ]-  emit -< rect_ [ width_ "30", num_ height_ h, stroke_ "white", fill_ "white" ]-  returnA -< ()--highlight :: Ani ()-highlight = proc () -> do-    emit -< rect_ [width_ "100%", height_ "100%", fill_ "black"]-    emit -< do-      path_ (commonAttrs "white" ++ [d_ $ renderPathText rect1])-      path_ (commonAttrs "white" ++ [d_ $ renderPathText rect2])--      path_ (commonAttrs "white" ++ [d_ $ renderPathText rect3])-      path_ (commonAttrs "lightblue" ++ [d_ $ renderPathText rect4])-      path_ (commonAttrs "yellow" ++ [d_ $ renderPathText rect5])-      path_ (commonAttrs "red" ++ [d_ $ renderPathText rect6])--    follow-      [ mkTransition highlight1 highlight2-      , mkTransition highlight2 highlight3-      , mkTransition highlight3 highlight4-      , mkTransition highlight4 highlight5-      , mkTransition highlight5 highlight6-      , mkTransition highlight6 highlight1-      ] -< ()--  where-    mkTransition from to = pauseAtEnd 1 $ proc () -> do-      duration 1 -< ()-      s <- signalSCurve 2 0 1 -< ()-      let trans = morphPath from to s-      emit -<-        path_ (highlightAttrs "green" ++ [d_ $ renderPathText trans <> "Z"])-    mkRect x y width height =-      [ (x,y), (x+width, y), (x+width, y+height), (x,y+height) ]-    rect1 = mkRect margin margin w h-    rect2 = mkRect (320-margin-w*2) margin (w*2) h-    rect3 = mkRect margin (180-margin-h) w h-    rect4 = mkRect (320/3) (180-margin-h) w h-    rect5 = mkRect (320/3*2-w) (180-margin-h) w h-    rect6 = mkRect (320-margin-w) (180-margin-h) w h-    highlight1 = mkRect (margin-b) (margin-b) (w+2*b) (h+2*b)-    highlight2 = mkRect (320-margin-w*2-b) (margin-b) (w*2+2*b) (h+2*b)-    highlight3 = mkRect (320-margin-w-b) (180-margin-h-b) (w+2*b) (h+2*b)-    highlight4 = mkRect (320/3*2-w-b) (180-margin-h-b) (320/3+2*b) (h+2*b)-    highlight5 = mkRect (320/3-b) (180-margin-h-b) (320/3+2*b) (h+2*b)-    highlight6 = mkRect (margin-b) (180-margin-h-b) (320/3+2*b) (h+2*b)-    b = 7-    margin = 30-    w = 30-    h = 30-    commonAttrs c = [stroke_width_ "2", stroke_ c, fill_ c]-    highlightAttrs c = [stroke_width_ "2", stroke_ c, fill_opacity_ "0"]--clip_rect :: Ani ()-clip_rect = proc () -> do-  emit -< toHtml $ mkBackground "black"-  annotate' $ follow-    [ sim-      [ sim [ paintStatic prev | prev <- [max 0 (n-4) .. n-1] ]-      , sim [ runAni "black" i | i <- [n-4], i>=0 ]-      , runAni "white" n ]-    | n <- [0..15]-    ] -< g_ [transform_ $ Lucid.translate (320/2) (180/2)]-  where-    paintStatic nth = proc () ->-      emit -< toHtml $ withStrokeColor "white" $-        square (20+nth*10)-    runAni color nth = circle_clip $ proc () -> do-      duration 1 -< ()-      emit -< toHtml $ withStrokeColor color $-        square (20+nth*10)-    square side = center $ withFillOpacity 0 $ withStrokeWidth (Num 2) $-      mkRect (Num 0, Num 0) (Num side) (Num side)--circle_clip :: Ani () -> Ani ()-circle_clip sub = proc () -> do-    arc <- signal (pi*2) 0 -< ()-    let startX = pack$show$sin 0 * 1000-        startY = pack$show$cos 0 * 1000-        xPos = pack$show$sin arc * 1000-        yPos = pack$show$cos arc * 1000-        long = if arc < pi then "1" else "0"-    emit -< clipPath_ [id_ $ uniqName] $-      path_ [ d_ $ "M "<>startX<>" "<>startY<>" A 1000 1000 0 "<>long<>" 1 "-                  <>xPos<> " "<>yPos<>" L 0 0 Z"]-    annotate' sub -<-      g_ [clip_path_ $ "url(#"<>uniqName<>")"]-  where-    uniqName = "clip" -- XXX: Not very unique?---scaling :: Ani ()-scaling = adjustSpeed 2 $ syncAll-  [ proc () ->-    annotate' animation -< g_ [transform_ $ Lucid.translate x y <> " " <> Lucid.scale 0.5 0.5]-  | x <- [0,160]-  , y <- [0,90]-  | animation <- [sinewave, morph_wave, highlight, progressMeters]]---label :: String -> Ani ()-label str = proc () -> do-  emit -< text_ [x_ "0", y_ "16", font_size_ "16"-        , fill_ "white"] (toHtml str)--valentine :: Ani ()-valentine = proc () -> do-    follow-     [ all_red-     , sim [ background-           , follow [backgroundDelay, sim [delay 6.4 (fallingLove 0.09)-                                          ,delay 4.9 (fallingLove 0.12)-                                          ,delay 4.5 (fallingLove 0.88)-                                          ,delay 0.3 (fallingLove 0.43)-                                          ,delay 5.3 (fallingLove 0.93)-                                          ,delay 0.1 (fallingLove 0.80)-                                          ,delay 1.1 (fallingLove 0.39)-                                          ,delay 2.3 (fallingLove 0.21)-                                          ,delay 2.9 (fallingLove 0.77)-                                          ,delay 3.4 (fallingLove 0.46)-                                          ,delay 6.2 (fallingLove 0.19)-                                          ,delay 5.9 (fallingLove 0.53)-                                          ,delay 3.2 (fallingLove 0.14)-                                          ,delay 7.7 (fallingLove 0.99) ]]-           , follow [heart_ani, heart_disappear]-           , follow [backgroundDelay, message "", message ""-                    , message "", message "爱", message ""-                    , message "", message ""]]-     ] -<()-  where-    all_red = proc () -> do-      duration 1 -< ()-      emit -< rect_ [width_ "100%", height_ "100%", fill_ "red"]-    background = freezeAtEnd $ proc () -> do-      duration 2 -< ()-      n <- signal 0 0xFF -< ()-      let color = "#FF" ++ hex n ++ hex n-      emit -< rect_ [width_ "100%", height_ "100%", fill_ $ pack color]-    backgroundDelay = freezeAtEnd $ proc () -> do-      duration (animationDuration background-1) -< ()-      returnA -< ()-    heart_ani = repeatAni 10 $ proc () -> do-      duration 1 -< ()-      n <- signalOscillateSCurve 2 0.9 1.1 -< ()-      annotate' drawHeart -< g_ [transform_ $ Lucid.translate 160 110] . g_ [transform_ $ Lucid.scale n n <> " "]-    heart_disappear = proc () -> do-      duration 3 -< ()-      n  <- signal 0.9 10 -< ()-      annotate' drawHeart -< g_ [transform_ $ Lucid.translate 160 110] . g_ [transform_ $ Lucid.scale n n <> " "]-    white = loop $ proc () -> do-      duration 1 -< ()-      emit -< rect_ [width_ "100%", height_ "100%", fill_ "#FFFFFF"]-    fallingLove xPos = proc () -> do-      duration 2 -< ()-      n <- signal 0 1 -< ()-      o <- signalOscillate (-1) 1 -< ()-      emit -<-        g_ [transform_ $ Lucid.translate (xPos*360) (210*n)] $-          g_ [transform_ $ Lucid.rotate (45*o)] $-            text_ [font_size_ "18"-                  ,text_anchor_ "middle"-                  ,fill_ "red"] "爱"-    message txt = proc () -> do-      duration 1 -< ()-      o <- signalOscillate 0 1 -< ()-      n <- signalOscillateSCurve 2 0.9 1.1 -< ()-      emit -<-        g_ [transform_ $ Lucid.translate 160 110, num_ opacity_ o] $-        g_ [transform_ $ Lucid.scale n n ] $-          text_ [x_ "0", y_ "-12", font_size_ "24"-                    , text_anchor_ "middle"-                    , fill_ "white"] txt--    drawHeart = proc () -> do-      emit -<-        g_ [transform_ $ Lucid.translate (-170) (-260)] $-          g_ [transform_ $ Lucid.rotateAround 225 150 121 <> " " <> Lucid.scale 0.4 0.4] $-            path_ ([stroke_ "red", fill_"red", d_ dat])-    dat = "M0 200 v-200 h200      a100,100 90 0,1 0,200     a100,100 90 0,1 -200,0     z"-    hex n = if n < 0x10 then "0" ++ showHex (round n) ""-            else showHex (round n) ""--frequencies :: Ani ()-frequencies = proc () -> do-    emit -< rect_ [width_ "100%", height_ "100%", fill_ "black"]-    n <- signal 0 2 -< ()-    follow -- [drawUpWave-      [ drawLine-      , drawFirstWave-      , drawSecondWave-      , drawUpWave-      ] -< n-  where-    freqs = [11, 5, 17]; margin = 30; width = 260; height = 90-    drawLine = freezeAtEnd $ proc _ -> do-      label "drawLine" -< ()-      duration 1 -< ()-      n <- signal margin (width+margin) -< ()-      emit -< do-        line_ [ num_ x1_ margin, num_ y1_ height-              , num_ x2_ n,      num_ y2_ height-              , stroke_ "white"]-        circle_ [num_ cx_ n, num_ cy_ height, r_ "3", fill_ "red"]-    drawFirstWave = freezeAtEnd $ proc move -> do-      label "drawFirstWave" -< ()-      duration 3 -< ()-      n <- signal 0 1 -< ()-      emit -< do-        g_ [transform_ $ Lucid.translate margin height] $ renderPath $ morphPath line1 (wave1 move) n-        let circleY = sum [ sin ((1+move)*pi*2*freq) * 20 | freq <- freqs ]-        circle_ [num_ cx_ (width+margin), num_ cy_ (height+circleY*n), num_ r_ 3, fill_ "red"]-    drawSecondWave = freezeAtEnd $ proc move -> do-      label "drawSecondWave" -< ()-      duration 3 -< ()-      emit -< do-        g_ [transform_ $ Lucid.translate margin height] $ renderPath $ wave1 move-        let circleY = sum [ sin ((1+move)*pi*2*freq) * 20 | freq <- freqs ]-        circle_ [num_ cx_ (width+margin), num_ cy_ (height+circleY), num_ r_ 3, fill_ "red"]-    drawUpWave = freezeAtEnd $ proc move -> do-      label "drawUpWave" -< ()-      duration 2 -< ()-      n <- signal 0 1 -< ()-      emit -< do-        g_ [transform_ $ Lucid.scale 1 (1-0.5*n)] $ do-          g_ [transform_ $ Lucid.translate margin height] $ renderPath $ wave1 move-          let circleY = sum [ sin ((1+move)*pi*2*freq) * 20 | freq <- freqs ]-          circle_ [num_ cx_ (width+margin), num_ cy_ (height+circleY), num_ r_ 3, fill_ "red"]-    line1 = approxFnData 1000 $ \idx ->-      (idx*width, 0)-    wave1 n = approxFnData 1000 $ \idx ->-      (idx*width, sum [ sin ((idx+n)*pi*2*freq) * 20 | freq <- freqs ])---latex_basic :: Ani ()-latex_basic = proc () -> do-  duration 2 -< ()-  s <- signalOscillate 0 1 -< ()-  emit -< toHtml $ mkGroup-    [ mkBackground "black"-    , translate (320/2) (180/2) $ mkGroup-      [ withStrokeColor "white" $ withFillOpacity 0 $ withStrokeWidth (Num 0.1) text-      , withFillColor "white" $ withFillOpacity s text] ]-  where-    text = scale 4 $ center $ latexAlign-      "\\sum_{k=1}^\\infty {1 \\over k^2} = {\\pi^2 \\over 6}"--bezier :: Ani ()-bezier = adjustSpeed 0.4 $ proc () -> do-  emit -< rect_ [width_ "100%", height_ "100%", fill_ "black"]-  follow-    [ orderN [pointA, pointB]-    , morph [pointA, pointA, pointB] [pointA, pointC, pointB]-    , orderN [pointA, pointC, pointB]-    , morph [pointA, pointC, pointB, pointB] [pointA, pointC, pointD, pointB]-    , orderN [pointA, pointC, pointD, pointB]-    , morph [pointA, pointC, pointD, pointB] [pointA, pointA, pointB, pointB]] -< ()-  where-    pointA = (70,130); pointB = (270,120); pointC = (30,30); pointD = (250,50)--    morph old new = proc () -> do-      duration 0.5 -< ()-      s <- signal 0 1 -< ()-      let new' = map (\(a,b) -> between a b s) (zip old new)-      emit -< forM_ (zip new' (tail new')) $ \(a,b) -> do-        renderPath $-          approxFnData 100 $ \idx ->-            between a b idx-      emit -< mapM_ secondaryCircleAt new'-      emit -< primaryCircleAt (head new')-    orderN lst = proc () -> do-      duration 2 -< ()-      s <- signalOscillate 0 1 -< ()-      emit -< primaryCircleAt =<< orderN' (map const lst) s <* mapM_ secondaryCircleAt lst-    orderN' [a] s = do-      renderPath $ take (round $ 100*s) $ approxFnData 100 $ \idx -> a idx-      return (a s)-    orderN' lst s = do-      forM_ (zip lst (tail lst)) $ \(a,b) -> renderPath $-          approxFnData 100 $ \idx ->-            between (a s) (b s) idx-      let middlePoints = map (\(a,b) -> \idx -> between (a idx) (b idx) idx) (zip lst (tail lst))-      orderN' middlePoints s <* mapM_ secondaryCircleAt (map ($s) middlePoints)--    secondaryCircleAt (x,y) = circle_ [num_ cx_ x, num_ cy_ y, num_ r_ 3, fill_ "green"]-    primaryCircleAt (x,y) = circle_ [num_ cx_ x, num_ cy_ y, num_ r_ 3, fill_ "red"]-    between a b _ | a==b = a-    between (x1, y1) (x2, y2) idx =-      ( x1 + idx * (x2 - x1)-      , y1 + idx * (x2-x1) * (y2 - y1) / (x2 - x1))--pathSquare :: Ani ()-pathSquare = proc () -> do-    duration 2 -< ()-    s <- signalOscillate 0 1 -< ()-    emit -< rect_ [width_ "100%", height_ "100%", fill_ "black"]-    emit -< g_ [stroke_ "white"] $ toHtml (square s)-  where-    square s = S.PathTree (myPath s)-    myPath s = S.defaultSvg-      & S.pathDefinition .~ interpolatePathCommands s myPathCmds-    myPathCmds =-      [ S.MoveTo S.OriginAbsolute [V2 100 100]-      , S.LineTo S.OriginAbsolute [V2 200 150]-      , S.LineTo S.OriginRelative [V2 (-10) (-100)]-      , S.EndPath-      ]--latex_draw :: Ani ()-latex_draw = pauseAtEnd 1 $ proc () -> do-  emit -< toHtml $ mkBackground "black"-  drawText `andThen` fillText -< ()-  where-    msg = "\\sum_{k=1}^\\infty {1 \\over k^2} = {\\pi^2 \\over 6}"-    glyphs = center $ latexAlign msg-    placement = translate (320/2) (180/2) . scale 5-    fillText = proc () -> do-      duration 1 -< ()-      s <- signal 0 1 -< ()-      emit -< toHtml $ placement $-          withFillColor "white" $ withFillOpacity s $-            glyphs-    drawText = proc () -> do-      duration 2 -< ()-      s <- signal 0 1 -< ()-      emit -< toHtml $ placement $-        withStrokeColor "white" $ withFillOpacity 0 $ withStrokeWidth (Num 0.1) $-          partialSvg s glyphs---bbox :: Ani ()-bbox = proc () -> do-  emit -< toHtml $ mkBackground "black"-  duration 5 -< ()-  annotate' bbox1 -< g_ [transform_ $ Lucid.translate (320/2-50) (180/2)]-  annotate' bbox2 -< g_ [transform_ $ Lucid.translate (320/2+50) (180/2)]--bbox1 :: Ani ()-bbox1 = proc () -> do-  s <- signal 0 1 -< ()-  emit -< do-    toHtml $ mkBoundingBox $ rotate (360*s) svg-    toHtml $ withFillColor "white" $ rotate (360*s) svg-  where-    svg = scale 3 $ center $ latexAlign "\\sum_{k=1}^\\infty"--bbox2 :: Ani ()-bbox2 = proc () -> do-  s <- signalOscillate 0 1 -< ()-  emit -< do-    toHtml $ mkBoundingBox $ partialSvg s heartShape-    toHtml $ withStrokeColor "white" $ withFillOpacity 0 $ partialSvg s heartShape--mkBoundingBox :: Tree -> Tree-mkBoundingBox svg = withStrokeColor "red" $ withFillOpacity 0 $-    mkRect (S.Num x, S.Num y) (S.Num w) (S.Num h)-  where-    (x, y, w, h) = boundingBox svg--heartShape =-    center $ rotateAroundCenter 225 $ mkPathString-      "M0.0,40.0 v-40.0 h40.0\-      \a20.0 20.0 90.0 0 1 0.0,40.0\-      \a20.0 20.0 90.0 0 1 -40.0,0.0 Z"--latex_color :: Ani ()-latex_color = proc () -> do-    duration 0.1 -< ()-    emit -< toHtml $ mkBackground "black"-    emit -< toHtml $ translate (320/2) (180/2) $ withStrokeWidth (Num 0.2) $-      withStrokeColor "white" $-      withSubglyphs [0] (withFillColor "blue") $-      withSubglyphs [1] (withFillColor "yellow") $-      withSubglyphs [2] (withFillColor "green") $-      withSubglyphs [3] (withFillColor "red") $-      withSubglyphs [4] (withFillColor "darkslategrey") $-      svg-  where-    svg = scale 10 $ center $ latex "\\LaTeX"--}--{--morph_wave :: Animation-morph_wave = autoReverse $ mkAnimation 2.5 $ do-    morph <- getSignal signalLinear-    emit $ mkBackground "black"-    emit $ withStrokeColor "white" $ translate (-320/2) (-180/2) $ mkGroup-      [ translate 30 50  $ mkLinePath wave1-      , translate 30 130 $ mkLinePath wave2-      , translate 30 90  $ mkLinePath $ morphPath wave1 wave2 morph-      , mkLine (Num 30, Num 10) (Num 30, Num 170)-      , mkLine (Num 30, Num 90) (Num 290, Num 90) ]-  where-    freq = 3; width = 260-    wave1 = approxFnData 100 $ \idx -> (idx*width, sin (idx*pi*2*freq) * 20)-    wave2 = approxFnData 100 $ \idx -> (idx*width, sin (idx*pi*2*(freq*3)) * 20)--morph_wave_circle :: Animation-morph_wave_circle = autoReverse $ mkAnimation 2.5 $ do-    idx <- getSignal signalLinear-    emit $ mkBackground "black"-    emit $ withStrokeColor "white" $ translate (-320/2) (-180/2) $ mkGroup-      [ translate 30 90 $ mkLinePath $ morphPath circle wave1 idx-      , mkLine (Num 30, Num 10) (Num 30, Num 170)-      , mkLine (Num 30, Num 90) (Num 290, Num 90) ]-  where-    freq = 5; width = 260; radius = 50-    wave1 = approxFnData 100 $ \idx -> (idx*width, sin (idx*pi*2*freq) * 20)-    circle = approxFnData 100 $ \idx ->-      (cos (idx*pi*2+pi/2)*radius + width/2, sin (idx*pi*2+pi/2)*radius)--progressMeters :: Animation-progressMeters =-    bg `sim` labels `sim`-    mapA (translate (-100) 0)  (adjustSpeed 1.0 progressMeter) `simLoop`-    mapA (translate 0 0) (adjustSpeed 2.0 progressMeter) `simLoop`-    mapA (translate 100 0) (adjustSpeed 0.5 progressMeter)-  where-    bg = mkAnimation 0 $ emit $ mkBackground "black"-    labels = mkAnimation 0 $ emit $ translate 0 70 $ withFillColor "white" $ mkGroup-      [ translate (-100) 0 $ scale 2 $ center $ latex "1x"-      , translate 0 0      $ scale 2 $ center $ latex "2x"-      , translate 100 0    $ scale 2 $ center $ latex "0.5x"-      ]--progressMeter :: Animation-progressMeter = mkAnimation 3 $ do-  h <- getSignal $ signalFromTo 0 100 signalLinear-  emit $ center $ mkGroup-    [ withStrokeColor "white" $ withStrokeWidth (Num 2) $ withFillOpacity 0 $-        mkRect (Num 30) (Num 100)-    , withFillColor "white" $-        mkRect (Num 30) (Num h) ]---diaSize :: Animation-diaSize = mkAnimation 0.1 $ do-    emit $ mkBackground "white"-    emit $ translate (-320/2) (-180/2) dSvg-  where-    dSvg = renderDiagram $ withEnvelope (D.rect 320 180 :: SvgDiagram) $-      D.scale 3 $-      D.translate (V2 0 (-30)) $-      D.rotate (90 @@ deg) $-      D.lwO 0.1 $ D.strokePath (D.getTurtlePath (D.tree3 4))--wavyTree :: Animation-wavyTree = mkAnimation 1 $ do-    s <- oscillate $ getSignal $ signalFromTo 1 2 signalLinear-    emit $ mkBackground "white"-    emit $ translate (-320/2) (-180/2) (dSvg s)-  where-    dSvg s = renderDiagram $ withEnvelope (D.rect 320 180 :: SvgDiagram) $-      D.scale 3 $-      D.translate (V2 0 (-30)) $-      D.rotate (90 @@ deg) $-      D.lwO 0.1 $ D.strokePath (D.getTurtlePath (tree s))-    gens = 4-    tree s =-      D.lSystem gens (s/16 @@ turn) (D.symbols "F") rules-    rules = M.fromList [D.rule 'F' "FF-[->F+F+>F]+[+>F->F->F]"]--}

src/Reanimate/PolyShape.hs view

@@ -11,6 +11,7 @@   , plLineCommands      -- :: PolyShape -> [LineCommand]    , plLength            -- :: PolyShape -> Double+  , plArea   , plCurves            -- :: PolyShape -> [CubicBezier Double]   , isInsideOf          -- :: PolyShape -> PolyShape -> Bool @@ -24,19 +25,23 @@   , plGroupShapes       -- :: [PolyShape] -> [PolyShapeWithHoles]   , mergePolyShapeHoles -- :: PolyShapeWithHoles -> PolyShape   , polyShapeTolerance+  , plPartial, plPartialGroup, plPartial'+  , plGroupTouching   ) where  import           Chiphunk.Low import           Control.Lens        ((&), (.~))-import           Data.List           (nub, partition, sortBy)+import           Data.List           (nub, partition, sortBy, minimumBy) import           Data.Ord import           Debug.Trace import           Geom2D.CubicBezier  (ClosedPath (..), CubicBezier (..), DPoint,                                       FillRule (..), PathJoin (..), Point (..),-                                      arcLength, bezierIntersection,+                                      arcLength, arcLengthParam,+                                      bezierIntersection, bezierSubsegment,                                       closedPathCurves, closest, colinear,-                                      curvesToClosed, evalBezier, splitBezier,-                                      union, vectorDistance)+                                      curvesToClosed, curvesToClosed,+                                      evalBezier, interpolateVector, reorient,+                                      splitBezier, union, vectorDistance) import           Graphics.SvgTree    (PathCommand (..), RPoint, Tree (..),                                       defaultSvg, pathDefinition) import           Linear.V2@@ -72,6 +77,11 @@   where     cubicLength c = arcLength c 1 polyShapeTolerance +plArea :: PolyShape -> Double+plArea pl = areaForPoly (map toVect $ plPolygonify polyShapeTolerance pl) 0+  where+    toVect (Point x y) = Vect x y+ -- 1/10th of a pixel if rendered at 2560x1440 polyShapeTolerance :: Double polyShapeTolerance = screenWidth/25600@@ -81,6 +91,72 @@   where     worker (V2 x y) = (Point x y, JoinLine) +plPartial :: Double -> PolyShape -> PolyShape+plPartial delta pl | delta >= 1 = pl+plPartial delta pl = PolyShape $ curvesToClosed (lineOut ++ [joinB] ++ lineIn)+  where+    lineOutEnd = cubicC3 (last lineOut)+    lineInBegin = cubicC0 (head lineIn)+    joinB = CubicBezier lineOutEnd lineOutEnd lineOutEnd lineInBegin+    lineOut = takeLen (len*delta/2) $ plCurves pl+    lineIn =+      reverse $ map reorient $+      takeLen (len*delta/2) $ reverse $ map reorient $ plCurves pl+    len = plLength pl+    takeLen _ [] = []+    takeLen l (c:cs) =+      let cLen = arcLength c 1 polyShapeTolerance in+      if l < cLen+        then [bezierSubsegment c 0 (arcLengthParam c l polyShapeTolerance)]+        else c : takeLen (l-cLen) cs++plPartialGroup :: Double -> [PolyShape] -> [PolyShape]+plPartialGroup _delta [] = []+plPartialGroup delta pls =+    [ plPartial (delta*(maxLen/plLength pl)) pl | pl <- pls ]+  where+    maxLen = maximum $ map plLength pls++plPartial' :: Double -> ([DPoint], PolyShape) -> PolyShape+plPartial' delta (seen', PolyShape (ClosedPath lst)) =+  case lst of+    []                         -> PolyShape (ClosedPath [])+    (startP, startJoin) : rest -> PolyShape $ ClosedPath $+      (startP, startJoin) : worker startP rest+  where+    seen = filter (`elem` plPoints) seen'+    closestSeen pt = minimumBy (comparing (vectorDistance pt)) seen+    worker _ [] = []+    worker _ ((newP, newJoin) : rest)+      | newP `elem` seen = (newP, newJoin) : worker newP rest+      | otherwise =+        let newAt = interpolateVector (closestSeen newP) newP delta+        in (newAt, newJoin) : worker newAt rest+    plPoints =+      [ p | (p,_) <- lst ]++plGroupTouching :: [PolyShape] -> [[([DPoint],PolyShape)]]+plGroupTouching [] = []+plGroupTouching pls = worker [polyShapeOrigin (head pls)] pls+  where+    worker _ [] = []+    worker seen shapes =+      let (touching, notTouching) = partition (isTouching seen) shapes+      in if null touching+        then plGroupTouching notTouching+        else map ((,)seen) (map (changeOrigin seen) touching) :+             worker (seen ++ concatMap plPoints touching) notTouching+    isTouching pts = any (`elem` pts) . plPoints+    changeOrigin seen (PolyShape (ClosedPath segments)) = PolyShape $ ClosedPath $ helper [] segments+      where+        helper acc [] = reverse acc+        helper acc lst@((startP,startJ):rest)+          | startP `elem` seen = lst ++ reverse acc+          | otherwise = helper ((startP, startJ):acc) rest+    plPoints :: PolyShape -> [Point Double]+    plPoints (PolyShape (ClosedPath lst)) =+      [ p | (p,_) <- lst ]+ -- | Deconstruct a polyshape into non-intersecting, convex polygons. plDecompose :: [PolyShape] -> [[RPoint]] plDecompose = plDecompose' 0.001@@ -102,7 +178,7 @@     toVect (Point x y) = Vect x y     fromVect (Vect x y) = V2 x y     adjust [] = []-    adjust x = if head x == last x then adjust (init x) else x+    adjust x  = if head x == last x then adjust (init x) else x  plPolygonify :: Double -> PolyShape -> [Point Double] plPolygonify tol shape =

src/Reanimate/Scene.hs view

@@ -5,8 +5,9 @@ import           Control.Monad.ST import           Data.List import           Data.Ord+import           Data.STRef import           Reanimate.Animation-import           Reanimate.Svg.Constructors+import           Reanimate.Signal  type ZIndex = Int @@ -47,17 +48,17 @@ instance MonadFix (Scene s) where   mfix fn = M $ \t -> mfix (\v -> let (a,_s,_p,_tl) = v in unM (fn a) t) ---data Frame a = Frame {unFrame :: Duration -> Time -> State ([Tree] -> [Tree]) a}+liftST :: ST s a -> Scene s a+liftST action = M $ \_ -> action >>= \a -> return (a, 0, 0, emptyTimeline)+ sceneAnimation :: (forall s. Scene s a) -> Animation-sceneAnimation action = Animation (max s p) $ \t ->-  mkGroup $ map snd $ sortBy (comparing fst)-    [ (z, frameGen (t-startT))-    | (startT, Animation dur frameGen, z) <- tl-    , t >= startT-    , t < startT+dur+sceneAnimation action = foldl' parDropA (pause 0) $+  map snd $ sortBy (comparing fst)+    [ (z, pause startT `seqA` a)+    | (startT, a, z) <- tl     ]   where-    (_, s, p, tl) = runST (unM action 0)+    (_, _, _, tl) = runST (unM action 0)  fork :: Scene s a -> Scene s a fork (M action) = M $ \t -> do@@ -101,3 +102,40 @@   s   t2 <- queryNow   return (t2-t1)++data Object s = Object (STRef s (Maybe Timeline))++newObject :: Scene s (Object s)+newObject = Object <$> liftST (newSTRef Nothing)++stretchTimeline :: Timeline -> Scene s ()+stretchTimeline = mapM_ worker+  where+    worker (t, a, z) = M $ \tNow -> -- 3+      let tNew = t + duration a -- 1+1=2+          dNew = tNow - tNew -- 3-2=1+          aNew = setDuration dNew (signalA (constantS 1) a) in+      if (dNew > 0)+        then return ((), 0, 0, [(tNew, aNew, z)])+        else return ((), 0, 0, emptyTimeline)++dropObject :: Object s -> Scene s ()+dropObject (Object ref) = do+  mbTimeline <- liftST $ readSTRef ref+  case mbTimeline of+    Nothing -> return ()+    Just timeline -> do+      liftST $ writeSTRef ref Nothing+      stretchTimeline timeline++listen :: Scene s a -> Scene s (a, Timeline)+listen scene = M $ \t -> do+  (a, s, p, tl) <- unM scene t+  return ((a,tl), s, p, tl)++withObject :: Object s -> Scene s a -> Scene s a+withObject obj@(Object ref) scene = do+  dropObject obj+  (a, tl) <- listen scene+  liftST $ writeSTRef ref (Just tl)+  return a