
Hero Patterns – A collection of SVG background patterns for your web projects - marvinpinto
http://www.heropatterns.com
======
mythz
Same UI designer is giving away quality SVG icons as well:
[http://www.zondicons.com/icons.html](http://www.zondicons.com/icons.html)

~~~
sjroot
Thank you for sharing! Is there any way to support these works?

~~~
dan1234
Yes, the designer is creating some SVG icons[0] which you can get a discount
on, if you sign up to the newsletter.

[0][http://www.heroicons.com](http://www.heroicons.com)

------
trishume
I wonder how different browsers rasterize tiling SVG backgrounds. Ideally they
should rasterize it once to a buffer and then just blit it a bunch of times.
But if any browser tries to rasterize it every repetition that's a ton of
vector drawing for some of those patterns and it may be hella slow on some
device/browser combinations.

It's not immediately clear that they would do the smart thing because most
times SVGs are rendered only once so you would want to render it directly.
It's only tiling backgrounds where this optimization makes sense. But I think
as a consequence of it being treated as an image in CSS rather than a DOM SVG
element it's quite likely most browsers do render it to a buffer first, not as
an optimization but just because they treat rasterizing an SVG just like
decoding a PNG.

If nobody has noticed these being super slow I guess browsers are doing the
smart thing.

~~~
qmarchi
On Chrome Mobile, it's just as speedy as any other website.

~~~
ReverseCold
Can you specify Android or iOS? Android chrome is vastly different.

------
rejschaap
Cool project. Did you consider adding a scale/zoom control? I think it would
be a nice feature.

~~~
nikkwong
+1 for zoom. The only other way to do it would be using pseudo elements and
scaling it—or something or other. But offering zoom on this site would be nice
:-)

------
codeisawesome
I can't explain why I absolutely love the _titles_ of the patterns. They're
deliciously predictable, but just slightly unpredictable.

------
stanislavb
Nice work. I will definitely use this website.

------
Gracana
Note that some high frequency patterns cause horrible flashes and flickers
when scrolling (or sometimes even when stationary) on some LCD monitors.

------
pen2l
Small suggestion: make the patterns bigger. Not many people do that, but it
can give pretty good results every now and then

~~~
ktRolster
A long time ago, I figured I'd save bandwidth by making the background image a
single pixel (don't ask why I didn't just set the background color, I don't
have a good reason). That was back in the days when web designers tried to
make their pages less than 15k.

The rendering of the image on the background in Netscape was so slow, you
could see it draw the lines across the screen.

~~~
detritus
:) I encountered that with 2x2 gifs, two diagonal black against two alpha, to
make a darkening half tone. Looked ok visually, but boy did it sieze browsers
up!

------
huula
Great work! Is it ok for commercial use?

~~~
AOsborn
Yes, license is CC BY-SA, [https://creativecommons.org/licenses/by-
sa/4.0/](https://creativecommons.org/licenses/by-sa/4.0/)

~~~
xkxx
> If you remix, transform, or build upon the material, you must distribute
> your contributions under the same license as the original.

> build upon the material

Is there clearly defined difference between "build upon the material" and
"using the material as part of your project"? Commercial use in most cases
involves not wanting to release your own project under CC BY-SA 4.0. Even
though it's possible to combine both (commercial use and CC BY-SA 4.0 for your
own product), it's highly unlikely.

~~~
djloche
Yes. Use is simply that. You use it and don't modify it.

If your 'use' is more than copy & paste, you've probably crossed the line into
the 'remix, transform, or build upon the material' line and need to distribute
your versions of these things under the same license.

This doesn't mean your entire product needs to be under the license, only the
derivative part(s).

------
mshenfield
Cool to see something built with Vue.js

