- var cs = 0.43 // curve strength [0, 1]
- var ww = 30; // wave width (0, Inf)
- var wh = 15; // wave height/depth (0, Inf)
- var sw = 1; // stroke width
svg(viewBox='0 0 200 200')
  defs
    - var pathD = 'M0,'+(0.5*wh)+'C'+(cs*ww)+','+(0.5*wh)+' '+((1-cs)*ww)+','+(1.5*wh)+' '+ww+','+(1.5*wh)+'C'+((1+cs)*ww)+','+(1.5*wh)+' '+((2-cs)*ww)+','+(0.5*wh)+' '+(2*ww)+','+(0.5*wh)
    pattern#patt1(x=0,y=0,width=2*ww,height=4*wh,patternUnits='userSpaceOnUse')
      path(d=pathD,stroke='#f00',stroke-width=sw,fill='transparent')
    pattern#patt2(x=ww,y=wh,width=2*ww,height=4*wh,patternUnits='userSpaceOnUse')
      path(d=pathD,stroke='#00f',stroke-width=sw,fill='transparent')
    pattern#patt3(x=0,y=2*wh,width=2*ww,height=4*wh,patternUnits='userSpaceOnUse')
      path(d=pathD,stroke='#0f0',stroke-width=sw,fill='transparent')
    pattern#patt4(x=ww,y=3*wh,width=2*ww,height=4*wh,patternUnits='userSpaceOnUse')
      path(d=pathD,stroke='#fc0',stroke-width=sw,fill='transparent')
    linearGradient#grad1(x1=0,x2=30/200,spreadMethod='repeat')
      stop(offset='0%',stop-color='white',stop-opacity=1.0)
      stop(offset='75%',stop-color='white',stop-opacity=0.0)
    linearGradient#grad2(x1=0.5,x2=0.5+(30/200),spreadMethod='repeat')
      stop(offset='0%',stop-color='white',stop-opacity=1.0)
      stop(offset='75%',stop-color='white',stop-opacity=0.0)
  mask#mask1
    rect(fill='url(#grad1)',width=400,height=200)
  mask#mask2
    rect(fill='url(#grad2)',width=400,height=200)
  rect#squiggle1(mask='url(#mask1)',fill='url(#patt1)',width=200,height=200)
  rect#squiggle2(mask='url(#mask2)',fill='url(#patt2)',width=200,height=200)
  rect#squiggle3(mask='url(#mask1)',fill='url(#patt3)',width=200,height=200)
  rect#squiggle4(mask='url(#mask2)',fill='url(#patt4)',width=200,height=200)

html, body {
  width: 100%;
  height: 100%;
}
body {
  background: #131518;
}
#patt1 path {
  stroke: #ff509e; // magenta
}
#patt2 path {
  stroke: #95d13c; // lime
}
#patt3 path {
  stroke: #00b6cb; // aqua
}
#patt4 path {
  stroke: #9753e1; // purple
}
$duration: 1.90476s;
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
#mask1 rect {
  animation: pulse $duration infinite;
  animation-timing-function: $easeInOutSine;
}
#mask2 rect {
  x: 10;
  animation: pulse $duration infinite ($duration/4);
  animation-timing-function: $easeInOutSine;
}
#squiggle1, #squiggle2, #squiggle3, #squiggle4 {
  background-blend-mode: multiply;
}
@keyframes pulse {
  0% { x: 10; } // 10 + (0 * ww)
  50% { x: -20; } // 10 + (-1 * ww)
  100% { x: -50; } // 10 + (-2 * ww)
}