Skip to content(if available)orjump to list(if available)

Simulating Hand-Drawn Motion with SVG Filters

Simulating Hand-Drawn Motion with SVG Filters

7 comments

·July 17, 2025
Visit

memalign

Charming wiggling! Similar to Wobblepaint (drawing tool made by the creator of PICO-8).

https://www.lexaloffle.com/bbs/?tid=40058

nine_k

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.

mirkodrummer

Wonderful, svg has so manu unexplored capabilities that feels like a crime using it mostly for icons on the web

gabriben

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

tubs

Pretty site and good write up but my phone turned to molten lava viewing it!

teeray

See also: https://en.wikipedia.org/wiki/Squigglevision

socki

Dr. Katz.