Menu

<>GeoffreyAllman</>

Front-end developer & designer



SVG Polygon Art (1-2)

Comments

We all love SVG and anyone that thinks otherwise is no-one worth speaking of. The animated hero image in this blog post was created using SVG polygons, time, and some magic from Greensock, a brilliant little javascript library for making animations.

Before you begin you'll need the following:

  • A computer
  • Adobe Illustrator (or something that has a pen tool and can export as SVG)
  • A mouse (track pads won't cut it for this, unless you're a masochist)
  • Some rudimentary Javascript or jQuery knowledge (optional)
  • Lots of time
  • Coffee

Okay if you have all that stuff let's begin:

Step 1: Select an image

This part matters. You will, depending on the size of the image you pick, be staring at it for at least the next 12 hours so it's vitally important that you pick one that you won't get bored of looking at. In my case I chose my beautiful girlfriend Sophie, however you can chose anyones girlfriend, even your own. Large images work best however bare in mind that the larger the image the more polygons you are going to have to create.

At this stage, if you want, you can experiment with colour, tone, contrast and placement of objects on the subject; for this I would recommend opening the file in Photoshop and getting the image right before you move onto the time consuming bit in step 2.

Depth, light and colour are really important in achieving the overall quality of the final piece and the more time you spend now getting your image right the better the outcome will be. Colour overlays can be used to give the final image a slightly warmer or colder feel, you could even create a collage of different images and only vectorise some of the objects.

I simply chose to go with the prettiest girl I know. Once you're done faffing move onto the next step.

Step 2: Illustrator

Load your selected image into Illustrator. Create a new layer ![New layer](/assets/img/content/new-layer-20160524172542.jpg) and select the pen tool ![Pen tool](/assets/img/content/pen-20160524172556.jpg).

It's a good idea to lock the bottom reference image as you don't want it to move when we start creating the polygons. ![Lock layer](/assets/img/content/lock-layer.jpg)

Next, select the new blank layer. We then want to set the pen tool colour and stroke thickness. With the pen tool selected set the foreground colour to transparent and the stroke colour to whatever colour you want; I like White but you could change the colour depending on the tone of the image. The stroke thickness works best at 0.5pts because it prevents the image from being obscured by thick lines and allows for more precise placement along contours.

Step 3: Polygons, polygons, and more polygons

Find a good starting point; I like to start with the eye if it's a face. It's important to bare in mind that the order you start the polygons in will be the order in which they animate in [part 2](/blog/animated-svg-polygon-art-2-2) of this tutorial.

WIth the pen tool selected pick a contour of the image and make a triangle.

![Polygon--single](/assets/img/content/polygon-20160525050722.gif) ![Polygon--extra](/assets/img/content/polygon--extra.gif)

No need to drag, just click three individual points on the image and make sure they connect; the final point will show a small circle icon next to the cursor. If you see a **+** or **-** symbol then this means you have not completed the polygon.

To make the next polygon click somewhere else on the image, only this time make sure that you overlap **just one** vertices of the previous polygon.

Continue in this fashion following the contours and lines of the image until the entire image is covered in a mesh of polygons. **Never try to make quadrilaterals, they don't look good and mixing and matching will result in a rubbish final image.**

**Tip:** Use bigger polygons for the larger surfaces such as cheek bones and skin where the tones and colours are similar although don't go too big or they will look out of proportion with the smaller, more intricate areas such as the eyes and lips. Try to break up each body part into defined areas, don't try to overlap one polygon over two areas that share different properties such as a background colour and someones ear. You will find that if you do then your image will become distorted in the colouring phase. The polygons are essentially creating a mesh that, should you remove the image from view, will reveal a recognisable outline of the subject that you are masking. You can check this periodically by turning the reference image layer on and off.

Don't worry if after a while your vertices do not line up entirely, as long as the points are roughly where you want them and there are no huge gaps it will be fine. We will clean the points up in the next step using alignment and the actions panel.

It should look similar to this once finished

![Final polygon mesh](/assets/img/content/final--mesh.jpg)

Step 4: Tidying up our mistakes

This process can get arduous after a while so I advise that you take regular breaks and if you mess a polygon up and it becomes a curve I highly recommend that you delete it and re-make it when it happens! Changing this in the animation phase is not only boring, but time consuming and fiddly and always results in hidden artefacts in your final code.

### A considerable time later...

Okay so you just placed your last polygon and your image is looking sweet AF! However, you know that some of the points don't match up and it's creating gaps. No worries, we can tidy them up and ensure that when we get our SVG code, that each polygon is sitting tightly up against the next one.

The trick to doing this fast is utilising Illustrators vertical and horizontal align center tools in combination with the actions panel. Click on '**Window**' > '**Align**' in the menu bar. Then '**Window**' > '**Actions**'. In the actions panel that has now appeared click the 'new action' button ![New action icon](/assets/img/content/new-layer-20160525053953.jpg). Give your action a name and a function key and then click 'record'.

**At this point every click you make will be recorded by the actions panel so be careful what you do from this point onwards.** Press '**a**' to select the 'direct selection tool', then click and drag to highlight where many points meet on your polygon mesh. Then go to your align panel and click 'Horizontal Align Center' ![Horizontal align center](/assets/img/content/horizontal.jpg) then, 'Vertical Align Center' ![Vertical align center](/assets/img/content/vertical-20160525055621.jpg). Click stop in the actions panel immediately after.

It's now just a case of selecting the points that don't match up completely with your direct selection tool and pressing your bound action key. Congratulations you just saved hours of work!

**Tip:** I like to do this for every single joining point on the page. This does take a while however since it's just click, drag, and press it's worth spending the extra time; what you gain is the peace-of-mind that when you start to fill in, that every polygon is connected to the neighbouring polygon.

We can do one final thing to check if all the polygons have met. Highlight the entire mesh and change the fill colour to anything you like. You should end up with something like this.

![Checking Polygons](/assets/img/content/checking-polygons.jpg)

Finished? Okay let's get to the rewarding part!

Step 5: Colouring in!

Assuming you are happy with your mesh we can now begin adding colour. Ensure that the reference image is visible and still locked.

This is probably the quickest part of the entire process. '**a**' to select the direct selection tool; then select a polygon and press '**i**' to bring up the 'eye-dropper tool'. Find the rough center of the selected polygon to fill it.

Rinse and repeat for every polygon, it doesn't always have to be the center of each shape but it usually is the best representation of each segments tone.

Occasionally you might come across polygons you've missed or that you can't select, at this point you will need to swap back to the pen tool and rectify the problem. Remember to re-align the polygons after you create new ones using the action you set up earlier.

Your final image should look something like this

![Filled in Polygons](/assets/img/content/Filed-in-polygons.jpg)

Finishing up

The great thing about SVG is that you can scale it up or down and it doesn't lose it's quality. Resize the canvas to the size you desire and save the image as a png or jpg to use as a background or avatar. If you would like to take it to the next level then in [part 2](/blog/animated-svg-polygon-art-2-2) we will export as an SVG and learn how to animate it with the help of [Greensock](https://greensock.com/).

**BBQ Sauce:**

[Low poly self portrait tutorial](https://www.behance.net/gallery/16579635/Low-Poly-Self-Portrait-Tutorial),

[Sophie Warwick](https://www.instagram.com/sophiuswarricka/),

[Greensock](https://greensock.com/)

back to blog posts