Show HN: I built 48 lightweight SVG backgrounds you can copy/paste

3/19/2026 at 2:26:12 AM

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.

by wackget

3/19/2026 at 3:52:33 AM

Solid point, I used to do this, and it wouldn't be hard to go back or add a show code button so users can copy the CSS as text.

by visiwig

3/18/2026 at 11:15:33 PM

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.

by BoppreH

3/18/2026 at 11:23:55 PM

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.

by echoangle

3/18/2026 at 11:26:50 PM

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.

by BoppreH

3/19/2026 at 1:53:48 PM

I think that keeping it fixed on scrolling and giving it low saturation should be enough to keep them from being distracting. And obviously, no animations, although a really slow one might work.

by dietr1ch

3/19/2026 at 4:59:58 AM

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

Move the sliders

by lelanthran

3/19/2026 at 3:59:34 AM

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.

by visiwig

3/19/2026 at 1:48:22 PM

firefox (148.0.2) on linux, the preview for me is not working

tried them on chrome, it works fine, nice work

by sickmartian

3/18/2026 at 9:10:23 PM

The notice about having "access" to the backgrounds is sticky, and takes up one third of the screen on mobile with no way to remove it . . . Why?

by hju22_-3

3/18/2026 at 10:41:45 PM

You have access. Enjoy!

Edit: upon further investigation, access isn't something that's just thrown around willy nilly! It usually goes for $120/yr!

by andai

3/19/2026 at 3:56:09 AM

Fair point. Once you click a thumb to preview the button, it becomes the UI to manipulate the backgrounds. I'll take a look and rethink the setup.

by visiwig

3/19/2026 at 12:00:44 AM

I find it odd that there's a custom of blurring or obscuring exactly the thing I'm interested in when I show interest in it by mousing over it.

by jjwiseman

3/19/2026 at 4:02:11 PM

Fair, I was fine going this direction because you're a click a way from get the full view and with the hover there isn't much more "preview" to show. My number one priority with the hover was making it obvious the given thumb is interactive.

by visiwig

3/19/2026 at 10:53:25 AM

I like your interface for switching between the backgrounds and having a small panel to tweak the parameters. I played around with procedural patterns using SVG/canvas/webgl a while back and this makes me feel like re-packaging the way it's represented.

by dirkc

3/19/2026 at 3:56:09 PM

Thanks, I've designed a few UIs for manipulating graphics and spent a few tries iterating and improving this one in particular. There was a need to show as much background as possible, sometimes the limitations lead to some creative choices. I'm quite pleased how it came out myself.

by visiwig

3/18/2026 at 8:39:10 PM

These are beautiful, thank you for sharing. I really like the one with the triangles, was it inspired by Rule 30?

https://en.wikipedia.org/wiki/Rule_30

by throwaway2046

3/19/2026 at 4:57:20 AM

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!

by visiwig

3/19/2026 at 12:11:34 AM

Not one of these efforts emulate <blink />. I want my money back.

by gerdesj

3/19/2026 at 3:20:21 AM

Hey thanks so much! I actually found your site a bit over a year ago while I was redoing my portfolio and used one for my header.

by karlshea

3/19/2026 at 4:58:55 AM

You're welcome. Glad you found something useful!

by visiwig

3/19/2026 at 12:05:43 AM

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?

by yesthisiswes

3/19/2026 at 4:12:08 AM

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.

by visiwig

3/18/2026 at 3:50:44 PM

Each one can be copied as inline SVG or CSS using the background-image property with a data URI. Most are under 1KB.

by visiwig

3/19/2026 at 1:10:18 AM

it's great work man - been using your backgrounds for long long time now!

by democracy

3/19/2026 at 4:51:14 AM

Much appreciated, always nice to hear that :)

by visiwig

3/19/2026 at 4:44:15 AM

Hmm, the parabolic ones seem to be broken? Both on FF and Chromium, they just display as an outline of a single shape on a black background.

by ksymph

3/19/2026 at 4:56:30 AM

> Hmm, the parabolic ones seem to be broken? Both on FF and Chromium, they just display as an outline of a single shape on a black background.

Move the sliders.

by lelanthran

3/19/2026 at 1:55:28 PM

Whoopsie, thanks

by ksymph

3/18/2026 at 9:35:15 PM

This is very cool but hasn’t it been around for like a decade?

by aerhardt

3/19/2026 at 4:16:04 AM

Good memory. I launched in 2018 (8 years ago) and have been adding more graphics over the years -- doubling this specific collection / freebies.

by visiwig

3/19/2026 at 2:08:27 PM

FYI - the previews do not work if you have the Dark Reader plugin enabled in your browser.

by shellerik

3/18/2026 at 7:24:46 PM

This rocks. Thank you!

by dormento

3/18/2026 at 7:32:56 PM

Glad you think so, you're welcome, enjoy!

by visiwig

3/19/2026 at 7:59:50 AM

These are pretty nice, congrats

by rcarmo

