Flags
The same oak four ways. They stack.
Use it
One script, then a canvas. Height is the size; a wider canvas gives a field or a wood more room.
<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/tendril@v0.1.0/dist/tendril.min.js"></script>
<canvas class="plant" width="300" height="200" data-plant-body="oak"></canvas>| attribute | value | what it does |
|---|---|---|
| data-plant-body | name | any name above |
| data-plant-form | clump · field · gum · willow · wood · grass · kelp | a clump of ferns; a field of sunflowers; which tree, or a wood of them; grass or kelp instead of wheat |
| data-plant-wind | number | how hard it blows (1); every mode leans on the same gust field, so plants on a page move together |
| data-plant-period / -puff / -seeds | number | dandelion: seconds between puffs (9), the fraction of seeds that go (0.6), seeds at a 64px height (90) |
| data-plant-cycle / -count | number | fern: seconds to unfurl and curl back (16), fronds in a clump (5); trees in a wood |
| data-plant-day | number | seconds for a sunflower to follow the sun across and back (30) |
| data-plant-depth | number | how many times a tree forks (5, a wood 4) |
| data-plant-n | number | stems in a field at a 64px height (wheat 48, grass 90, kelp 14) |
| data-plant-tempo | number | how fast it all happens (1) |
| data-plant-ink / -lite / -ground | 1 | monochrome dots that follow the page theme · half the dots · a dusk behind |
| data-plant-glow | 0 | no soft glow, just the dots on a clear canvas |