Live data from Hacker News

Simulating hand-drawn motion with SVG filters

camillovisini.com

21–25 of 25 posts

Re: Simulating hand-drawn motion with SVG filters

#22
post #10
post #2

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?

The 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.

Re: Simulating hand-drawn motion with SVG filters

#25
post #14

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 prett…

WebRender 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.

I 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.
Post reply on HN