I have played around with using SVG effects as they are stunningly powerful, but I wouldn't recommend deploying them for too much: even though apparently Firefox does some level of GPU acceleration for SVG filter graphs, in practice a lot of very simple looking graphs I've tried constructing seem to fall back to CPU even with webrender.all turned on. This is kind of a shame because feTurbulence in particular is pretty useful. You could use it for a lot of things. One case I wanted to use it for was to make a gradient grainier, to reduce the obvious banding. Unfortunately, I found that it pegs all of the CPU cores on my laptop immediately :)
The technique is cool to know. SVG has many non-obvious abilities.
But the effect, due to the way it's produced, is more like a hot air distortion, only without the faint shimmering. It's completely raster in nature, AFAICT, and is likely implemented as a GPU shader (which is good from the performance POV).
An effect more like an unsteady human hand could likely be achieved by oscillating nodes in the direction perpendicular to the curvature, and adding some random jitter to the control points.
I had to re-read the second paragraph to make sure you weren't saying that heat haze is a GPU shader effect. Using the phrase "in nature" really didn't help me!
Yep, I immediately thought of Squigglevision and Home Movies (https://www.youtube.com/watch?v=CJcBL9JPfZw). Did it use the same algorithm as mentioned in the article, a noisy displacement map?
I have played around with using SVG effects as they are stunningly powerful, but I wouldn't recommend deploying them for too much: even though apparently Firefox does some level of GPU acceleration for SVG filter graphs, in practice a lot of very simple looking graphs I've tried constructing seem to fall back to CPU even with webrender.all turned on. This is kind of a shame because feTurbulence in particular is pretty useful. You could use it for a lot of things. One case I wanted to use it for was to make a gradient grainier, to reduce the obvious banding. Unfortunately, I found that it pegs all of the CPU cores on my laptop immediately :)
Charming wiggling! Similar to Wobblepaint (drawing tool made by the creator of PICO-8).
https://www.lexaloffle.com/bbs/?tid=40058
Really cool! Reminded me of this post [1] from ~2 weeks ago ago. Could it be combined with your approach?
[1] https://news.ycombinator.com/item?id=44498133
I had hand-done mine on https://kurnell.ai - its really cool to see that I could have computationally done this instead :)
I used rive.app to encode the frames and create a state machine to move between the states. Perhaps I can simplify this even more.
The technique is cool to know. SVG has many non-obvious abilities.
But the effect, due to the way it's produced, is more like a hot air distortion, only without the faint shimmering. It's completely raster in nature, AFAICT, and is likely implemented as a GPU shader (which is good from the performance POV).
An effect more like an unsteady human hand could likely be achieved by oscillating nodes in the direction perpendicular to the curvature, and adding some random jitter to the control points.
I had to re-read the second paragraph to make sure you weren't saying that heat haze is a GPU shader effect. Using the phrase "in nature" really didn't help me!
From "SVGs that feel like GIFs" https://news.ycombinator.com/item?id=44498133#44501917 :
> /? svg animation: https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu...
Wonderful, svg has so manu unexplored capabilities that feels like a crime using it mostly for icons on the web
Dr. Katz.
Sweet baby Jesus, please make it rain potatoes!
Home Movies!
Kids these days, not knowing Dr. Katz...
Pretty site and good write up but my phone turned to molten lava viewing it!
See also: https://en.wikipedia.org/wiki/Squigglevision
Yep, I immediately thought of Squigglevision and Home Movies (https://www.youtube.com/watch?v=CJcBL9JPfZw). Did it use the same algorithm as mentioned in the article, a noisy displacement map?