-
3 Attachment(s)
Seamless Tiling Background Challenge
Acorn and the other Gary (Initiostar) have been contributing to a post on creating a better tiling background using SVG (Scalable Vector Graphics, the new Flash). https://www.talkgraphics.com/showthread.php?85262-Better-Tiling-Backgrounds
A seamless tiling background is an image that when duplicated and placed next to and above the original image creates a seamless pattern.
I am old and intractable and it took me a while to figure out what they were talking about. Go to the post for the background info.
So as a challenge, I am going to post some of the patterns I came up with and the PNG and SVG files I used to tile.
Let's see yours.
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
Spirals - Transparent background over a specified solid color.
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
Woven Cane
OK Now it's your turn. :)
-
1 Attachment(s)
Re: Seamless Tiling Background Challenge
A small embellishment to GaryP's challenge.
Here is a template, which you can use to design and test your seamless tiling.
It only offers the steps to go from design to presentation for the Challenge but enough to take you into building usable seamless patterns for your websites.
Attachment 130106
Even if you cannot create an SVG, do submit your PNG version as even that can be used in a tiling; SVG is just making it crisper, smaller and faster to present.
Acorn
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
I seem to be in a competition with myself here. No takers?
This one is called Cubes
-
2 Attachment(s)
Re: Seamless Tiling Background Challenge
Gary, a modest go from me:
Attachment 130129
Acorn
-
Re: Seamless Tiling Background Challenge
-
Re: Seamless Tiling Background Challenge
Went for a simple idea to get a better understanding: https://initiostar.co.uk/demo/svgBg/
-
Re: Seamless Tiling Background Challenge
Very nice, Gary. And a nice surprise.
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
There is certainly an art involved in creating a new design. Yet to find it!
Attachment 130138
Attachment 130139
To re-link (bad pun), in the design file, select the Placeholder image then Placeholder > Replace with graphic file and Browse to the downloaded rings.svg.
In the CSV code, I colour-matched to the design page backdrop.
I added a simple animation just to see what it could do.
Acorn
-
1 Attachment(s)
Re: Seamless Tiling Background Challenge
Acorn - The rings need to go over and under, no?
-
Re: Seamless Tiling Background Challenge
Quote:
Originally Posted by
gwpriester
Acorn - The rings need to go over and under, no?
Gary, no. I did it that way on purpose. It's not supposed to be a chain mail, the breaks were meant to jar.
Acorn
-
Re: Seamless Tiling Background Challenge
Quote:
Originally Posted by
Initiostar
that is an excellent example of streaming gary, love it ;)
-
1 Attachment(s)
Re: Seamless Tiling Background Challenge
OK here is mine much simpler than the others, sorry
Attachment 130148
-
Re: Seamless Tiling Background Challenge
Quote:
OK here is mine much simpler than the others, sorry
Works for me Larry.
-
Re: Seamless Tiling Background Challenge
-
1 Attachment(s)
Re: Seamless Tiling Background Challenge
Attachment 130160
Another one from a shape created a while back.
Gary
-
Re: Seamless Tiling Background Challenge
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
Circular pattern. I messed up a bit with the over and under but maybe no one will notice. http://gwpriester.xara.hosting/circular-pattern/
-
Re: Seamless Tiling Background Challenge
Quote:
Originally Posted by
gwpriester
I noticed bot had to look closely to find the mess-up after your comment, otherwise I wouldn't have.
-
2 Attachment(s)
Re: Seamless Tiling Background Challenge
-
Re: Seamless Tiling Background Challenge
Here's a rework of a design with a little therapeutic twist: https://initiostar.co.uk/demo/svgSea/ and the one posted in the Challenge: https://initiostar.co.uk/demo/svgBg/
Interesting sound effect if you open the first and the the second.
Gary
-
Re: Seamless Tiling Background Challenge
Yes, the double sound effects are interesting Gary.
I find your first svgSea file very slow & buffery (Is that a word?) when opening in FF. Fine in Edge.
-
Re: Seamless Tiling Background Challenge
Evening Egg, it is a UHD 4K format which is an overkill, but correct it does stall on first load. Must do better next time :D
-
Re: Seamless Tiling Background Challenge
No problem, just thought I'd point it out Gary as FF often messes up what works fine on other browsers ;-)
-
Re: Seamless Tiling Background Challenge
Egg - It will take me half the night to get that brilliant magenta out of my brain. Other Gary, another good functional example.
-
Re: Seamless Tiling Background Challenge
Just to save your eyes Gary:
LINK
-
Re: Seamless Tiling Background Challenge
Quote:
Originally Posted by
Initiostar
Love it Gary.
-
Re: Seamless Tiling Background Challenge
Quote:
Originally Posted by
Egg Bramhill
Just to save your eyes Gary:
LINK
Egg, sonmewhere the SVG got lost; I see a very large PNG.
Acorn
-
1 Attachment(s)
Re: Seamless Tiling Background Challenge
Not really the Challenge, more a simple guide on how to create any of the seven frieze types.
Essentially, all we can produce with SVG are touching rectangles and so are using the 'hop' frieze, the first page: Attachment 130181
Unzip to a local folder and run the XAR file; the SVGs are linked to it already for Preview.
You can still create complex patterns inside a box such that you can reproduce the 17 wallpaper patterns that exist on a flat surface.
The complication is the art of slicing away to get down to the fundamental repeating block. Slicking through a shape with a Line width does not delete that line along the cut.
I find converting Lines to shapes works with a 0px Line width.
Acorn
-
Re: Seamless Tiling Background Challenge
Quote:
Egg, somewhere the SVG got lost; I see a very large PNG.
Indeed you did Acorn. For this one I used png as I'm finding many issues with applying svg fills.The earlier magenta image used an SVG but I'm having BIG issues with sizing these svg's. They either create gaps vertically or horizontally on resizing the image. Not an issue with bitmap images however.
You can see this effect by opening LINK and using the browsers zoom function.
-
Re: Seamless Tiling Background Challenge
Quote:
Originally Posted by
Egg Bramhill
Indeed you did Acorn. For this one I used png as I'm finding many issues with applying svg fills.The earlier magenta image used an SVG but I'm having BIG issues with sizing these svg's. They either create gaps vertically or horizontally on resizing the image. Not an issue with bitmap images however.
You can see this effect by opening
LINK and using the browsers zoom function.
Egg, I see that happening.
Your SVG has a size of width="666.001" height="385.001".
I trimmed these to width="666" height="385" and the lines were much reduced.
I imported you SVG and back out again with XPro+ and got pt values instead of px!
Again, it was less noticeable. I didn't need the Units included.
Finally, I changed my version to 640x370 (both even) and it was all sweet.
Back to your slighty modified SVG.
I set background-size: 640px; in the CSS.
I found only one zoom setting where I had a horizontal line.
The issue is around the square root of 3.
You SVG needs to be in this ratio: https://www.talkgraphics.com/showthr...967#post638967.
With integer pixels the closest I can manage is 776 x 448. You can scale 50% to 388 x 224, another to 192 x 112 and another down to 96 x 56.
I tried again with a full 776 x 448 px rectangle and set the background-size: 192px.
All sweet.
Exact even pixels seems to be the way to go.
Acorn
-
2 Attachment(s)
Re: Seamless Tiling Background Challenge
Crosshatch
http://gwpriester.xara.hosting/cross...tern/index.htm
Also, how do I attach this script to the button?
<script>
<button onclick="location.reload();">Refresh Page</button>
</script>
I achieved this by linking to a duplicate page but I am sure there is a better way.
-
Re: Seamless Tiling Background Challenge
Quote:
Originally Posted by
gwpriester
Crosshatch
http://gwpriester.xara.hosting/cross...tern/index.htm
Also, how do I attach this script to the button?
<script>
<button onclick="location.reload();">Refresh Page</button>
</script>
I achieved this by linking to a duplicate page but I am sure there is a better way.
Gary, just put index.htm as the link.
Acorn
-
Re: Seamless Tiling Background Challenge
Quote:
Gary, just put index.htm as the link.
Isn't that the same as # ?
Apparently not. :)
-
3 Attachment(s)
Re: Seamless Tiling Background Challenge
Gary, I had to tweak your design.
The basic pattern unit is:
Attachment 130186
I made this with 4px, 64px & 4px boxes, grouped and Skewed to give sharp edges.
Copies were coloured and rotated.
The repeat can simply be slid in place across and down.
I centred the shapes so the inner empty hexagon and triangles were all balanced.
My design file is: Attachment 130187
The SVG as attached separately.
Acorn
-
Re: Seamless Tiling Background Challenge
I based by design on a hexagon which explains my pattern. Yours is better. That said, you had my pattern for a template. ;)