Seamless Tiling Background Challenge

[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.

[Acorn]

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

[gwpriester]

Gary, just put index.htm as the link.

Isn't that the same as # ?

Apparently not.

[Acorn]

Gary, I had to tweak your design.

The basic pattern unit is:

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: SVG - Gary's Mesh.xar

The SVG as attached separately.

Acorn

[gwpriester]

I based by design on a hexagon which explains my pattern. Yours is better. That said, you had my pattern for a template.

[Egg Bramhill]

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.

Sorry Acorn, missed that post. I agree with what you're stating there, however I noticed the exported svg pixel sizes when opening in Inkscape. The cutting 'rectangle' within Xara states whole (integer) pixels but the export gives decimal place W x H. I've tried many methods to reduce this effect i.e. reducing the svg size in Inkscape to whole units an re-saving. but the incomplete tiling remains. I can reduce it but it's never perfect. Sometimes it is but often it's not.

I'll try your method of restricting the image to the square root of three but this is very restrictive. Just endevouring to get the 'cutting' rectangle above a vector shape is hit and miss re tiling. I can easily achieve it using png's but not simple at all using Xara generated svg's :-(

[ss-kalm]

Does it matter how it's created?

[gwpriester]

Nice one Keith.

Does it matter how it's created?

Not really but the point of the challenge was to use Acorn's method of an svg image which I was very reluctant at first to try. But it works and creates a truly scalable background that you can zoom in and out of.

[Acorn]

Does it matter how it's created?

Keith, to a certain extent, it does.
The key premise clearly has to be does it work for you.

The Challenge is trying to focus on two concepts: a canonical form and high fidelity.
Both contribute to making smaller image files.

In your case, the canonical for could be any 128 x 128 px overlap on top of your mesh as your pattern repeats at this interval.

These two PNGs can be used as examples:

or

In then picking Set as Pasteboard background, you get the same coverage as your Chain Link file.

Building either of these as vector shapes/glyphs and saving as a SVG delivers the high fidelity and scaling that makes them stand out.

Acorn