Creating a Pencil Effect in SVG | Hacker News Reader

Creating a Pencil Effect in SVG

heredragonsabound.blogspot.com

522 pointshomarp25 comments

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:

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

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

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

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

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

also known as meta blobs/balls

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

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

Wow. Really cool.

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.

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

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

It went to CSS Paint API.

Just use render to texture from WebGL.

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.

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!

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

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.

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

Reply on news.ycombinator.com