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

193 pointsposted 12 hours ago
by visiwig

34 Comments

wackget

an hour ago

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.

visiwig

3 minutes ago

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.

Frannky

5 hours ago

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

mikodin

an hour ago

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

j45

4 hours ago

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.

Frannky

5 hours ago

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

karlshea

35 minutes ago

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.

hju22_-3

7 hours ago

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?

andai

5 hours ago

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!

BoppreH

5 hours ago

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.

echoangle

5 hours ago

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.

BoppreH

4 hours ago

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.

gerdesj

4 hours ago

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

yesthisiswes

4 hours ago

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?

visiwig

12 hours ago

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

jjwiseman

4 hours ago

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.

aerhardt

6 hours ago

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

dormento

9 hours ago

This rocks. Thank you!

visiwig

8 hours ago

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

democracy

3 hours ago

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

dylanhouli

8 hours ago

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

Frannky

4 hours ago

Like this user has a comment history of hyping show HN

dylanhouli

10 minutes ago

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.

visiwig

8 hours ago

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

thekevan

5 hours ago

This is top notch, great work!

pseudosavant

6 hours ago

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!

shah4as1

5 hours ago

this is exactly what i needed

starkparker

12 hours ago

What's the license?

visiwig

12 hours ago

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.

AbrarTheCrypt34

3 hours ago

saved for later. exactly the kind of deep dive i was looking for

Theodores

5 hours ago

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.