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?

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.

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.

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

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

Great stuff.

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.

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.

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

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.

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.

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

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

Reminds me of vintage travel poster art. Example:

https://www.graphicart-news.com/wp-content/uploads/2012/09/2...

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.

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

Google Images "dithering" for examples of how dithering looks.

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.

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

I confess to finding the examples on this page quite appealing, amidst all the digital sterility.

It’s not related to film grain (which is a byproduct of silver particles in celluloid).

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)

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!

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.

[1] https://apefest.com/

[2] https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...

It also has the advantage of looking mostly the same in every browser - the comments here report inconsistencies with the SVG method.

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

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.

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

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.

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.

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

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.

[0] https://danielimmke.github.io/noisy-shapes/

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.