6 ms·
Simulating hand-drawn motion with SVG filters
- teeray 1y agoSee also: https://en.wikipedia.org/wiki/Squigglevision https://en.wikipedia.org/wiki/Squigglevision
- wonger_ 1y agoYep, I immediately thought of Squigglevision and Home Movies (https://www.youtube.com/watch?v=CJcBL9JPfZw https://www.youtube.com/watch?v=CJcBL9JPfZw). Did it use the same algorithm as mentioned in the article, a noisy displacement map?
- WorldMaker 1y agoThe first few Squigglevision shows were notorious for being cheaply hand drawn in their production so they probably got that effect the original way (using a base template and redrawing it by hand a lot without too much concern for continuity/cleaning between frames). I'd imagine in the age of Bob's Burgers (and 15 seasons of such) they are probably using digital drawing tools and emulating it, maybe with filters, when they feel they need it, but also the "squiggle" is nowhere near as pronounced as it was in the Dr. Katz and/or Home Movies days.
- nine_k 1y agoThe 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.
- Hasnep 1y agoI 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!
- socki 1y agoDr. Katz.
- netsharc 1y agoKids these days, not knowing Dr. Katz...
- andrewmcwatters 1y agoHome Movies!
- im_down_w_otp 1y agoSweet baby Jesus, please make it rain potatoes!
- MarkusQ 1y agoCame here to say: Squigglevision!
- gabriben 1y agoReally 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 https://news.ycombinator.com/item?id=44498133
- tubs 1y agoPretty site and good write up but my phone turned to molten lava viewing it!
- hollowturtle 1y agoWonderful, svg has so manu unexplored capabilities that feels like a crime using it mostly for icons on the web
- memalign 1y agoCharming wiggling! Similar to Wobblepaint (drawing tool made by the creator of PICO-8). https://www.lexaloffle.com/bbs/?tid=40058 https://www.lexaloffle.com/bbs/?tid=40058
- hamish-b 1y agoI had hand-done mine on https://kurnell.ai 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.
- jchw 1y agoI 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 :)
- nicoburns 1y agoWebRender unfortunately doesn't handle vector content at all, so all vector content in Firefox is rendered using CPU (CPU part of Skia). This is not true of other browsers.
- jchw 1y agoI think SVG filters are actually all raster effects, which is why WebRender supposedly can accelerate SVG filters... though if it does, I seem to be hitting cases that force it to fall back. Maybe it doesn't like SMIL animations.
- dgrcode 1y agoIt's a shame that modern browsers don't optimize SVG to be processed in the GPU. It has plenty of potential, not only feTurbulence, but many other effects as well. And being able to use SVG masks on standard HTML elements would also open a bunch of creative opportunities. Unfortunately, as you say, it's very easy to freeze a GPU if you start doing more complex SVGs.
- westurner 1y agoFrom "SVGs that feel like GIFs" https://news.ycombinator.com/item?id=44498133#44501917 https://news.ycombinator.com/item?id=44498133#44501917 : > /? svg animation: https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=svg%20animation&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu...
- rckt 1y agoAmazing. When I was experimenting with this, I was recreating the paths to get the wiggly effect. And it obviously was resource intensive. This feels much faster.
- Daub 1y agoFor a fun example of what the author describes as ‘boil’ in an animated line, check out the animation series ‘Baman and Piderman’. Lots of episodes on YouTube.
- jasonjmcghee 1y agoEvery time I see this effect I think of "Baba Is You" It's a very distinct style.
- cheptsov 1y agoLooks very cool but my iPhone got really hot after just playing with it for one minute!