SVG Backgrounds | Hacker News Reader

SVG Backgrounds

svgbackgrounds.com

297 pointsbeauHD43 comments

Open articleView on HN

i collect these for fun!

more here: https://github.com/sw-yx/spark-joy/blob/master/README.md#bac...

Neat!

Here's one more: https://www.patterncooler.com/ (by Harvey Rayner, who happens to be the author of the SVG logo).

That is a great list. Thank you so much.

I also love that it is on one page :)

haha yeah the github readme is a bit unwieldy at this point and ive been tempted to break it out

Another one (yea I made it): https://bgjolt.com

I thought this was a bit of fun to look around until I saw the price.

$15/month with imminent price increases is far more than I would ever have expected. $15 per year perhaps.

lol another microsaas entrepreneur

$15 feels like a lot. However, Looks like it’s free with attribution so I can live with that.

Yes, $15/month is a little steep. SVG backgrounds are nice, but who needs so many for so much money...?

Fair enough, I understand not everyone will think the price is reasonable.

However, I'd point out that one single comparable image from iStock costs $12 to $33, while $15 with SVGBackgrounds.com will get you unlimited backgrounds for unlimited projects in a single month.

If you have one or two website projects in a given month and use a total of 2 or more backgrounds — you get better value.

PS: I built the site and all the backgrounds, here's an in-depth article on pricing that I wrote a while back: https://www.svgbackgrounds.com/why-our-design-assets-are-pri...

What happens if your subscription ends? Do you lose the rights to the backgrounds you’ve already used?

Nope, you don't lose the license.

Once your subscription ends, you can keep all the backgrounds you added in your projects, BUT you can't add new backgrounds to new projects.

This seems very useful, but the subscription model irks me a bit.

Looks free with attribution to me... And that attribution can be just a comment in the source code, even for commercial use.

The pricing is fundamentally wrong IMHO.

The first problem is: What happens if I stop subscribing. Can I still use the backgrounds I already installed? How often do I get updates? If I pay monthly, I want at least monthly updates.

I think you would be better off with a lifetime license or a more reasonable yearly rate. You also should advertise the update frequency more prominently.

Otherwise nice product. Good luck with sales I guess.

"Can I still use the backgrounds I already installed?"

— Yes, you just can't save/download backgrounds for future use.

"If I pay monthly, I want at least monthly updates."

— Great point and I'm trying to get better about this. The bulk of my income is from freelancing, but as SVG Backgrounds grows I'm carving out more time to make improvements and add new graphics. One day, I hope to be able to make the site my sole focus.

Pricing: If you're curious, I explained my choice in detail here: https://www.svgbackgrounds.com/why-our-design-assets-are-pri...

This is so cool.

I'm actually shocked I never thought of using SVG's for a background image. Only ever thought of them as foreground illustrations and icons.

Are there any gotchas to know? Any reason to use them as inline vs img vs background-image?

Which features work differ in inline vs <img> and css background. Mostly you cant run js or load external resources in your css background svg. Probably doesn't matter for this usecase.

If you want your site's CSS to influence anything inside the SVG (color, etc) you'd have to do it inline, but I'd always go for background-image first.

It can still be done with some JS trickery: set the SVG file as background-image as norms, this will be the fallback in CSS, then during page-load use JS to read that same then-loaded SVG file into an in-DOM (but hidden) SVG element so the var() properties get resolved, then re-serialise the SVG element with computed style properties and set that as the page background via a data: URI - or preferably: an ObjectURL - the downside to this approach is you’d have to re-run the code every time you want to update it, which won’t work well for pages that update var() properties at 60fps…

That's hilarious, I guess if it works...

I had no idea you could serialize an SVG with computed properties. Huh! Very clever.

That is a lot of trickery involved indeed, I applaud your ingenuity!

If its actually a background, then the CSS utilities around the background property will be quite useful.

In an img tag you get good control as well. But then it will behave like just another img.

Inline you get a full DOM, with all that is implied, so the most control.

Very cool!

Small bug report: on Safari 16.3 (18614.4.6.1.6) when you hover over one of the circles to pick a new background, during the animation the circle's interior extends outside the circle's border.

Gif: https://imgur.com/a/wxs4qjd

Thanks for reporting the bug Quartz. I'll have to look into this.

A similar project by the Tailwind team: https://heropatterns.com/ though it's not customisable

I remember on my Mac SE 30, I loved playing with BW patterns in super paint. MacOS also had desktop pattern selector IIRC. I miss pattern in design in general. I'm happy if it makes a comeback.

That's the kind of thing I'd pay 10$ one time to get. I'm certainly not paying a netflix subscription for 3 svg backgrounds

Sure, some only have a need for a background or two, others have ongoing needs.

In your case at $10 per image, wouldn't a $15/month subscription be a good value if you got 2+ images (a value of $20+) — assuming you cancel before being rebilled?

Or are you saying, regardless of value, having to cancel isn't worth the hassle?

You should team up with the Noun Project to make a SVG suite of products. They have a cool pricing model that shares profits with the artist.

Bookmarked, for a developer who doesn't know how to design like me. These kinds of resource is really matter.

Thanks for Awesome backgrounds! Sorry for the shameless plugin, but I used couple of your backgrounds in my game

https://www.squashbyte.com/

Cool idea, but most of these patterns remind me of socks.

That is because your socks mimick actual real wallpapers, when it was still fashionable to have those in your house.

Except socks are more interesting because the manifold isn't flat.

I'm confused. I assume that clicking the circles should replace the background? Doesn't seem to work on Firefox.

Edit: Ah, Dark Reader plugin messed it up.

How would you go and make a custom svg background with something like, say, Inkscape?

https://2dgameartguru.com/creating-seamless-patterns-for-til...

Quite cool!

This reminds me a lot of TransparentTextures.com; thanks!

These things are like crack(I assume)!!

Very cool work

What's so special about it? Background images and textures have worked in browsers for decades.

Reply on news.ycombinator.com