Creating a Pencil Effect in SVG(heredragonsabound.blogspot.com)

heredragonsabound.blogspot.com

https://heredragonsabound.blogspot.com/2020/02/creating-pencil-effect-in-svg.html

25 comments

mxfh6 anni fa

Neat, was just looking at this SVG filter powered watercolor effect earlier today again: https://observablehq.com/@veltman/watercolor

cpach6 anni fa

Wow. Really cool.

thechao6 anni fa

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.

TazeTSchnitzel6 anni fa

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

pjmlp6 anni fa

It went to CSS Paint API.

Just use render to texture from WebGL.

txu6 anni fa

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

fyp6 anni fa

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

leggomylibro6 anni fa

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/

ygra6 anni fa

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_dll6 anni fa

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

ygra6 anni fa

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

leni5366 anni fa

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

andreareina6 anni fa

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

_Microft6 anni fa

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

m1el6 anni fa

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.

leeoniya6 anni fa

also gooey effects!

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

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

mncharity6 anni fa

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

Guillaume866 anni fa

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

mncharity6 anni fa

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

cobalt6 anni fa

also known as meta blobs/balls

oscg446 anni fa

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.

Aearnus6 anni fa

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

z3t46 anni fa

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

antimetropic6 anni fa

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.

ficklepickle6 anni fa

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!