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?


EDIT The result came out looking really good! output

  • Would be helpful if you could paste a link to the inkscape file!
    – V-Red
    Sep 25, 2018 at 21:48

1 Answer 1


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.

  • 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, 2014 at 18:25
  • The update is really good. Helps explain the concept.
    – Diode Dan
    May 27, 2014 at 23:54
  • Excellent! Glad I could help. :) May 28, 2014 at 1:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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