Create a Playable Guitar Using Inkscape

In this Inkscape and Snap.svg tutorial, we’ll be creating a rather detailed guitar that you can actually play right in your browser! If you’re new to Snap.svg, I highly recommend checking out the beginner tutorial, because this is going to get a bit tricky.

The Final Result

Move your mouse over the strings to strum!

1. Drawing the Guitar Body

Step 1

First, grab the Rectangle tool to draw a rectangle roughly 600px by 300px. Then apply a radial gradient fill and use the Gradient tool to get a similar burst effect like I have below.

red radial gradient

Step 2

Then use the Ellipse tool to draw the guitar sound hole, which will have a dark brown fill and a thick red stroke.

guitar circle hole

Step 3

For some simple design around the sound hole, I’m just going to keep adding circles with black fills and beige strokes.

sound hole rings

Step 4

This is what I ended up with – 4 circles total.

guitar sound hole rings

Step 5

Now for a shadow effect, just create a circle with a white, Alpha 25 fill and then set the Blur to 5.

guitar sound hole shadow

Step 6

For a little added touch, I made this little label consisting of the goInkscape! logo.

goinkscape label

Step 7

And I’m going to stick it right here!

guitar sound hole label

2. Drawing the Guitar Fretboard

Step 1

To create the fretboard base shape, duplicate the original sound hole circle from earlier and move it off to the side. Now, draw a brown rectangle so that it overlaps the circle as shown below. Make sure that you use Align and Distribute to center these on a horizontal axis.

inkscape difference

Step 2

Select both of these shapes and head up to Path > Object to Path, and then do a Path > Difference.

create fretboard shape

Step 3

You should end up with a nice fretboard cutout shape like this:

fretboard cutout

Step 4

Now simply position and align the fretboard to the sound hole. I’ve also added a beige stroke and a Filters > Shadows and Glows > Drop Shadow on this piece for added realism.

position fretboard

Step 5

For even more realism, let’s add a wood grain to the fretboard. To do this, duplicate the fretboard shape and remove the stroke and shadow (Filters > Remove Filters). You’ll then want to rotate it 90 degrees clockwise so that when you add the Filters > Textures > Bark, the grain flows in the right direction.

inkscape bark texture

Step 6

Now you can rotate it back to the original position and adjust the Opacity to 5. What we’ve done is create a faint overlay for the original object so that the bark texture isn’t too overpowering.

inkscape wood grain texture

Step 7

And just for fun, I’m going to throw one fret on there which will just be a thin rectangle.

inkscape guitar fret

Step 8

I added a slight drop shadow on the fret as well to finish up the guitar body. So far so good!

inkscape guitar body no strings

3. Drawing the Guitar Strings

Step 1

Drawing the strings will be easy. Just use the Pen tool and hold Control to draw a straight line across the guitar. Below, you’ll notice that I’ve colored it silver and it has a Stroke of 3. This will be the thickest guitar string, so all subsequent strings should gradually be thinner.

draw guitar string

Step 2

Since these will eventually become interactive parts in Snap.svg, make sure to open Object > Object Properties and set an ID/Label. I’m going to just call it string1 (even though this string is officially the 6th string in the guitar world).

string label id

Step 3

We’ll also be drawing a rectangle over each string with absolutely no styling because this will simply serve as a hovering point later on. Assign a unique ID/Label with these rectangles as well (I went with string1box). Also, Group the string and string box together.

string box

Step 4

Now that we’ve made our string1/string1box group, we can simply duplicate it and create the rest of the strings. We just need to make the string strokes get gradually smaller and we need to assign ID/Labels to them all (string2, string2box, string3, string3box, etc.)

guitar all strings

Step 5

We can actually select all of the string groups and add a subtle drop shadow to give them some depth. Looks great! To finish the drawing, set the document size to 600px wide and 300px tall and Save As a Plain SVG.


4. Make it Playable!

Audio Tracks

I found this set of great quality guitar sounds that will work perfectly. I should also note that I had to trim up these particular sounds to get them to sound just right. You can also use your own recorded guitar sounds, but either way, save all 6 sounds into a folder and try to keep them at MP3.

guitar string sounds


Below is my Snap.svg Javascript file which is fairly straightforward. Add the strings, add the boxes, add the sounds, change position on hover, revert position off hover, and play sound. In order to get your specific string position coordinates, you’ll have to open your guitar SVG in a text/code editor.


Below is my very simple HTML with holds the guitarDiv and gets the scripts.

The Amazing Playable Inkscape Guitar!

Move your mouse over the strings to strum!

You’re All Done!

We used Inkscape to draw a great looking guitar, used Snap.svg to create a string plucking animation, and then added a little Javascript to play some string plucking sounds! I absolutely love the end result of this Inkscape animation tutorial and I hope you do to. Thanks for reading!