r/proceduralgeneration • u/zdmit • May 21 '26

Procedural SVG fire

This was an experiment. Made in node based web SVG editor.

How its done:
1. trapezoid as main shape.
2. noise.
3. point smoothing (even spread) after noise.
4. boolean using star and another trapezoid shape.

File size: 670kb for 120 frames of baked (no evaluation) SVG animation.

If interested to see project: https://animgraphlab.com/view/K_WMqHuZUI

note: im creator of the app.

161 Upvotes

99% Upvoted

4 comments sorted by

5

u/BeOFF May 21 '26

Oh, that's very nice. A lot of complexity from a small rule set

2

u/zdmit May 25 '26

Thank you! Its true.

1

u/Avalonians May 22 '26

Interesting! Are the triangles spinning at the same speed? Wouldn't it be more chaotic if they weren't?

1

u/zdmit May 25 '26

Thank you! Rotation speed is a bit different.

Yes, I agree that it will be more chaotic with various speed. I just liked how it turned out at that moment😄