Illustrator full spectrum spirograph

07 Apr 2011

We can achieve amazing results if we experiment with a cocktail mix of simple geometry, great colors and a bit of math. If we add a few cool transparency modes to the mix we can get some rather spectacular results. Today's article is completely inspired by Mr. Spirograph himself Andy Gilmore. His work is stunning and very inspirational. He does his magic starting from simple shapes, and ends up with a remarkable complex composition. I e-mailed Andy to ask permission if I could write a tutorial inspired on one of his creations. Andy replied that it is always interesting to see how someone else approaches the creation process. Let's get started…

I should point out that this is just one way of how you can create these kind of compositions. I'm sure there are other techniques as well. This shape is inspired by Andy's creation and recreated for education purposes only. Don't copy his work, but explore the technique more and create different compositions. For this tutorial I've tried to find a simple way, so I can explain things in an easy and understandable manner, inviting you to go further and do some amazing stuff yourself.

Experimenting with spirographs in Adobe Illustrator. Simple geometry, colors and some math.

Prepare color palette

First you'll need to do some preparation work. For this shape we need to create 36 color swatches going from bright yellow, to orange, red, purple, blue, green. Keep in mind that there should be a smooth transition between each color swatch. Make sure the very last yellow-green swatch will give a smooth transition to the first yellow swatch.

Create the shape to duplicate

Draw a circle using the Ellipse tool, holding down the Shift key. Give the circle a bright yellow fill. Make sure to turn on Smart Guides: View > Smart Guides. To switch them on and off use cmd/ctrl + U. It is also recommended to turn on Snap to Point: View > Snap to Point.

Create circle and duplicate

Select the circle at the center left point, hold down the Shift + Alt/Option key and drag/duplicate the circle. Drag the circle to the right until you reach the center point of the original circle. Release the mouse.

Select both circles, go to the Pathfinder palette and click the Intersect option. (For CS3, please hold down the Alt/Option key or click the Expand button after you have clicked.) You should now end up with a shape as shown in the image below.

Keep the intersection of both circles

Adjust transparency value and mode

Go to the Transparency palette and adjust the value of 100 to 25. Change the mode from normal to Multiply.

Start rotating and duplicating the shape

Select the Rotate Tool (R), hold down the Option/Alt key and click exactly on the most bottom anchor point of the shape. Enter a value of 10 as degrees (360°/36) and click the copy button. Give the duplicated shape the 2nd (yellow) swatch fill.

Adjust transparency value and mode, start rotate and duplicating the shape

Transform again

Transform again

Now the fun part can begin. With the 2nd circle selected, hit cmd/ctrl + D to repeat the exact transformation. Give the 3rd shape the 3rd swatch fill. Hit cmd/ctrl + D again. Give the 4th shape the 4th swatch fill. Repeat these steps: cmd/ctrl + D, apply next swatch as fill.

Transform again

Keep repeating the steps until the spirograph is complete.

Transform again
Respect the creator and his work

Being inspired by his work or his technique is fine, but do not steal or copy. Inspiration should lead to new ideas, new creations. I invite you to experiment with different shapes, different patterns or try out different angles and color combinations. All Andy's work is copyright protected and may not be copied or used in any way without his permission. Don't make Andy regret giving me permission to write this tutorial. Respect!

Result of my experimentation

I thought, since I always stress out experimentation is vital, I share what I've created. Once I was playing around with this Transform Again technique, I was thinking why not try out Transform Each instead and see where I end up. Here is the result of some of my experimentations :

Spirograph

Start with 3 overlapping circles. Draw one and rotate/duplicate the circle at 120°. Group the circles and copy, rotate at 48°, 2 times in a row. You end up with 3 circles shapes in total (each shape containing 3 circles). I've used different colors (radial gradients) for each with different transparency values and transparency modes.

Spirograph

Start with a triangular shape. Copy, rotate at 18°, 6 times in a row. You end up with 7 triangle shapes in total. I've used different colors with an opacity of 100% in Screen mode. This way the overlapping area in the center is white.

Spirograph

Start with the same triangular shape. Copy, rotate at 12°, scale at 115% and move -10 mm horizontally and 10 mm vertically, 10 times in a row. You end up with 11 triangle shapes in total. I've used different colors with an opacity of 40% in Multiply mode.

Spirograph

Start with a simple square. Copy and rotate at -10° and scale 85%, 8 times in a row. You end up with 9 squares in total. Then rotate the entire shape at -10°. Use 10% opacity in Multiply mode.

This article has been originally published in 2009.

Comments

  1. 1 chris 07 Apr 2011

    Really cool* will try that tonight ;)

  2. 2 Nick 07 Apr 2011

    Some wonderful results, Veerle! Glad you’re resetting your brain from all the real work ;-)

  3. 3 Bryan 07 Apr 2011

    Excellent tutorial, as usual Veerle. Your experimental examples are beautiful, but the practical techniques you’ve shown will really help in my day to day work.

  4. 4 Luke Connolly 07 Apr 2011

    Veerle you’re a maestro!

  5. 5 royaljerry 09 Apr 2011

    Well, not exactly this technique, but the inspiration came from this post (and with the aid of the scripts of Mr. John Wundes). :)

    An oriental plate.

  6. 6 Andy 12 Apr 2011

    Wow, fantastic tutorial. Definitely got some ideas for a new wallpaper! Giving this a go tonight :D

  7. 7 Spencer 13 Apr 2011

    Beautiful!

The Deck

Ads via The Deck