Trying to recreate this pattern

Hello all,

Hope you're having a great weekend.

I'm trying to recreate this pattern using vectors in Xara:

Attachment 132599

It's a seamless tiling pattern, so it can be placed next to itself in any direction and it will look continuous:

Attachment 132600

Now, this is how far I've got so far. I'm just using the circle tool, and arranging them one in front of the other:

Attachment 132601

Everything outside the box can be sliced off later on.

But my question is: does anyone have any ideas about how to do the curvy bit (marked in red), without having to draw it manually?

Attachment 132602

Thank you for your suggestions!

So this is what I end up with when tiling my pattern:

Attachment 132603

Ideally I would like the outer yellow ring to merge into the adjacent yellow, and the outer blue to merge into the adjacent blue.

Overlap your outer circles. Convert the circles to editable shapes. Then use the Shape Tool to Break the nodes and remove the overlapped segments.

Problem is the original repeating image has an issue. It's not square. So the outer circles don't match up in the vertical plane.

Because of the crossing point, you would have to individually craft darts at their intersection otherwise you get the following mishmash of overlaps:

Attachment 132606

I created a solid circle and then a blend to 2 px rings to get the spacing without edges which I intersected them.
I carved out a quarter circle of the rings and used this as my building block.
I built up a set of interlinking rings in blue, cone as yellow and displaced them.
The last bit was bringing rings forward or back.

In my approach I also need to put quarter circles underneath each block as at present you can see through the gaps.

Acorn

your first image [tile] tiles very well as shown in your second image [tile2] - so you should be able to recreate this

your issue is how to recreate this in vector, and you asked if the overlap would have to be drawn manually but that misses the point

the trick is in placing your concentric circles correctly which you have not done in tile5 - you have missed the symmetry: your tile5 is square whereas the tile you trying to recreate is not, it is taller than wide, so if you adjust the placement of the circles within that frame accordingly you shoud get it to work

cross posted acorn ;) not sure you need to do that

here is your yellow/blue circle overlain on the original white/green to give you an idea of the direction to go:

Attachment 132607

if it were me I would just redraw all the circles using the original as a template, and then, as you say, slice off the parts of the circles that lay outside the tile

Quote:

---

Originally Posted by jimduggan

So this is what I end up with when tiling my pattern:

Attachment 132603

Ideally I would like the outer yellow ring to merge into the adjacent yellow, and the outer blue to merge into the adjacent blue.

---

Quote:

---

Originally Posted by handrawn

cross posted acorn ;) not sure you need to do that

---

handrawn, i think you do if you want to match the OP's ask.

A better block shape is probably:

Attachment 132608

This should handle the overs and unders more cleanly.

Acorn

there is a tendancy to overthink here

there is a pattern that works

I would trace over the lines on this with vector -job done - right? if not what is wrong with that approach

sure you can play around with the examples, but having looked at it, I decided simply taking it from the top, afresh, was best....

Quote:

---

Originally Posted by handrawn

there is a tendancy to overthink here
there is a pattern that works
I would trace over the lines on this with vector -job done - right? if not what is wrong with that approach
sure you can play around with the examples, but having looked at it, I decided simply taking it from the top, afresh, was best....

---

handrawn, the pattern you have picked only blends the blue weave and omits the yellow, which is what the OP then asked for. I doubt if a trace could be especially accurate. I took it afresh y resolving the basic repeat block and then combining anew.

Horses for courses.

Acorn

sure there is often more than one way ;)

Here's the best I can achieve atm ;)

The tiling asked for is tricky.

I have reduced it to parts that should be easier to take in.

The basic shape I created is an axe head.
Made from two circles whose centres are top left and bottom right of the bounding box of a middle circle.

A second axe is clone, coloured and rotated 90 degrees to make the repeating pattern.
Each meeting point is four touching axe heads.

If your repeat this process but bring in the first two circles 20px in both X & Y directions.
The meeting point now has an almost square gap 20px x 20 px.

This gap can be fill with all yellow and you get a flow left up to right that cuts off the blue flow.
Make it instead blue and the flow goes right up to left, cutting the yellow flow.
You cannot have both. You could try alternating colours but any flow will always be truncated.

I have compromised by creating a dart intersection shown once from the four touching triangles.

How you create the rings is up to you but I made mine originally from a blend and avoided any line widths to produce a pure, seamless, repeating pattern that is all SVG.

Attachment 132621

Acorn

Thank you all for your ideas and suggestions!

I really appreciate it. It has given me a lot to think about.

I adopted Gary's suggestion of breaking at points, and managed to make this so far:

Attachment 132622

So I'm making progress!

However, as some of you have rightly pointed out, the original pattern is a little weird, and there doesn't seem to be a way to make the blue circles also merge into each-other nicely. I'm still scratching my head about it, and trying to figure out what I want to do.

I do like your interpretation though, Egg! I think in the end, I'll have to do a similar 'interpretation' if the original pattern doesn't come out right. In fact, the pattern is supposed to represent the rolling waves of the ocean (I'm planning to have the blue and yellow two different shades of the same colour).

Thank you handdrawn for your ideas and input. And thank you Acorn for your ideas here too. It makes me smile seeing your name, as it was on an old Acorn A3000 that I first learned about Xara (then Artworks).

you are welcome

just out of interest I processed your tile [1] image to black and white and auto traced it [in inkscape]

it's probably a bit rough and ready to use for real, and it produces discrete shapes rather than concentric circles if that mattered, but the side pieces may be useful guides for manual creation

Attachment 132626

I still think it is important to note that the original tile is not a square - you can squish it to a square and it will still tile, but of course distorts the circles should that matter

Attachment 132627

xar file:

Attachment 132628


interesting - I learned a few things on the way :)

My finalised design:

Attachment 132629

The associated SVG Tile: Attachment 132630
The SVG has been scaled to 256px square; it requires a colour underneath to act as the line colour.

I just added yellow and blue plugs into the gaps across the design to give an over and under weave.
In the SVG I then Combined these into the touching coloured arc.

Acorn

;)

Like that a lot Acorn, works well. Here it is used as a repeating fill with some celtic under-over shading.

Animated:

LINK

Quote:

---

Originally Posted by Egg Bramhill

Animated:
LINK

---

Egg, love it. I had been thinking of strobing colours but yours is more fun.

Acorn

I've enjoyed this thread. I haven't tried to do repeating tiles for some time. Spent a few happy hours experimenting and having fun.

Warning contains flashing images

I’ve enjoyed the challenge as well, but so pleased you guys cracked the problem!

The approach I was thinking about was: a) arrange circles, b) intersect all shapes, c) join the parts to form the overlapping shapes. It's quite difficult to get the circles to line up though (maths is not my strong point).

Attachment 132633

Also ended up with these along the way...

Attachment 132636Attachment 132635

Tried hd's (slightly distorted) version...

Attachment 132638

and Acorn's...

Attachment 132637

Just when I think I've got my head around things, Egg takes it a step further - excellent!

@Jono, no matter which way you tried, you achieved some pretty designs and you learned a few techniques along the way.

A number of us tried our hand at seamless SVG tiling a time back. The approaches then are still applicable.

Acorn

Wow! Thank you all for your contributions. This is amazing. I really appreciate you all sharing what you've done. Handawn, Egg, Acorn, Jonopen, thank you so much. They are all fantastic!