Create a Seamless Vector Quatrefoil Pattern in Illustrator
A modern take on the classic four leaf clover quatrefoil design element
Quatrefoil is an ornamental design with four lobes that resemble a flower or clover leaf, it is most commonly seen in Gothic architecture but can also make a cool, minimal pattern for modern web and graphic design. This quick tutorial will show you how to create a seamless, vector quatrefoil pattern with Adobe Illustrator CS6 or newer.
Please note that this tutorial requires that you have at least version CS6 of Adobe Illustrator due to using the Pattern tool. Also, if you'd rather skip the tutorial and download our 20 pre-made quatrefoil patterns for free you can do so here
Begin by launching Illustrator and creating a new document, 800 x 600 pixels is a good size to begin with (it can easily be changed later).
Fill the artboard with a white rectangle to use as the background color.
Draw a new circle 44 x 44 pixels, and give it a thick 10 pixel teal (#00D2AF) stroke.
Duplicate the circle and move it down 56 pixels.
Select both circles and duplicate them in place.
Rotate the duplicated circles 90 degrees around a center reference point.
Select all 4 circles and combine them with the Union Pathfinder operation.
Highlight the 8 vector points in the middle of the shape and delete them.
Highlight the shape again and go to Object > Pattern > Make to make a new pattern preset. Click OK if a dialog box pops up. In the Pattern Options panel change the width and height to 100 pixels, the shapes should now overlap each other nicely.
Exit out of the Pattern editor mode and delete the original shape we created (it is still safe in the Pattern swatch)
Duplicate the white background layer and fill it with the Pattern Swatch you created.
To invert the colours, first duplicate the swatch.
Then edit the duplicated pattern and change the stroke fill to white (#FFFFFF).
Then exit back to the main Artboard and change the background rectangle fill to teal (#00D22AF).
And on the top rectangle change the pattern swatch to the white one instead.
Here are both of the patterns, they are not only perfectly seamless but also completely vector! If you want to use them on the web as a bitmap then export the whole artboard to JPG 72DPI and crop the result to a 100 x 100 pixel square in Photoshop or any similar tool.
Download Seamless Vector Quatrefoil Patterns
This pack includes 20 perfectly seamless vector quatrefoil patterns for Illustrator featuring various ornamental designs with four cloves. They are scalable and can be edited in Illustrator CS6+, also included are 20 high resolution JPG files ready for production use, measuring 600 x 600 mm at 300DPI.