Playing with Elm and SVG.

sincos.elm

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)] []
    ]