A shape mask becomes a distance field, and a shader runs animated reflections through it, so any vector mark can be cast in chrome.
The mask is turned into a depth map on the CPU by relaxing a Laplace equation inside the shape, so pixels deep in the shape and pixels near its edge get different heights. The fragment shader uses that height, a diagonal gradient and animated noise to compute a stripe coordinate for each colour channel, then maps it through a banding function that jumps between the light and dark colours. Offsetting the red and blue stripe coordinates by different amounts produces the chromatic edge.
// Banded light/dark ramp: each edge is a smoothstep, the last one is a soft gradient.
float mG(float hi, float lo, float t, float sh, float cv) {
sh *= (2.0 - u_sharp);
float ci = smoothstep(0.15, 0.85, cv), r = lo;
float e1 = 0.08 / u_scale;
r = mix(r, hi, smoothstep(0.0, sh * 1.5, t));
r = mix(r, lo, smoothstep(e1 - sh, e1 + sh, t));
float e2 = e1 + 0.05 / u_scale * (1.0 - ci * 0.35);
r = mix(r, hi, smoothstep(e2 - sh, e2 + sh, t));
float e3 = e2 + 0.025 / u_scale * (1.0 - ci * 0.45);
r = mix(r, lo, smoothstep(e3 - sh, e3 + sh, t));
float e4 = e1 + 0.1 / u_scale;
r = mix(r, hi, smoothstep(e4 - sh, e4 + sh, t));
float gT = clamp((t - e4) / (1.0 - e4), 0.0, 1.0);
return mix(r, mix(hi, lo, smoothstep(0.0, 1.0, gT)), smoothstep(e4 - sh * 0.5, e4 + sh * 0.5, t));
}
// Liquid height: the depth map plus noise-driven turbulence, strongest mid-depth.
float lD = dp + (1.0 - dp) * u_liquid * tb;
float fl = ag.x + sl;
fl -= tb * sl * 1.8 * eI; // flow field bends with the turbulence
fl *= u_scale;
fl -= an; // time scrolls the stripes
// One stripe coordinate per channel; red and blue are offset for the colour split.
float rC = mG(hi.r, lo.r, fract(fl + rO), sf + 0.018, cv);
float gC = mG(hi.g, lo.g, fract(fl), sf + 0.008, cv);
float bC = mG(hi.b, lo.b, fract(fl - bO), sf + 0.008, cv);