search

catchspider2002 / svelte-svg-patterns

Create seamless patterns in SVG to use as website backgrounds, header images, stationery design and package design
https://pattern.monster
MIT License
592 stars 39 forks source link

Are patterns seamless? #31

Open Anax7 opened 2 years ago

Anax7 commented 2 years ago

Hi guys, I have the feeling that the .png patterns I download (1024 x 1024) should be seamless but they are not. Am I doing something wrong or that's just the way it is?

Is there a certain size or zoom level that can only make them seamless?

Thanks

hilarygmt commented 2 years ago

I've noticed this today as well, I downloaded 3000 x 3000 and it wasn't seamless, nor was the standard download size seamless

My2989 commented 2 years ago

This still seems to be the case as I cannot get it to download seamless patterns , only a block with a small black square. I have tried all configurations. Please fix this problem.

Thanks.

yuhe0925 commented 1 year ago

one for seamless, or maybe allow input a float zoom value

Thomashighbaugh commented 1 year ago

While I might be wrong as I haven't used rollup or svelte personally, it seems certain elements of this site are not present in this repo (which I understand might be on purpose as well and so I am not going to write a how-to guide per se) but to get the pattern to tile to a desired size and with desired colors locally, you have to download the SVG file and modify the value of the <svg> element's height and width attributes (which are set to 100 whereas the <path> element is set to 100% so make those the same) as well as the fill attributes of any <path> elements and the final fill being the background color. Then you can tile and convert the svg using imagemagick locally and should be good to go.

Yes, that means opening the SVG file in a text editor to do that, don't know if Windows will let you do that since I don't use it or macOS but works fine for me on Linux.

bschlagel commented 3 months ago

Seeing this issue as well, the default png is not tileable. It seems the dimensions to properly tile are different for each pattern. What I found to work:

Download the svg, check the dimensions, and multiple in each dimension by 2 (because of the transform: scale(2) applied), then enter those dimensions for the png download, and the resulting image should tile properly!