[HN Gopher] Making noisy SVGs
___________________________________________________________________
Making noisy SVGs
Author : dimmke
Score : 221 points
Date : 2023-12-07 18:04 UTC (4 hours ago)
(HTM) web link (daniel.do)
(TXT) w3m dump (daniel.do)
| esafak wrote:
| This reminds me of how film photographers and film-makers strived
| to eliminate grain while digital photographers felt the need to
| add it back in. The grass is greener on the other side!
|
| I confess to finding the examples on this page quite appealing,
| amidst all the digital sterility.
| TheRealPomax wrote:
| It'd be good not to overgeneralize. For as long as we've been
| doing digital video, and then later, digital photography, there
| have been as many folks trying to minimize noise as trying to
| eliminate noise as trying to simulate noise as intentionally
| exploiting noise. Noise as a thing was never the problem, it
| was always about whether there was too much of it.
| treprinum wrote:
| Wasn't that kinda solved by Foveon X3? Film-like yet digital.
| jessehattabaugh wrote:
| The examples are practically invisible in dark mode. The author
| should use rasterized screenshots with white backgrounds, or a
| media query with a brighter color.
| half-kh-hacker wrote:
| Which dark mode are you talking about? As far as I can tell the
| page (& demos) don't ship any styles for prefers-color-scheme:
| dark at all
| rtkwe wrote:
| Reminds me of the meme of the person shoving a stick into
| their bikes wheel then complaining about ______. Used to get
| it a lot here with people complaining about sites being
| broken because they were hard blocking essentially all
| javascript, the issues are your own making here...
| shrx wrote:
| In my case firefox used the OS's (Windows 10) dark mode
| preference.
|
| In about:config the layout.css.prefers-color-scheme.content-
| override setting was on 2 (system). Setting it to 3 (browser)
| turned the dark mode off.
| nix0n wrote:
| The Firefox "Dark Background and Light Text" extension works
| fine on this page when using the "Invert" option.
| ssgodderidge wrote:
| Sounds like a great idea if you would like to use these in your
| own dark mode site. The demo site is not in dark mode, however,
| so why should they optimize for this?
| Minor49er wrote:
| > I'm not hip enough to know if this style has been assigned a
| pithy label, but I do enjoy it. At the same time, I find it
| frustrating -- because as far as I can tell (the lack of examples
| I have seen in the wild supports this theory) there isn't an easy
| way to replicate these illustrations with SVGs
|
| The term the author is looking for is "dithering". CSS-Tricks
| explains this on their page "Grainy Gradients" using the same
| technique:
|
| https://css-tricks.com/grainy-gradients/
|
| There's also a decent alternative to doing this with CSS, though
| it's applied to the entire image:
|
| https://github.com/tomren1/dither-with-css
| JKCalhoun wrote:
| Is that really dithering when you're not using a limited
| palette to simulate a larger one?
|
| Reminds me of vintage travel poster art. Example:
|
| https://www.graphicart-news.com/wp-content/uploads/2012/09/2...
| betenoire wrote:
| It's a dithering effect for sure. Drop shadows aren't
| actually shadows, either :)
| kookamamie wrote:
| "Dithering" is adding noise to randomize quantization
| errors and to hide banding. The OPs post looks like just
| adding noise for getting a noisy look.
| itishappy wrote:
| It's the same effect! OP may have done this for style,
| but the effect also happens to hide any banding that may
| have be present.
| Someone wrote:
| It may look similar in these high resolution pictures,
| but it's different.
|
| With dithering, there's negative correlation between the
| noise added to neighboring pixels (if one gets a bit
| blacker, at least one of its neighbors is more likely to
| be made a bit whiter).
|
| This adds Perlin noise. With that, I think that
| correlation is zero or, possibly, positive.
| itishappy wrote:
| That's how good dithering works, but adding random noise
| is still dithering.
|
| https://commons.wikimedia.org/wiki/User:Gerbrant/Ditherin
| g_a...
| coldtea wrote:
| Not the same. Not in how it's achieved (merely adding
| grain isn't dithering), and not in the final effect.
|
| Google Images "dithering" for examples of how dithering
| looks.
| itishappy wrote:
| It's bad dithering, but it's still dithering.
|
| Random noise gives poor but fast results. Error diffusion
| is great but slow (pixels are processed sequentially).
|
| My favorite technique is using a blue-noise matrix
| because it gives great results quickly. Creating the
| matrix is tricky, but you can do it offline and reuse it.
| dimmke wrote:
| Oh wow, this is a little embarrassing. I will have to update
| the post to link to that. I promise I had not seen it when I
| created this, I did this on my own and came to the same
| conclusions!
| jszymborski wrote:
| Kinda makes me think more of stippling, which of course is
| related to dithering [0].
|
| [0] https://en.wikipedia.org/wiki/Stippling
| coldtea wrote:
| Dithering would be an actual technical technique with a similar
| end effect, but it's not about adding grain per se, nor is this
| made through dithering.
|
| And I think the guy looks for a design term for the visual
| style (similar to how we say "flat", "skeuomorphic", "italian
| style"), not the technical name of how it can be achieved,
| anyway.
|
| For that, I'd say, both the geometrical shapes in his design
| and the added grain, bring to mind the so-called "memphis
| style".
| jetrink wrote:
| I agree and the grain/transparency effect specifically looks
| like the gradients made using a (physical) airbrush that show
| up a lot in the Memphis style.
|
| 1. https://www.etsy.com/listing/1402316103/memphis-style-
| postmo...
|
| (Scroll down about halfway for the next one)
|
| 2. https://www.chairish.com/product/6986561/vintage-1980s-mem
| ph...
|
| 3. https://glowgeometric.com/products/1980s-hollis-fingold-
| memp...
| GuB-42 wrote:
| It really is just noise, more precisely a kind of Perlin noise
| combined with a "color burn" blending mode. It is not
| dithering, though it looks like it because it is applied on a
| gradient.
|
| The idea with dithering is that you start with a smooth image
| (high color depth) and quantize it, that is, reduce the number
| of colors. If you do it the simplest way, by integer division,
| you will get banding. To reduce banding, the idea is that for
| each pixel, you choose between the rounded up or rounded down
| value semi-randomly, with a probability depending on how close
| you are to each value. It will give gradients a noisy look, but
| if you happen to be on exactly the color you want, it will not
| look noisy at all. Even though dithering can be a stylistic
| choice, it is more often a technical one, so that you can have
| a good looking image with a limited palette.
|
| Here, the effect will result in a uniformly noisy texture, and
| it will not reduce banding if present. I think that for
| aesthetic purposes, it is better than true dithering.
|
| In addition to the aesthetic value of adding texture to the
| object, just like dithering, it can also improve the perceived
| quality of the image. For example, it can mask defects and
| increase the perceived sharpness.
| dexwiz wrote:
| Reminder that art is cyclic. This reminds me of the Memphis
| airbrushed geometric art from the 80s.
|
| The latest flat design cycle is dead, and one way to evolve is
| take the latest generation (flat) and combine it with current
| retro trend (80s/90s redistilled by GenZ). So you take the
| natural noise generated by airbrushed artwork of the 80s/90s and
| translate that into digital art via gradients. Voila! You have a
| style that will dominate the digital art landscape for the next
| few years.
| esafak wrote:
| Are there any resources to stay abreast of design trends? I
| know about https://aesthetics.fandom.com/
| shermantanktop wrote:
| Just visited. Not sure how to label the (dubious) design
| sensibility of the site itself, but the massive ugly ads are
| making me realize my adblocker is off. Interesting content
| nonetheless.
| werber wrote:
| codrops is a nice one
| mp_mn wrote:
| I like CARI a lot https://cari.institute/aesthetics
| dimmke wrote:
| This is remarkable. Thank you!
| aidenn0 wrote:
| That's incredible. Also gives me a name for the
| Cybertruck's style "Cassette Futurism:"
| https://cari.institute/aesthetics/cassette-futurism
| Retr0id wrote:
| The "ApeFest" website[1] (yeah, the one that burnt attendees'
| retinas with UV) has some dynamic noise going on, and I had a
| look at the CSS. They're actually using a tiled PNG overlay[2],
| which gets wobbled around "randomly" using CSS animations (edit:
| actually, looks like they move it with JS). Pretty low-tech, but
| it works.
|
| [1] https://apefest.com/
|
| [2]
| https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...
| cosmotic wrote:
| The apefest effect uses a lot of CPU and thus energy.
| Retr0id wrote:
| It does if you redraw every frame, but if you disabled the
| animation and made it static I have a feeling it could beat
| the SVG method (although it probably wouldn't look as good).
|
| It also has the advantage of looking mostly the same in every
| browser - the comments here report inconsistencies with the
| SVG method.
| rpigab wrote:
| I was wondering if it would be wise and feasible to add WebGL
| shaders over SVGs?
| globular-toast wrote:
| This looks really strange in Firefox. Especially in the full
| example[0]. The "noise" has regularity as if it has been tiled
| and almost looks like it has been run through a lossy compressor.
|
| [0] https://danielimmke.github.io/noisy-shapes/
| Tistron wrote:
| They look almost identical to me in Fx and Chrome. Safari on
| the other hand...
| Tistron wrote:
| I recently was playing with SVG, to get a dropshadow I couldn't
| make when drawing on canvas. I could not get css dropshadows in
| SVG working in Safari and had to use SVG native drop shadow
| filters, and then that looks different in Safari than in the
| other browsers.
|
| The specific thing is at https://www.einarmagnus.net/pages/logo I
| do my best to detect safari with javascript and activate the SVG
| version and disable the css version.
|
| Background on the "recursive yin yang" is here:
| https://einarmagnus.net/blog/2020/01/22/finding-the-logo
|
| Maybe I'll play with texture, I like that aesthetic a lot. But it
| is frustrating that it looks so differently in Safari. Do you
| think that they will converge on how they interpret SVG?
| epiccoleman wrote:
| That recursive yin yang article is great, and the logo you got
| out of the experiment is incredibly cool. I'm impressed!
| airstrike wrote:
| Your link is so cool it's worth a submission of its own. Thanks
| for sharing!
| nicoburns wrote:
| > Do you think that they will converge on how they interpret
| SVG?
|
| Not any time soon. The unfortunate truth is that nobody
| implements the entirety of the SVG spec. It's not even close
| when it comes to SVG 2. This is a good read on that topic:
|
| https://razrfalcon.github.io/notes-on-svg-parsing/
|
| > Whenever I receive bug reports for my SVG library, people
| often use the phrase "my SVG isn't rendering correctly". Which
| cracks me up every time. There is no such thing as a correctly
| rendered SVG. As soon as you start using "advanced" features
| such as text, filters, or, God forbid, animations - it would
| simply not work. Never. And even if you will manage to make it
| work, as soon as you try a different render - it will fall
| apart again.
|
| > The idea behind this "book" is to answer the popular question
| of "how hard can it be?". A reader expected to have some prior
| knowledge about SVG, but it should be a fun read either way.
| rambambram wrote:
| Your blog post on shame really resonates with me. Good stuff,
| you should post it here. I subscribed to your feed, it's a
| shame (pun intended) I can't read Swedish.
| ortichic wrote:
| I like the effect, but is there a way to make it independent of
| the zoom level?
|
| On a related note, this probably adds randomness, is there a way
| to seed it? For example to be able to define a single correct
| render result at a given size.
| dimmke wrote:
| Author here, yes there is! The underlying algorithm and
| implementation in SVG accepts a seed value:
| https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/s...
| pdn1 wrote:
| Gradient.
| gatkinso wrote:
| Really excellent work
| Tao3300 wrote:
| That's cool. Looks like Inkscape supports adding this kind of
| noise through its various effects in its Filters menu. Exported
| as a Plain SVG and looking at the code confirms the use of
| feTurbulence.
|
| For comparison, I also did a test to see how Affinity Designer 2
| does it, since it has noisy fills. The SVG it exports has the
| noise embedded in it as a base64 jpeg image!
| OliveMate wrote:
| I'm currently away from my PC so I can't check myself, does it
| embed a single noise texture and use it multiple times, or does
| it generate a texture for each use of noise?
|
| As someone who can't justify an Adobe license and can't wrap
| their head around InkScape, Designer has been a perfect
| alternative bar quirks like this.
| IshKebab wrote:
| I'm not sure what it's supposed to look like, but on my phone
| that looks like a smooth gradient with no noise.
| chrismorgan wrote:
| I've wanted to use a variety of SVG filters like this at times,
| but the problem is that their appearance varies significantly
| from engine to engine and by scaling factor, and so it only ends
| up working for subtle things where imprecisions don't matter
| much, and I end up regretfully but consistently going back to
| raster stuff. Also the pixel-by-pixel nature of them means that
| things like feDisplacementMap destroy antialiasing, which spoils
| half of the situations you might like to use it.
| aidenn0 wrote:
| Perlin Noise (and it's successor Fractal Noise) are incredible
| bang-for-your-buck when adding realism and/or an "organic" feel
| to things. You can see it used to great effect, for example, in
| _Aladdin (1992)_ for the scene where they escape from the Cave of
| Wonders.
___________________________________________________________________
(page generated 2023-12-07 23:00 UTC)