Creating a Pencil Effect in SVG

#1

Post by homarp » Sat, Mar 21, 2020, 12:04 PM UTC

Creating a Pencil Effect in SVG
heredragonsabound.blogspot.com

Re: Creating a Pencil Effect in SVG

#2

Post by leggomylibro » Sat, Mar 21, 2020, 1:03 PM UTC

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/

Re: Creating a Pencil Effect in SVG

#3

Post by ygra » Sat, Mar 21, 2020, 1:23 PM UTC

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

Re: Creating a Pencil Effect in SVG

#4

Post by _Microft » Sat, Mar 21, 2020, 1:44 PM UTC

The series is amazing, I submitted a different article earlier and there is a comment of mine giving shortcuts to different aspects of the map generation. See here:

https://news.ycombinator.com/item?id=21406356

Re: Creating a Pencil Effect in SVG

#5

Post by m1el » Sat, Mar 21, 2020, 1:47 PM UTC

I've seen several pencil-like textures, and this one looks great! Thank you for sharing this effect.

Also TIL SVG has displacement maps and noise.

Re: Creating a Pencil Effect in SVG

#6

Post by andreareina » Sat, Mar 21, 2020, 1:58 PM UTC

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/

The Mozilla SVG docs are great too: https://developer.mozilla.org/en-US/docs/Web/SVG

Re: Creating a Pencil Effect in SVG

#7

Post by leeoniya » Sat, Mar 21, 2020, 2:36 PM UTC

also gooey effects!

https://css-tricks.com/gooey-effect/

https://tympanus.net/Development/CreativeGooeyEffects/player...

Re: Creating a Pencil Effect in SVG

#8

Post by Guillaume86 » Sat, Mar 21, 2020, 3:21 PM UTC

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

Re: Creating a Pencil Effect in SVG

#9

Post by oscg44 » Sat, Mar 21, 2020, 4:04 PM UTC

Interesting.

Any ideas on how to achieve a pen or pencil like effect when applied to images of text, emulating ink properties? Kind of neural style for text.

Re: Creating a Pencil Effect in SVG

#10

Post by thechao » Sat, Mar 21, 2020, 4:09 PM UTC

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.