Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm looking to create an SVG background image for a webpage using regular hexagons in a tessellation pattern similar to the image below. However, I need the hexagons to interconnect so I can use the:

background-image: url("path-to-hex.svg");

CSS pattern. I'd like to do this in Inkscape. I'm not sure how to "cut" the pattern into blocks though. How would I get started doing this?

Hexagons

EDIT The result came out looking really good! output

share|improve this question

2 Answers 2

up vote 12 down vote accepted

With a bit of boolean operation trickery this is a pretty easy process.

enter image description here

Just take a set of the hexagons you have there, create a rectangle that matches the orange one I've got in the image above (make sure the corners snap to the appropriate points on the hexagons), and then use the intersection tool to get rid of everything outside of the rectangle. That should leave you with a tilable pattern.

Edit: Per horatio's comment (good call!), I figured I should explain how I settled on that particular rectangle. When creating a tile, you need to have each part of your pattern appear at least once in said tile (and ideally, no more than once). With this pattern I looked to see if there were any recurring points on the x or y axis; fortunately for me, the hexagons aren't sitting at an odd angle, so this made things a relatively easy task.

enter image description here

On the X axis, I picked two hexagons that were aligned. These would be the start and end of the pattern, horizontally. I next selected a matching point from each (in this case, the left-most point). This would mark the exact width of the clipping rectangle for the pattern. Next, I did the same vertically, using the points I already chose for the width as the top corners of the pattern's clipping rectangle. Once I found the matching lower points, the clipping rectangle was defined.

You could use this technique on any number of shapes. You can use it on hexagons (or other shapes) at an angle as well, but keep in mind the tile will become substantially larger, depending on the angle.

share|improve this answer
2  
If you could explain the idea behind how you chose the rectangular area, the OP might be able to generalize this to other shapes. –  horatio May 27 at 18:25
    
The update is really good. Helps explain the concept. –  Diode Dan May 27 at 23:54
    
Excellent! Glad I could help. :) –  Chris Langford May 28 at 1:04

here is an easy way to do this: http://sqeets.com/Tutorial/create-a-hexagon-in-html-using-css/

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.