Creating a Pencil Effect in SVG • Hacker News Board

Re: Creating a Pencil Effect in SVG

#11

Post by unlinked_dll » Sat, Mar 21, 2020, 4:14 PM UTC

ygra wrote: post #3

leggomylibro wrote: post #2

Very cool. Game developers get all the fun problems :) If anyone gets interested in the SVG format, I've also found this to be a very useful resource: https://svgpocketguide.com/book/

Personally I found the SVG specification very readable and understandable as well. It also has the benefit of accurately describing what the renderer should do (a lot of resources out there are outdated or inaccurate).

The problem is the spec is so massive that different renderers support different feature sets and don't always render content the same.

Re: Creating a Pencil Effect in SVG

#12

Post by TazeTSchnitzel » Sat, Mar 21, 2020, 4:14 PM UTC

thechao wrote: post #10

I wish there was an SVG2 that was more like modern 3D graphics APIs. My druthers: vertex stores, index buffers, stroke & shapes paths, and then both "standard" (prebaked) and "user-defined" (shader) shaders for texturing the strokes & shapes.

There was some work on adding shaders to CSS filters, but I don't know if it went anywhere.

https://developers.google.com/web/updates/2013/03/Introducti...

Re: Creating a Pencil Effect in SVG

#13

Post by Aearnus » Sat, Mar 21, 2020, 4:26 PM UTC

The other two posts he linked to here were real interesting as well:

* https://heredragonsabound.blogspot.com/2016/11/this-is-where...

* https://heredragonsabound.blogspot.com/2018/12/hand-drawn-li...

Re: Creating a Pencil Effect in SVG

#14

Post by mncharity » Sat, Mar 21, 2020, 4:28 PM UTC

leeoniya wrote: post #7

also gooey effects! https://css-tricks.com/gooey-effect/ https://tympanus.net/Development/CreativeGooeyEffects/player...

The blurry variant of "Making Things Stick" reminds me of a hydrogen molecule bonding[1].

It might be interesting to tune an svg filter against a ground truth like [2] - if the difference can be made small, it might be useful for educational interactives?

I wonder if one could get something complex like [3]?

[1] http://phelafel.technion.ac.il/~orcohen/h2/h2_45.gif from frame http://phelafel.technion.ac.il/~orcohen/h2.html of http://phelafel.technion.ac.il/~orcohen/DFTVisualize.html [2] https://wiki.fysik.dtu.dk/gpaw/tutorials/bader/bader.html [3] image https://i.insider.com/5249da00eab8ea2172fa799a?width=700&for... via https://www.businessinsider.com/first-images-of-a-hydrogen-b... from paywalled https://science.sciencemag.org/content/340/6139/1434.abstrac...

Re: Creating a Pencil Effect in SVG

#15

Post by ygra » Sat, Mar 21, 2020, 4:28 PM UTC

unlinked_dll wrote: post #11

ygra wrote: post #3

Earlier quoted context omitted.

Personally I found the SVG specification very readable and understandable as well. It also has the benefit of accurately describing what the renderer should do (a lot of resources out there are outdated or inaccurate).

The problem is the spec is so massive that different renderers support different feature sets and don't always render content the same.

As long as you target web browsers, things generally work out fine, in my experience, with very few gaps in the feature set. Bugs, however ... Safari is seemingly constantly broken (as was Edge until a year ago or so, but then they scrapped EdgeHTML anyway), Chrome and Firefox sometimes seem to compete on who will break things the most in trying to make rendering faster (as long as rendering doesn't have to be correct it can be made nearly infinitely fast ...).

Re: Creating a Pencil Effect in SVG

#16

Post by mncharity » Sat, Mar 21, 2020, 4:30 PM UTC

Guillaume86 wrote: post #8

leeoniya wrote: post #7

also gooey effects! https://css-tricks.com/gooey-effect/ https://tympanus.net/Development/CreativeGooeyEffects/player...

Funny I discovered that effect last week in react-spring examples: https://codesandbox.io/embed/8zx4ppk01l

Reminds me of fission/fusion of large (so like liquid drops) atomic nuclei[1]. But for the long-range force being attractive.

Perhaps one might reverse that, and chase it around the box, forcing fusion?

[1] https://www.youtube.com/watch?v=AVKZDmYrTHo

Re: Creating a Pencil Effect in SVG

#17

Post by leni536 » Sat, Mar 21, 2020, 5:09 PM UTC

ygra wrote: post #15

unlinked_dll wrote: post #11

Earlier quoted context omitted.

The problem is the spec is so massive that different renderers support different feature sets and don't always render content the same.

As long as you target web browsers, things generally work out fine, in my experience, with very few gaps in the feature set. Bugs, however ... Safari is seemingly constantly broken (as was Edge until a year ago or so, but then they scrapped EdgeHTML anyway), Chrome and Firefox sometimes seem to compete on who will break things the most in trying to make rendering faster (as long as rendering doesn't have to be correc…

My gripe with browsers is that they don't implement the linearRGB interpolation.

Re: Creating a Pencil Effect in SVG

#18

Post by z3t4 » Sat, Mar 21, 2020, 8:15 PM UTC

What's up with all the bitmap images. Was expecting to see at least one SVG image.

Re: Creating a Pencil Effect in SVG

#19

Post by cobalt » Sat, Mar 21, 2020, 8:40 PM UTC

leeoniya wrote: post #7

also gooey effects! https://css-tricks.com/gooey-effect/ https://tympanus.net/Development/CreativeGooeyEffects/player...

also known as meta blobs/balls

Re: Creating a Pencil Effect in SVG

#20

Post by antimetropic » Sat, Mar 21, 2020, 8:43 PM UTC

z3t4 wrote: post #18

What's up with all the bitmap images. Was expecting to see at least one SVG image.

Click through to the codepen links at the end. They’re rendering in Firefox and Chrome for me, though slightly differently, and with Safari I don’t see the lines at all.