[HN Gopher] Creating a Pencil Effect in SVG
___________________________________________________________________
Creating a Pencil Effect in SVG
Author : homarp
Score : 374 points
Date : 2020-03-21 12:04 UTC (10 hours ago)
(HTM) web link (heredragonsabound.blogspot.com)
(TXT) w3m dump (heredragonsabound.blogspot.com)
| z3t4 wrote:
| What's up with all the bitmap images. Was expecting to see at
| least one SVG image.
| antimetropic wrote:
| 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.
| Aearnus wrote:
| 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...
| _Microft wrote:
| 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
| oscg44 wrote:
| 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.
| m1el wrote:
| 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.
| ficklepickle wrote:
| 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!
| thechao wrote:
| 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 wrote:
| 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...
| leggomylibro wrote:
| 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/
| ygra wrote:
| 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 wrote:
| The problem is the spec is so massive that different
| renderers support different feature sets and don't always
| render content the same.
| ygra wrote:
| 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 wrote:
| My gripe with browsers is that they don't implement the
| linearRGB interpolation.
| andreareina wrote:
| The Mozilla SVG docs are great too:
| https://developer.mozilla.org/en-US/docs/Web/SVG
| leeoniya wrote:
| also gooey effects!
|
| https://css-tricks.com/gooey-effect/
|
| https://tympanus.net/Development/CreativeGooeyEffects/player...
| cobalt wrote:
| also known as meta blobs/balls
| Guillaume86 wrote:
| Funny I discovered that effect last week in react-spring
| examples: https://codesandbox.io/embed/8zx4ppk01l
| mncharity wrote:
| 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
| mncharity wrote:
| 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...
___________________________________________________________________
(page generated 2020-03-21 23:00 UTC)