Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Simulating hand-drawn motion with SVG filters

camillovisini.com

Post reply on HN
Print view View original

11–20 of 25 posts

Re: Simulating hand-drawn motion with SVG filters

#11

Post by Hasnep »

nine_k wrote: post #3

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

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!

Re: Simulating hand-drawn motion with SVG filters

#14

Post by jchw »

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 :)

Re: Simulating hand-drawn motion with SVG filters

#18

Post by nicoburns »

jchw wrote: 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.

Re: Simulating hand-drawn motion with SVG filters

#20

Post by dgrcode »

jchw wrote: 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…

It'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.

Post reply on HN