I love flow fields but canvas ones get blurry when someone zooms the page or exports to print. I wanted the same look as pure SVG paths so it stays vector-crisp forever.
My naive prompt drew thousands of tiny <line> segments and the DOM died. The fix was telling the model to integrate each streamline into ONE <path> with many points, cap the path count, and animate with stroke-dashoffset instead of redrawing. I also insisted on a seeded RNG so a nice field could be reproduced.
Any tricks for varying stroke width along a single path without splitting it into segments?
Generate a single inline SVG (plus a small inline <script>) that renders an animated flow field as vector streamlines. Constraints:
- Seeded PRNG (mulberry32 from a `seed` const) drives everything; no Math.random.
- Vector field: angle at (x,y) = fbm-ish value noise * TAU; implement lightweight value noise in JS.
- Trace exactly {LINES} streamlines (default 240), each integrated with RK2 steps for up to 200 points, and emit each as ONE `<path>` with a smooth `d` (use Catmull-Rom to Bezier). BANNED: one <line> per segment.
- Color each path by its starting angle via HSL; thin strokes (0.6-1.4px) with `stroke-linecap='round'`.
- Animate a 'drawing on' effect using stroke-dasharray/stroke-dashoffset with staggered delays, respecting prefers-reduced-motion (show final static state).
- viewBox 0 0 1000 1000, no external libs.
Report the total path count and confirm it stays under 300 nodes so the DOM stays light.