Interactive Clifford Attractor — CSS variable colors

define ViewBox(0, 0, 600, 480);
// Interactive Clifford Attractor — CSS variable colors

let background = PathLayer('background') ${
  fill: #250e25;
};
background.apply {
  rect(0, 0, 600, 480);
}

let a = -1.4;
let b = 1.625;
let c = 1.015;
let d = 0.675;

let scale = 140;
let cx = 260;
let cy = 225;

let x = 0.1;
let y = 0.1;

// Reactive colors — change in the playground's CSS variable panel
let earlyColor = Color(CSSVar('--early-color', #ae1eaa88));
let lateColor = Color(CSSVar('--late-color', #15f924aa));

let baseStyles = ${
  stroke-linecap: round;
  fill: none;
};
let colors = Color.palette(earlyColor, lateColor, 6);
let layers = colors.map {|strokeColor, i|
  return PathLayer(`color-${i}`) ${ 
      stroke: strokeColor; 
      stroke-width: calc(4 / pow(2, i));
    } << baseStyles;
};

layers[0] << ${ filter: blur(4px); };
layers[1] << ${ filter: blur(2px); };
layers[2] << ${ filter: blur(1px); };

let g = GroupLayer('all') ${};
for ([colorLayer, index] in layers) {
  for (i in 1..32000) {
    let nx = calc(sin(a * y) + c * cos(a * x));
    let ny = calc(sin(b * x) + d * cos(b * y));
    let lastPoint = Point(x, y);
    let nextPoint = Point(nx, ny);
    let angle = lastPoint.angleTo(nextPoint);
    let distance = lastPoint.distanceTo(nextPoint);
    x = nx;
    y = ny;
    colorLayer.apply {
      M calc(cx + nx * scale) calc(cy + ny * scale)
      // polarLine(angle, distance);
      polarLine(angle, calc(16 / pow(2, index)));
      // l calc(16 / pow(2, index)) calc(32 / pow(2, index))
    }
  }

  g.append(colorLayer);
}