Flags
The same fire four ways. They stack.
Use it
One script, then a canvas. Height is the size; a wider canvas gives a front more ground to burn.
<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/ignis@v0.2.0/dist/ignis.min.js"></script>
<canvas class="fire" width="300" height="200" data-fire-body="campfire"></canvas>| attribute | value | what it does |
|---|---|---|
| data-fire-body | name | any name above |
| data-fire-form | fire · candle · torch · match · forge · front | the shape of a fire: a campfire, a teardrop on a wick, a flame on a stick, a match, a forge, a line across the canvas. Fireworks take shell · willow · wheel; lava takes lake · flow · fountain |
| data-fire-height | number | flame height as a fraction of the canvas height (0.5 for a campfire, 0.42 for a front) |
| data-fire-width | number | half the fire's foot as a fraction of the height; a front always spans the canvas (0.15) |
| data-fire-wind | number | how far the flames, embers and smoke lean; positive is to the right (0.1, 0.5 for a front) |
| data-fire-embers / -smoke / -flames | number | how many of each, as a fraction of the flame dots (0.12 / 0.35 / 1) |
| data-fire-n | number | flame dots at a 64px height, scaled up with size (700) |
| data-fire-tempo | number | how fast it all happens (1) |
| data-fire-logs | 0 | a campfire without the logs |
| data-fire-slots / -period / -reach | number | fireworks: shells in the air at once (4), seconds between them (3.4), burst size as a fraction of the height (0.26) |
| data-fire-seams / -heat / -speed | number | lava: how many seams (1), how open they are (1), how fast a flow runs (0.06) |
| data-fire-ink / -lite / -ground | 1 | monochrome dots that follow the page theme · half the dots · a night behind, lit by the fire |
| data-fire-glow | 0 | no soft glow, just the dots on a clear canvas |