3/19/2026 at 3:18:50 PM

Thank you!

by visiwig

3/18/2026 at 10:12:06 PM

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!

by pseudosavant

3/19/2026 at 4:18:19 AM

Thanks for the kind words! I've played around a lot with SVG and love how you can change various attributes to achieve cool effects.

by visiwig

3/18/2026 at 10:33:40 PM

This is top notch, great work!

by thekevan

3/19/2026 at 4:16:32 AM

Hey thanks!

by visiwig

3/18/2026 at 7:38:42 PM

Great idea man, must be pulling in some good SEO traffic as well.

by dylanhouli

3/18/2026 at 11:33:30 PM

Like this user has a comment history of hyping show HN

by Frannky

3/19/2026 at 3:45:26 AM

I mean isn't that what show HN is for? Plus wasn't just hype, I was generally interested in getting more info on the SEO side of this project.

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.

by dylanhouli

3/18/2026 at 7:54:12 PM

Yes, I was lucky enough to find a keyword domain that was available. Would recommend :)

by visiwig

3/19/2026 at 12:38:38 PM

i did not know that i needed this until now

by termwatch

3/19/2026 at 4:02:36 PM

cool, hope you find something useful!

by visiwig

3/18/2026 at 3:58:40 PM

What's the license?

by starkparker

3/18/2026 at 4:18:52 PM

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.

by visiwig

3/18/2026 at 10:34:57 PM

this is exactly what i needed

by shah4as1

3/19/2026 at 4:18:37 AM

Glad I shared at the right time :)

by visiwig

3/19/2026 at 10:43:12 AM

comments ...

by lakpahana

3/18/2026 at 11:09:15 PM

What is your authoring tool for SVG?

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.

by Theodores

3/19/2026 at 4:27:49 AM

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.

by visiwig

3/20/2026 at 3:14:58 PM

Have you tried the Jetbrains tools? The free one - WebStorm - comes with live preview.

Nowadays I put my SVG for icons in CSS as pseudocode elements. This means you can't 'use' or 'currentColor', but I am okay with that for icons.

https://en.wikipedia.org/wiki/Lea_Verou

Lea Verou got me started on this particular technique, the gotcha is that you have to escape the hash characters with %023. Her presentations can be found on Youtube, and Lea also has a fab website.

by Theodores

3/18/2026 at 11:11:18 PM

I am very confused by the comments, they seem too excited for this... Are they real or paid bots? If they are real, kudos to OP

by Frannky

3/19/2026 at 8:03:22 AM

They all seem to come from quite old HN profiles, though. So if someone managed to overtake old HN accounts for manipulation .. I would assume it would be for a more lucrative target?

by lukan

3/19/2026 at 4:48:01 AM

Hey thanks, I didn't pay for bots, unsure how to prove that though.

by visiwig

3/19/2026 at 9:19:13 AM

Your bank statements for the last six months should be sufficient.

by oniony

3/19/2026 at 7:23:48 AM

I wish I was able to be excited over svg backgrounds. How different life would be..

by postsantum

3/19/2026 at 12:23:17 AM

There’s likely folks who discovered to that svgs could do many amazing things, except the tooling didn’t seem to be readily available.

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.

by j45

3/19/2026 at 11:26:00 AM

This one is quite good. The author is known, here fielding questions, and the project is like ten years old. If there are bots, I really don’t think they’re coordinated in any way with the OP, only coordinated in the usual “spam HN to get karma” sort of way.

by ohyoutravel

3/19/2026 at 2:42:10 AM

Unclear but I will say upon opening the site I was sparked with joy and excitement to use them

by mikodin

3/19/2026 at 11:13:48 AM

Your behavior makes HN worse the same way AI bots do it

by owebmaster

3/19/2026 at 11:22:26 AM

If there’s a scale of “making HN worse,” I’m not sure genuine human skepticism is on it. LLM generated walls of text and garbage Show HN posts sure are at the top though!

by ohyoutravel

3/18/2026 at 11:14:33 PM

It may also be that I am just comment AI paranoid, but yeah, I find myself a lot guessing if there's a person behind a comment or not

by Frannky

3/19/2026 at 9:48:15 AM

Yes we are all paid bots, thanks for your valuable input, chump

by democracy

3/19/2026 at 12:01:48 PM

[dead]

by martinvalchev

3/19/2026 at 9:08:53 PM

[dead]

by metacapuche1356

3/19/2026 at 3:14:50 PM

[dead]

by Samlion

3/19/2026 at 12:32:23 AM

[dead]

by decker502

3/19/2026 at 5:08:38 AM

[dead]

by 3duardol1m455

3/19/2026 at 12:41:19 AM

[dead]

by realaliarain74

3/18/2026 at 9:25:04 PM

[flagged]

by HalawehMohann49

3/19/2026 at 1:10:53 AM

[flagged]

by AbrarTheCrypt34

3/19/2026 at 1:30:40 AM

Tell me more.

by tclancy