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

Posted by visiwig 17 hours ago

Show HN: I built 48 lightweight SVG backgrounds you can copy/paste(www.svgbackgrounds.com)

259 points | 52 comments

Frannky 10 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

lukan 1 hour ago||

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?

postsantum 2 hours ago|||

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

visiwig 4 hours ago|||

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

oniony 12 minutes ago||

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

j45 9 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 10 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

mikodin 6 hours ago||

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

wackget 7 hours 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 5 hours 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.

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

lelanthran 4 hours ago|||

> 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

visiwig 5 hours ago||

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.

hju22_-3 12 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 10 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!

visiwig 5 hours ago||

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.

karlshea 6 hours 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.

visiwig 4 hours ago|

You're welcome. Glad you found something useful!

gerdesj 9 hours ago||

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

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

yesthisiswes 9 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 5 hours ago|

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.

rcarmo 1 hour ago||

These are pretty nice, congrats

throwaway2046 12 hours ago|

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

visiwig 4 hours ago|

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!

More comments...