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.<p>The specific thing is at <a href="https://www.einarmagnus.net/pages/logo" rel="nofollow noreferrer">https://www.einarmagnus.net/pages/logo</a>
I do my best to detect safari with javascript and activate the SVG version and disable the css version.<p>Background on the "recursive yin yang" is here: <a href="https://einarmagnus.net/blog/2020/01/22/finding-the-logo" rel="nofollow noreferrer">https://einarmagnus.net/blog/2020/01/22/finding-the-logo</a><p>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?
> 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<p>The term the author is looking for is "dithering". CSS-Tricks explains this on their page "Grainy Gradients" using the same technique:<p><a href="https://css-tricks.com/grainy-gradients/" rel="nofollow noreferrer">https://css-tricks.com/grainy-gradients/</a><p>There's also a decent alternative to doing this with CSS, though it's applied to the entire image:<p><a href="https://github.com/tomren1/dither-with-css">https://github.com/tomren1/dither-with-css</a>
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!<p>I confess to finding the examples on this page quite appealing, amidst all the digital sterility.
Does anyone have any resource on which features are broken across implementations? How to stay sane with SVG?<p>I recently made the mistake of making a complex conference poster using SVG. It now renders different in every browser and program<p><a href="https://kxygk.github.io/imergination/" rel="nofollow noreferrer">https://kxygk.github.io/imergination/</a><p>In making the graphic I noticed:<p>- 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<p>- Webbrowsers randomly and will refuse to display embedded/linked image b/c of "security"<p>- Ex: in the above link, if you try to open the SVG in a separate tab it won't display correctly: <a href="https://raw.githubusercontent.com/wiki/kxygk/imergination/agu2023-poster.svg" rel="nofollow noreferrer">https://raw.githubusercontent.com/wiki/kxygk/imergination/ag...</a><p>- It was basically impossible to turn a complex SVG into a PDF without inconsistencies and/or running out of RAM<p>- Every SVG-to-PDF converter gives different results<p>- 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)
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.<p>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!
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.<p>[1] <a href="https://apefest.com/" rel="nofollow noreferrer">https://apefest.com/</a><p>[2] <a href="https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png" rel="nofollow noreferrer">https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...</a>
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.
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 <i>Aladdin (1992)</i> for the scene where they escape from the Cave of Wonders.
I like the effect, but is there a way to make it independent of the zoom level?<p>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.
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.<p>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.
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.<p>[0] <a href="https://danielimmke.github.io/noisy-shapes/" rel="nofollow noreferrer">https://danielimmke.github.io/noisy-shapes/</a>
Early versions of Trianglify supported noise addition using feTurbulence but I ultimately removed it because of some of the rendering inconsistencies mentioned in this thread, alongside performance issues on certain platforms (you would think that generating 2d monochrome noise would be pretty cheap in this day and age, but it must be part of the SVG stack that never saw much optimization because it would absolutely lock up rendering for several hundred milliseconds when applied to even moderately sized viewports).<p>Of course, this was all back in ~2015 so the landscape has definitely improved, but not quite to the point where I would consider adding support back in.
Reminder that art is cyclic. This reminds me of the Memphis airbrushed geometric art from the 80s.<p>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.
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.
"It’s not perfect, and notably renders differently in Safari than other browsers but it achieves what I set out to accomplish."<p>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.
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!
i believe this design style came out of <a href="https://fluent2.microsoft.design/" rel="nofollow noreferrer">https://fluent2.microsoft.design/</a>
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