3 ms·
The "ApeFest" website[1] (yeah, the one that burnt attendees' retinas with UV) has some dynamic noise going on, and I had a look at the CSS. They're actually us
by Retr0id 3y ago
The "ApeFest" website[1] (yeah, the one that burnt attendees' retinas with UV) has some dynamic noise going on, and I had a look at the CSS. They're actually using a tiled PNG overlay[2], which gets wobbled around "randomly" using CSS animations (edit: actually, looks like they move it with JS). Pretty low-tech, but it works.
[1] https://apefest.com/ https://apefest.com/
[2] https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...
- cosmotic 3y agoThe apefest effect uses a lot of CPU and thus energy.
- Retr0id 3y agoIt does if you redraw every frame, but if you disabled the animation and made it static I have a feeling it could beat the SVG method (although it probably wouldn't look as good). It also has the advantage of looking mostly the same in every browser - the comments here report inconsistencies with the SVG method.
- spartanatreyu 3y agoI experimented with an effect where a single frame of noise was generated, then reused throughout an animation: https://codepen.io/spartanatreyu/pen/qBKBgPN?editors=1100 https://codepen.io/spartanatreyu/pen/qBKBgPN?editors=1100 I was initially trying to replicate a visual effect from a music video but it morphed into this. I kind of like the effect