Search:

Gary, you've clearly put a hex on yourself.

When you do your slicing, do you put a No Fill , No Line with box on top of your pattern and then Combine Shapes > Slice?
This works well when the...

Gary, you might get fewer splits with this pattern:

130370

Acorn

Gary, just for you - they follow you everywhere:

130325

Acorn

A simple but impressive gold pattern:

130324

Acorn

Here is one of Xara's reworked:

130315

130317
This Xara has the Xara offering set up as the backdrop. This 3.2kB.
You need to link the SVG in with Placeholder > Replace with graphic file;...

I called this one Quilting but others might think XPM:

130313

Acorn

More on the confectionery front:

130306

Acorn

here's a little more organic:

130305

Acorn

Interesting that I picked a similar shaping and made:

130302

Acorn

In this backdrop, I created a very simple repeat and additionally added a CSS radial repeating gradient:

130292

130294 - as ever, unpack this ZIP and Preview the XAR.

Acorn

Another

130283

Unpack this ZIP: 130285 and Preview the XAR.

130286

Acorn

Here is a seamless background not using any image at all: 130281.

The original design is https://projects.verou.me/css3patterns/#pyramid.
I modified the CSS to make the sizing adjustable; just...

Gary, the blocks aligned top-left to bottom right ought to have a shadow cast over them as well.

Acorn

Another simpler one:

130265

Acorn

For interest, I got the shadows wrong in this one:
130264

Acorn

Gary, the second SVG was only 34kB so it beats the PNG.
I only mentioned it as it is easy to slice out a pattern the wrong way.

Acorn

Gary, I achieved what I wanted with this one but at a cost.
The SVG is massive when you convert Lines to Shapes, which I thought might lead to a better defined shape 1.4MB versus 34kB:

130256
...

Egg, an approach would be to build the SVG backdrop as totally static.
Next you would code for the pointer position and overlay a 3D transform animation over one of three possible areas that are...

Here is a drop-dead simple one, inspired from Egg's CodePen link.

130250



130253

Design file & SVG ZIPped: 130254

Gary, nice, it slices nicley.

Acorn

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

Gary, I had to tweak your design.

The basic pattern unit is:
130186
I made this with 4px, 64px & 4px boxes, grouped and Skewed to give sharp edges.
Copies were coloured and rotated.

The...

Gary, just put index.htm as the link.

Acorn

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

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