Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Playing with Elm and SVG.
import Svg exposing (..)
import Svg.Attributes exposing (..)
import List
cycles = 2
yScale = 50
lineThickness = 20
i = List.range 0 (cycles * 360)
-- make the svg viewBox based on [0, 0, cycles, yScale+lineThickness]
computedViewBox = String.join " " (List.map toString [0, 0, cycles * 360, 2 * (yScale + lineThickness)])
-- Scale the sin curve by the given yScale and accounting for the stroke
yCoord transform theta = yScale + lineThickness + yScale * (transform (degrees (toFloat theta)))
-- Generate "x,y" as a string for use with svg
coordinate transform theta = String.join "," [toString theta, toString (yCoord transform theta)]
polylinePoints transform = String.join " " (List.map (\theta -> coordinate transform theta) i)
main =
svg [ version "1.1", x "0", y "0", viewBox computedViewBox ]
[
-- A trick. Render 'cos' first (below) at full opacity
polyline [ fill "none", strokeLinecap "square", strokeWidth (toString lineThickness), stroke "#00d974",
points (polylinePoints cos)] [],
polyline [ fill "none", strokeLinecap "square", strokeWidth (toString lineThickness), stroke "#0074d988",
points (polylinePoints sin)] [],
-- Now render 'cos' on top of 'sin' with reduced opacity for an little blend effect?
polyline [ fill "none", strokeLinecap "square", strokeWidth (toString lineThickness), stroke "#00d97450",
points (polylinePoints cos)] []
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.