Recommendation for background svg patterns

I’m looking for some background patterns to use on a site. All the things I’ve come up with on my own look like trash. It’s for a guy that does welding work but looking up metal textures felt a little too on the nose (or just didn’t look good).

Anyone have a good tool/website? I just want something subtle that can add a bit of texture to a section / footer.

Not svg, but this is where I get some css backgrounds.

They are maybe not exactly macho welder type though!

1 Like

Thanks. There’s a couple here that might fit actually.

This CSS one is good:

1 Like

really good:
https://www.svgbackgrounds.com

1 Like

I found this one in my bookmarks:
https://www.svgbackgrounds.com

These are perfect, thanks to you both.

Absolutely awesome: https://patterninja.com/
(But you need Chrome to use the tool)

1 Like

This could come in handy to covert svgs into background CSS to aid with selecting suitable colours or patterns, when creating a BG pattern.

For a live site it would be better to use an SVG in resources or warehoused as Tav wisely points out further down.

Personally, I think it is preferable to load the SVG as an image if you are going to do that. There seems very little point to strip the SVG tag out of an exported file, only to add it back via a data tag.

It is a load of extra work and the advantage of being able to style the inner SVG tags is lost. so you might as well load it as an image (which is also likely to behave in a much more responsive manner if the .svg is loaded in an image or picture tag via warehousing or resources).

I find it useful to past SVG patterns into stacks like the Source Container Base with Custom CSS, so that the stack can saved as a partial, template, etc., without a dependancy on a resources or warehoused SVG. It can sometimes also be quicker and easier to edit the Custom CSS than edit an external SVG.

Just remember that base64’ing anything like a normal SVG (not that simple example in codepen) will balloon its size.
That, along with the less responsive nature seems a very high price to pay for a RW specific convenience.

Good points. I use it during development to chose patterns and select colours and the way I often work, is to setup multiple Bases and cycle through them, to hone in on what Im looking for. When done, I will always use a warehoused SVG or PNG or whatever is smallest.

1 Like

I understand, I was just conscious that this was a public thread entitled “recommendation…” so I thought I should caveat it.

1 Like