
Creating a Pencil Effect in SVG - homarp
https://heredragonsabound.blogspot.com/2020/02/creating-pencil-effect-in-svg.html
======
leggomylibro
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/](https://svgpocketguide.com/book/)

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

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

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

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

------
leeoniya
also gooey effects!

[https://css-tricks.com/gooey-effect/](https://css-tricks.com/gooey-effect/)

[https://tympanus.net/Development/CreativeGooeyEffects/player...](https://tympanus.net/Development/CreativeGooeyEffects/player.html)

~~~
Guillaume86
Funny I discovered that effect last week in react-spring examples:
[https://codesandbox.io/embed/8zx4ppk01l](https://codesandbox.io/embed/8zx4ppk01l)

~~~
mncharity
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](https://www.youtube.com/watch?v=AVKZDmYrTHo)

------
Aearnus
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/2016/11/this-is-where-i-draw-line.html?m=1)

* [https://heredragonsabound.blogspot.com/2018/12/hand-drawn-li...](https://heredragonsabound.blogspot.com/2018/12/hand-drawn-lines-revisited.html?m=1)

------
mxfh
Neat, was just looking at this SVG filter powered watercolor effect earlier
today again:
[https://observablehq.com/@veltman/watercolor](https://observablehq.com/@veltman/watercolor)

~~~
cpach
Wow. Really cool.

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

------
_Microft
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](https://news.ycombinator.com/item?id=21406356)

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

~~~
TazeTSchnitzel
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...](https://developers.google.com/web/updates/2013/03/Introduction-
to-Custom-Filters-aka-CSS-Shaders)

~~~
pjmlp
It went to CSS Paint API.

Just use render to texture from WebGL.

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

~~~
antimetropic
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.

------
ficklepickle
This is both really cool and immediately useful.

I've been playing around making a HTML/CSS blackboard for TV displays etc. I
used a black background, a semi-transparent PNG mask for the dust/old writing
effect and used some handwriting fonts. I applied a slight blur to the text,
but the effect isn't quite right.

I'm going to try using SVG text and applying similar filters to produce a
chalk effect. I hadn't thought of that approach, so thanks for the great post!

------
txu
Reading an article this in-depth and pure on blogger brings me back to 2004,
the good ol' days

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

------
fyp
Side question: How do you create the "paper" texture? Or is it just an image
here?

