https://github.com/megaemce/bonfire
Come sit next to fire 🔥
https://github.com/megaemce/bonfire
css css-animations css-art css-tricks
Last synced: 8 months ago
JSON representation
Come sit next to fire 🔥
- Host: GitHub
- URL: https://github.com/megaemce/bonfire
- Owner: Megaemce
- Created: 2024-04-01T11:48:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-17T02:08:55.000Z (about 2 years ago)
- Last Synced: 2025-09-02T03:44:20.348Z (9 months ago)
- Topics: css, css-animations, css-art, css-tricks
- Language: CSS
- Homepage: https://megaemce.github.io/Bonfire
- Size: 4.2 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
What would you create by blending 17 layers of gradients and [Perlin noises](https://en.wikipedia.org/wiki/Perlin_noise) with [background-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode), [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) and 4 animations?
- You'd craft a render-intensive CSS-only bonfire.
Sit down and enjoy the fire.
### Limitation
This solution will not properly on Safari and most of the mobile browsers due to [mix-blend-mode being not supported on SVG elements](https://caniuse.com/mdn-css_properties_mix-blend-mode_svg_elements).