return to table of content

Making noisy SVGs

Tistron
17 replies
21h46m

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?

nicoburns
6 replies
19h35m

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.
esafak
1 replies
12h30m

What is the solution today; stick to simple SVG features, or use PNG?

Tistron
0 replies
6h54m

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
1 replies
6h57m

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_
0 replies
5h43m

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

quickthrower2
0 replies
12h34m

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.

qaisjp
0 replies
16h52m

This link is incredible, thank you!

airstrike
2 replies
19h39m

Your link is so cool it's worth a submission of its own. Thanks for sharing!

Tistron
1 replies
17h56m

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
0 replies
17h53m

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.

rambambram
1 replies
18h25m

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
0 replies
17h58m

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.

epiccoleman
1 replies
21h12m

That recursive yin yang article is great, and the logo you got out of the experiment is incredibly cool. I'm impressed!

Tistron
0 replies
17h53m

Thank you!

hiisukun
0 replies
17h24m

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.

danielvaughn
0 replies
13h36m

SVG on Safari is pretty rough. There’s a lot you can’t do with it.

a_c
0 replies
8h5m

Your logo demo is very satisfying to look and play at. Very cool. Just want to let you know

Minor49er
16 replies
22h32m

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
8 replies
22h28m

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
7 replies
22h18m

It's a dithering effect for sure. Drop shadows aren't actually shadows, either :)

kookamamie
5 replies
22h14m

"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
4 replies
21h53m

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.

coldtea
1 replies
20h52m

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
0 replies
20h13m

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.

Someone
1 replies
21h2m

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
0 replies
20h37m

That's how good dithering works, but adding random noise is still dithering.

https://commons.wikimedia.org/wiki/User:Gerbrant/Dithering_a...

whilenot-dev
0 replies
8h45m

Rather looks like a risograph effect to me

GuB-42
2 replies
20h22m

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
0 replies
12h7m

Thank you for the great explanation of dithering. It’s very intuitive and easy to follow.

planede
0 replies
7h0m

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.

coldtea
1 replies
20h56m

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
0 replies
20h20m

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

3. https://glowgeometric.com/products/1980s-hollis-fingold-memp...

jszymborski
0 replies
21h47m

Kinda makes me think more of stippling, which of course is related to dithering [0].

[0] https://en.wikipedia.org/wiki/Stippling

dimmke
0 replies
22h0m

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!

esafak
7 replies
22h56m

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.

treprinum
4 replies
22h8m

Wasn't that kinda solved by Foveon X3? Film-like yet digital.

dharma1
2 replies
9h37m

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
1 replies
4h18m

The behavior of the sensor with its flaws closely resembled film. The sharpest digital pictures I've ever observed.

dharma1
0 replies
2h7m

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.

esafak
0 replies
11h50m

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.

TheRealPomax
1 replies
22h23m

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
0 replies
8h56m

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.

dexwiz
7 replies
22h30m

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. Voilà! You have a style that will dominate the digital art landscape for the next few years.

esafak
6 replies
22h27m

Are there any resources to stay abreast of design trends? I know about https://aesthetics.fandom.com/

mp_mn
3 replies
20h19m
esafak
0 replies
16h38m

I'm glad I asked; this nails it.

Pinterest also keeps track of trends: https://trends.pinterest.com/

dimmke
0 replies
19h57m

This is remarkable. Thank you!

aidenn0
0 replies
18h42m

That's incredible. Also gives me a name for the Cybertruck's style "Cassette Futurism:" https://cari.institute/aesthetics/cassette-futurism

werber
0 replies
22h5m

codrops is a nice one

shermantanktop
0 replies
22h7m

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.

jessehattabaugh
5 replies
22h48m

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
2 replies
22h38m

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

shrx
0 replies
20h5m

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.

rtkwe
0 replies
22h20m

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

ssgodderidge
0 replies
22h11m

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?

nix0n
0 replies
22h12m

The Firefox "Dark Background and Light Text" extension works fine on this page when using the "Invert" option.

ortichic
3 replies
21h46m

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
1 replies
21h36m

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
0 replies
16h16m

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
0 replies
18h12m

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

Retr0id
3 replies
22h27m

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
2 replies
22h22m

The apefest effect uses a lot of CPU and thus energy.

Retr0id
1 replies
22h20m

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
0 replies
17h29m

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

Tao3300
2 replies
19h56m

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!

herpdyderp
0 replies
17h28m

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!

OliveMate
0 replies
19h26m

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
2 replies
19h54m

I'm not sure what it's supposed to look like, but on my phone that looks like a smooth gradient with no noise.

shannifin
0 replies
13h33m

Yeah, no Android Chrome support for something in the code...

bufferoverflow
0 replies
18h0m

Same here. I am on Android Chrome.

globular-toast
1 replies
22h2m

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
0 replies
21h59m

They look almost identical to me in Fx and Chrome. Safari on the other hand...

rpigab
0 replies
22h7m

I was wondering if it would be wise and feasible to add WebGL shaders over SVGs?

pdn1
0 replies
20h59m

Gradient.

nektro
0 replies
5h26m

i believe this design style came out of https://fluent2.microsoft.design/

j0hnyl
0 replies
2h36m

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

geokon
0 replies
14h27m

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)

gatkinso
0 replies
20h4m

Really excellent work

chrismorgan
0 replies
19h46m

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
0 replies
18h52m

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.

RugnirViking
0 replies
6h59m

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

FrostKiwi
0 replies
16h13m

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.