These are great. Please consider adding a visible <textarea> with the CSS instead of relying on "click to copy" buttons. For security reasons, some users/browsers disable access to the clipboard which means there's no fallback way to copy the CSS.
Those are excellent! The orange shingles are my favorite. Though I think some of them are not working on Firefox; the blue and green vortices are rendered as a single blue rectangle and a single green hexagon.
I wonder how people are using them in a way that is not distracting to the main content. I've found that high-frequency patterns (small details with sharp transitions) can be a bit distracting, but I haven't found a good solution that doesn't compromise the beauty of the backgrounds.
I think it’s kind of common to have the background for the whole document and then have an overlay with a solid color (and maybe less-than-100% opacity if you’re daring) on which the main content with all the text is shown. This works best for browser that are full screen on PC screens of course where you want to limit text width anyways. On mobile or narrow windows, you don’t have a lot of space to show the background.
Thanks. I'm already doing something similar, but I feel like the background that is visible on the sides is still somewhat distracting. Might be my imagination though.
> Though I think some of them are not working on Firefox; the blue and green vortices are rendered as a single blue rectangle and a single green hexagon.
I took a look at FireFox and I think it's working, but not obvious that you need to slide the top range slider for the full effect. It would look better if I reversed the effect, I'll have to rethink that.
These are awesome! I’d love to use some of these for my solitaire game.
Weird thing when I preview one of the backgrounds then scroll down the page on mobile the images disappear. I have to refresh the page to view all the backgrounds again after selecting one.
I wonder if you should add names for the patterns so we can pick favorites?
Hmmm, that doesn't sound right. Do you mind reaching out to me via the contact form and dropping any more details such as device/browser? BTW, each background does have name, but I hide that on mobile since real estate is limited.
No I've never heard about Rule 30, I would have been nervous to click that link if it wasn't leading to a Wikipedia article, phew, but the concept is quite cool and inspiring. Thanks for sharing that with me!
I'm a sucker for this kind of stuff, but I'm usually disappointed after clicking the link. These on the other hand are excellent, and that they have configurable options like stroke, color, etc is gravy on the top. Thanks for sharing!
The license can be found here: svgbackgrounds.com/license
Summary: You can use graphics in personal or commercial projects, you cannot use the graphics as the primary integrity of your product, you must provide attribution (svgbackgrounds.com/attribution)
And before anyone rips off my head, attribution can be placed inside commented out code, so it doesn't need to take away from your design.
The SVG code is well written. It is neither Adobe bloat-spam-slop and neither is it overly SVGOMG'd.
For picky SVG people you could have some easy way to present the code. Only a minority value quality SVG, artworkers do not look at SVG code and coders just see SVG as 'assets' from the artworker. SVG therefore has not evolved to a full art form.
Hey great eye. I generally design in Illustrator with a plugin by Astute graphics that allows me to reduce unnecessary anchor points, run the exported SVG through SVGOMG, and then spend solid time hand coding each background in VS Code with the SVG extension by Jock that let's me see a live preview. Then on the actual site the customizer script I wrote will catch some attributes that aren't needed and remove them, but it's far from perfect.
Now when I see someone build something working with SVG, I check it out to see how it might compare to another way of doing it.
I wonder how people are using them in a way that is not distracting to the main content. I've found that high-frequency patterns (small details with sharp transitions) can be a bit distracting, but I haven't found a good solution that doesn't compromise the beauty of the backgrounds.
Move the sliders
Edit: upon further investigation, access isn't something that's just thrown around willy nilly! It usually goes for $120/yr!
Weird thing when I preview one of the backgrounds then scroll down the page on mobile the images disappear. I have to refresh the page to view all the backgrounds again after selecting one.
I wonder if you should add names for the patterns so we can pick favorites?
Move the sliders.
https://en.wikipedia.org/wiki/Rule_30
I've had a lot of nice people try out my own projects and leave comments in the past and it meant a lot to me so I'm just trying to pass that forward.
Summary: You can use graphics in personal or commercial projects, you cannot use the graphics as the primary integrity of your product, you must provide attribution (svgbackgrounds.com/attribution)
And before anyone rips off my head, attribution can be placed inside commented out code, so it doesn't need to take away from your design.
The SVG code is well written. It is neither Adobe bloat-spam-slop and neither is it overly SVGOMG'd.
For picky SVG people you could have some easy way to present the code. Only a minority value quality SVG, artworkers do not look at SVG code and coders just see SVG as 'assets' from the artworker. SVG therefore has not evolved to a full art form.