[HN Gopher] Making noisy SVGs
___________________________________________________________________
Making noisy SVGs
Author : dimmke
Score : 464 points
Date : 2023-12-07 18:04 UTC (1 days 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.
| Puts wrote:
| Exactly. Noise adds texture - which is an important
| ingredient in visual art and design. But too much noise
| obstructs the image. It's all about balance - just like
| cooking.
| treprinum wrote:
| Wasn't that kinda solved by Foveon X3? Film-like yet digital.
| esafak wrote:
| I think the problem resolved itself when a new generation
| grew up with digital photography and did not long for grain.
| Now it is a retro aesthetic, like gen-Z's use of pixel art.
| dharma1 wrote:
| Foveon just has 3 vertically stacked layers of photodiodes
| (one for each RGB colour) instead of a single one with Bayer
| filters like other digital camera sensors.
|
| It's not related to film grain (which is a byproduct of
| silver particles in celluloid).
| treprinum wrote:
| The behavior of the sensor with its flaws closely resembled
| film. The sharpest digital pictures I've ever observed.
| dharma1 wrote:
| they are very sharp indeed, and the colours are quite
| film like. I have a DPM2 and waiting for the Foveon full-
| frame sensor that Sigma is still working on.
| 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.
| whilenot-dev wrote:
| Rather looks like a risograph effect to me
| 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.
| testermelon wrote:
| Thank you for the great explanation of dithering. It's very
| intuitive and easy to follow.
| planede wrote:
| > 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.
|
| This oversimplifies it a bit. Most dithering algorithms are
| deterministic. They are based on choosing a value for a
| pixel, remembering the difference between the ideal and the
| chosen value and then spreading out that difference to
| surrounding pixels.
|
| Random dithering is more commonly used in audio signals,
| AFAIK, not much in image processing.
| 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
| esafak wrote:
| I'm glad I asked; this nails it.
|
| Pinterest also keeps track of trends:
| https://trends.pinterest.com/
| 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.
| spartanatreyu wrote:
| I experimented with an effect where a single frame of noise
| was generated, then reused throughout an animation:
|
| https://codepen.io/spartanatreyu/pen/qBKBgPN?editors=1100
|
| I was initially trying to replicate a visual effect from a
| music video but it morphed into this.
|
| I kind of like the effect
| 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!
| Tistron wrote:
| Thank you!
| airstrike wrote:
| Your link is so cool it's worth a submission of its own. Thanks
| for sharing!
| Tistron wrote:
| Thank you!
|
| I didn't get around to making UI for it, but I also added the
| ability to link to animations: https://einarmagnus.net/pages/
| logo?animate=wait:3000;angle:0...
|
| I lose myself in doing these little things instead of
| marketing or copy, haha.
| Tistron wrote:
| Also, the svg is made with a recursive astro component. It
| would probably make for a nice writeup, but I'd rather
| write more about shame and presence.
| 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.
| qaisjp wrote:
| This link is incredible, thank you!
| quickthrower2 wrote:
| I noticed this when trying to do pixel perfect previews for a
| client project. There are differences in simple text
| alignment settings. If you need product previews it might be
| worth considering server side render to image :-( instead.
| esafak wrote:
| What is the solution today; stick to simple SVG features, or
| use PNG?
| Tistron wrote:
| The only thing I had problems with (only caring about
| current versions of Chrome, Fx and Safari) was drop-
| shadows. Though I guess I am not using particularly
| advanced SVG features. What made it feel advanced and cool
| for me is how much I could do with css variables and
| transitions blended into it. Though, the mixing of CSS and
| SVG is also weird.
|
| MDN (https://developer.mozilla.org/en-
| US/docs/Web/SVG/Tutorial/Fi...):
|
| > In addition to setting attributes on objects, you can
| also use CSS to style fills and strokes. Not all attributes
| can be set via CSS. Attributes that deal with painting and
| filling are usually available, so fill, stroke, stroke-
| dasharray, etc. can all be set this way, in addition to the
| gradient and pattern versions of those shown below.
| Attributes like width, height, or <path> commands cannot be
| set through CSS. _It 's easiest just to test and find out
| what is available and what isn't._
|
| > Note: The SVG specification decides strictly between
| attributes that are properties and other attributes. The
| former can be modified with CSS, the latter not.
| Tistron wrote:
| Wow, started reading this now.
|
| There's a lot of surprises in there for sure. The people
| crafting the spec seem to have had some peculiar goals that I
| don't quite understand. Especially all the implicit stuff in
| path data is surprising to me.
|
| Also, a relative value of stroke-with is "relative to the
| diagonal length of the current viewbox". This was surprising,
| but makes a lot of sense when I think about it. And the
| default unit is %, which also makes sense after some
| thinking.
|
| Seems like frustrating work, I'm glad the author can channel
| it into writing :)
|
| Thanks for sharing.
| dade_ wrote:
| For a user, this has been my biggest frustration. '300x150
| is the default specified in the SVG spec if it isn't
| specified in the document svg element.'
|
| In practice, this means that some SVGs appear fine in apps
| that calculates the size in some other manner, but in
| others that follow the 'spec' only 300x150 appears. Safari
| & Jupyter notebooks for example. Seriously annoying, but at
| least I was able to figure out why.
|
| https://svgwg.org/specs/integration/#svg-css-sizing
| 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.
| Tistron wrote:
| Thank you! I want to get around to writing more. I now teach
| circling for Circling Europe in Scandinavia. I have learned a
| lot since I wrote that piece.
|
| And I also want to get around to having my website in English
| and Swedish. Astro released v4 just now and has some some
| kind of i18n story that I'm gonna look into.
| hiisukun wrote:
| In case anybody ends up on the 'logo' page and clicks away
| after looking at the default waves, try a few of the 'presets'
| on the bottom-rightmost dropdown. It's really cool how
| different tweaks to the parameters yield interesting designs
| (like scorpion vs balance vs spruce).
|
| Great stuff.
| heleninboodler wrote:
| Thanks for pointing this out. I thought the wave logo was
| very clever and clicked away, but the demonstration of a
| handful of building different (and really well done) subjects
| with the same simple technique blew my mind.
| danielvaughn wrote:
| SVG on Safari is pretty rough. There's a lot you can't do with
| it.
| a_c wrote:
| Your logo demo is very satisfying to look and play at. Very
| cool. Just want to let you know
| 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...
| smusamashah wrote:
| I am on phone and can not see the noise in the final image at
| all. I think its there but when I zoom in, it feels like it
| disappears. You should probably consider making it bigger or
| independent of zoom for the sake of mobile viewers.
| WatchDog wrote:
| As the other comment mentions, yes there is a seed attribute,
| also the algorithm for the randomness function is defined in
| the specification as 186 lines of C code[0], so in theory
| different implementations should behave the same.
|
| Although looking at the cod, it uses floating point math, which
| I believe is implementation defined, so maybe it could behave
| differently on various platforms.
|
| [0]: https://drafts.fxtf.org/filter-effects/#elementdef-
| feturbule...
| 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.
| Tao3300 wrote:
| It might have been a deliberate choice. That way you don't
| have to count on filter support whenever and wherever it's
| being rendered.
| herpdyderp wrote:
| Affinity Designer 2 has been really nice vs paying for Adobe
| Creative Cloud but it sure has required me to manually tweak
| SVGs a lot!
| 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.
| bufferoverflow wrote:
| Same here. I am on Android Chrome.
| shannifin wrote:
| Yeah, no Android Chrome support for something in the code...
| 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.
| FrostKiwi wrote:
| FYI, don't use this as page backgrounds. I tried weeks ago and
| there are all kinds of weird bugs cropping up on various devices
| up to full page freezes for larger sites or the svg simply
| stopping rendering after some size.
|
| Using this for lovely pixel sized noise backgrounds is what I
| would love, but it's not there yet on the performance and
| stability side.
| geokon wrote:
| Does anyone have any resource on which features are broken across
| implementations? How to stay sane with SVG?
|
| I recently made the mistake of making a complex conference poster
| using SVG. It now renders different in every browser and program
|
| https://kxygk.github.io/imergination/
|
| In making the graphic I noticed:
|
| - You can include/link SVGs to embed, but if they in turn include
| other SVGs then it will not work (ex: the poster -> diagrams ->
| several plots/maps). So dynamic SVGs that are updated when
| subimages change are impossible
|
| - Webbrowsers randomly and will refuse to display embedded/linked
| image b/c of "security"
|
| - Ex: in the above link, if you try to open the SVG in a separate
| tab it won't display correctly:
| https://raw.githubusercontent.com/wiki/kxygk/imergination/ag...
|
| - It was basically impossible to turn a complex SVG into a PDF
| without inconsistencies and/or running out of RAM
|
| - Every SVG-to-PDF converter gives different results
|
| - Many implementations (ex: Inkscape) will randomly treat
| included SVGs are a raster graphic. I never pinpointed when this
| would occur (and even then, when rendering to PNG Inkscape
| doesn't propagate the DPI setting to subimages)
| RugnirViking wrote:
| ooh this is cool. Is there any support for gradients of these? I
| guess maybe you could do some mask thing for opacity. But it
| would be cool if we could vary the fractal noise frequency
| nektro wrote:
| i believe this design style came out of
| https://fluent2.microsoft.design/
| j0hnyl wrote:
| "It's not perfect, and notably renders differently in Safari than
| other browsers but it achieves what I set out to accomplish."
|
| This is the part that drives me nuts. I do a lot of generative
| art with SVGs and avoid the filters altogether because of this.
| JamieDawsonCode wrote:
| This specific style of grain on SVGs reminds me of 1970's Sci-Fi
| art that depicted the future. Thank you for making this tutorial,
| I'm gonna have to experiment with this!
___________________________________________________________________
(page generated 2023-12-08 23:02 UTC)