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

522 pointsby homarp6 yıl önce25 comments

heredragonsabound.blogspot.com

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

25 comments

mxfh6 yıl önce

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

cpach6 yıl önce

Wow. Really cool.

thechao6 yıl önce

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 yıl önce

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 yıl önce

It went to CSS Paint API.

Just use render to texture from WebGL.

txu6 yıl önce

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

fyp6 yıl önce

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

leggomylibro6 yıl önce

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 yıl önce

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 yıl önce

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

ygra6 yıl önce

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 yıl önce

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

andreareina6 yıl önce

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

_Microft6 yıl önce

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 yıl önce

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 yıl önce

also gooey effects!

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

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

mncharity6 yıl önce

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 yıl önce

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

mncharity6 yıl önce

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 yıl önce

also known as meta blobs/balls

oscg446 yıl önce

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 yıl önce

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 yıl önce

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

antimetropic6 yıl önce

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 yıl önce

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!