6 ms·

SVG Backgrounds

297 points by beauHD 4y ago

swyx 4y ago
i collect these for fun! more here: https://github.com/sw-yx/spark-joy/blob/master/README.md#background-patterns https://github.com/sw-yx/spark-joy/blob/master/README.md#bac...
- me_bx 4y ago
  Neat! Here's one more: https://www.patterncooler.com/ https://www.patterncooler.com/ (by Harvey Rayner, who happens to be the author of the SVG logo).
- ThinkBeat 4y ago
  That is a great list. Thank you so much. I also love that it is on one page :)
  - swyx 4y ago
    haha yeah the github readme is a bit unwieldy at this point and ive been tempted to break it out
- ArcaneHammer 4y ago
  Another one (yea I made it): https://bgjolt.com https://bgjolt.com
dagorenouf 4y ago
Very cool work
RaiyanYahya 4y ago
Quite cool!
MattDemers 4y ago
This reminds me a lot of TransparentTextures.com; thanks!
crazygringo 4y ago
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?
- bawolff 4y ago
  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.
- karlshea 4y ago
  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.
  - DaiPlusPlus 4y ago
    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…
    - karlshea 4y ago
      That's hilarious, I guess if it works...
    - crazygringo 4y ago
      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!
worldsayshi 4y ago
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.
tanng 4y ago
Bookmarked, for a developer who doesn't know how to design like me. These kinds of resource is really matter.
chaychoong 4y ago
A similar project by the Tailwind team: https://heropatterns.com/ https://heropatterns.com/ though it's not customisable
gareve 4y ago
This seems very useful, but the subscription model irks me a bit.
- londons_explore 4y ago
  Looks free with attribution to me... And that attribution can be just a comment in the source code, even for commercial use.
sinoue 4y ago
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.
quartz 4y ago
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 https://imgur.com/a/wxs4qjd
- visiwig 4y ago
  Thanks for reporting the bug Quartz. I'll have to look into this.
nr2x 4y ago
Cool idea, but most of these patterns remind me of socks.
- prmoustache 4y ago
  That is because your socks mimick actual real wallpapers, when it was still fashionable to have those in your house.
- amelius 4y ago
  Except socks are more interesting because the manifold isn't flat.
kuon 4y ago
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.
- deleted 4y ago
  [deleted]
carlosjobim 4y ago
What's so special about it? Background images and textures have worked in browsers for decades.
ThinkBeat 4y ago
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.
- napolux 4y ago
  lol another microsaas entrepreneur
- HnUser12 4y ago
  $15 feels like a lot. However, Looks like it’s free with attribution so I can live with that.
- cunningfatalist 4y ago
  Yes, $15/month is a little steep. SVG backgrounds are nice, but who needs so many for so much money...?
- visiwig 4y ago
  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-priced-as-a-subscription-service/ https://www.svgbackgrounds.com/why-our-design-assets-are-pri...
  - daveidol 4y ago
    What happens if your subscription ends? Do you lose the rights to the backgrounds you’ve already used?
    - visiwig 4y ago
      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.
samwestdev 4y ago
How would you go and make a custom svg background with something like, say, Inkscape?
- tmountain 4y ago
  https://2dgameartguru.com/creating-seamless-patterns-for-tileable-textures-inkscape/ https://2dgameartguru.com/creating-seamless-patterns-for-til...
clocker 4y ago
Thanks for Awesome backgrounds! Sorry for the shameless plugin, but I used couple of your backgrounds in my game https://www.squashbyte.com/ https://www.squashbyte.com/
dna_polymerase 4y ago
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.
- visiwig 4y ago
  "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-priced-as-a-subscription-service/ https://www.svgbackgrounds.com/why-our-design-assets-are-pri...
jokethrowaway 4y ago
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
- visiwig 4y ago
  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?
GiffertonThe3rd 4y ago
These things are like crack(I assume)!!

297 points by beauHD 4y ago

swyx 4y ago

i collect these for fun! more here: https://github.com/sw-yx/spark-joy/blob/master/README.md#background-patterns https://github.com/sw-yx/spark-joy/blob/master/README.md#bac...

me_bx 4y ago
Neat! Here's one more: https://www.patterncooler.com/ https://www.patterncooler.com/ (by Harvey Rayner, who happens to be the author of the SVG logo).
ThinkBeat 4y ago
That is a great list. Thank you so much. I also love that it is on one page :)
- swyx 4y ago
  haha yeah the github readme is a bit unwieldy at this point and ive been tempted to break it out
ArcaneHammer 4y ago
Another one (yea I made it): https://bgjolt.com https://bgjolt.com

dagorenouf 4y ago

Very cool work

RaiyanYahya 4y ago

Quite cool!

MattDemers 4y ago

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

crazygringo 4y ago

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?

bawolff 4y ago
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.
karlshea 4y ago
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.
- DaiPlusPlus 4y ago
  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…
  - karlshea 4y ago
    That's hilarious, I guess if it works...
  - crazygringo 4y ago
    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!

worldsayshi 4y ago

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.

tanng 4y ago

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

chaychoong 4y ago

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

gareve 4y ago

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

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

sinoue 4y ago

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.

quartz 4y ago

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 https://imgur.com/a/wxs4qjd

visiwig 4y ago
Thanks for reporting the bug Quartz. I'll have to look into this.

nr2x 4y ago

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

prmoustache 4y ago
That is because your socks mimick actual real wallpapers, when it was still fashionable to have those in your house.
amelius 4y ago
Except socks are more interesting because the manifold isn't flat.

kuon 4y ago

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.

deleted 4y ago
[deleted]

carlosjobim 4y ago

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

ThinkBeat 4y ago

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.

napolux 4y ago
lol another microsaas entrepreneur
HnUser12 4y ago
$15 feels like a lot. However, Looks like it’s free with attribution so I can live with that.
cunningfatalist 4y ago
Yes, $15/month is a little steep. SVG backgrounds are nice, but who needs so many for so much money...?
visiwig 4y ago
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-priced-as-a-subscription-service/ https://www.svgbackgrounds.com/why-our-design-assets-are-pri...
- daveidol 4y ago
  What happens if your subscription ends? Do you lose the rights to the backgrounds you’ve already used?
  - visiwig 4y ago
    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.

samwestdev 4y ago

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

tmountain 4y ago
https://2dgameartguru.com/creating-seamless-patterns-for-tileable-textures-inkscape/ https://2dgameartguru.com/creating-seamless-patterns-for-til...

clocker 4y ago

Thanks for Awesome backgrounds! Sorry for the shameless plugin, but I used couple of your backgrounds in my game https://www.squashbyte.com/ https://www.squashbyte.com/

dna_polymerase 4y ago

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.

visiwig 4y ago
"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-priced-as-a-subscription-service/ https://www.svgbackgrounds.com/why-our-design-assets-are-pri...

jokethrowaway 4y ago

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

visiwig 4y ago
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?

GiffertonThe3rd 4y ago

These things are like crack(I assume)!!