Drawing SVGs with JavaScript: A Tutorial

We had the awesome challenge of creating an interactive experience for the author Rick Riordan. He is widely known for being the author of the Percy Jackson and the Olympians series for young readers. We decided to give them an in-depth and fun experience through JavaScript and SVG’s.

On the home page and each of the series pages, we wanted to animate the dotted line that connects the books in the series.

riordan-scrolling

The first challenge was coming up with the yellow dotted line itself.  I could have used an image, but that would mean creating a new image for every page, and every time a new book is added or the length of a book’s description changes, we would have to make a new line image, not to mention having different images for different screen sizes.  It was clear that the best thing to do was to draw the curved line on the fly.  That way, the line could change shape to accommodate the books it needed to connect.

So my goal was to draw a curved line that would connect several points on the screen.  On the home page, those points were the “View Series” buttons, and on the series page, the points were the map markers.

I experimented with several JavaScript libraries for drawing images, but these were all extremely bulky, and despite their sophistication, they were surprisingly incapable of the simple instruction to “draw a curved, dotted line connecting these HTML elements.”

For instance, at first I thought GreenSock’s animation library would be useful, but the weakness there is that the animation isn’t triggered by scrolling, so I was going to need to use something like ScrollMagic along with it.  I also looked at SnapSVG, but found it to be overwhelmingly complicated.  JS Plumb  seemed really promising, since it is designed to draw lines between things, but I needed a single long line to animate on scroll, not several short lines.

Eventually I realized that all of these libraries were extremely complex, and that I would end up having to load something like 100,000 lines of JavaScript to achieve what should be a very simple effect.  I decided it would be easier to do this myself instead of using an existing library.

Here is where SVG comes in.  SVG stands for “scalable vector graphics.”  SVGs are images, but instead of consisting of a collection of pixels like a JPG or PNG image, an SVG is a set of instructions for drawing an image.  Simple SVGs are actually human-readable: for instance, straight lines are simple pairs of coordinates stating where the line should begin and end.  For example, here’s a really simple demonstration of how to draw a line with SVG:

See the Pen Simple SVG Example by Morgan Kay (@wpalchemist) on CodePen.0

Getting a line to curve is a little more complex, but once you understand how Bezier curves work, this is fairly simple too.  With Bezier curves, you define a line, and then you define a point outside that line, and the line acts like it is getting pulled toward that point.  Rachel Smith has a wonderful illustration of this:

See the Pen The Quadratic Bézier Curve in SVG by Rachel Smith (@rachsmith) on CodePen.0

Another great thing about SVG is that it gives you a lot of flexibility.  You can embed an SVG image just like you would a JPG with the <img> tag.  Or you can put the SVG code directly into your HTML, like I did in first example above.  When you do that, you can use CSS to change the appearance of your SVG:

See the Pen Changing SVG properties with CSS by Morgan Kay (@wpalchemist) on CodePen.0

To get even more flexibility, you can use JavaScript to adjust any of the attributes of your SVG.  On rickriordan.com, this is exactly what I did.  I knew how to create curved lines, so I needed to figure out where the curved line should go.  The coordinates could potentially be different on every page load, depending on the size of the browser and the length of the content.  Each book series page has a map marker next to each book, and those were the points I needed to connect. Thanks to JQuery’s position() and offset() functions, I could calculate where the map markers were: those became the endpoints of each curve on the line.

Here is a simplified demonstration of how I connected several HTML elements with a curved line:

See the Pen Calculate and Animate SVG with JS by Morgan Kay (@wpalchemist) on CodePen.0

The next step was animating the dark line that overlays the dotted line as you scroll down the page.

Fortunately, some people who are more clever than I have come up with a neat little trick for animating an SVG while you scroll.  This animation technique takes advantage of the fact that you can create a dashed line with SVG, and you can determine the length of the dashes and the length of the gaps between the dashes.  To animate a line as you scroll, you simply make a dashed line, where both the dash and the space between the dash are the same length as the total line.  When the page first loads, the empty space between the dash is all that is displayed: in other words, nothing. But as you scroll down the page, you calculate the percentage you have scrolled, and offset the dash by that same percentage.  As you scroll, the dashed part of the line moves with you, so that by the time you get to the bottom of the page, the entire line has been drawn.

Here is a demonstration of this animation technique: Scroll Drawing by Chris Coyier (@chriscoyier) on CodePen.[/codepen_embed]

With these simple techniques, I was able to create a flexible, sophisticated, and fun effect with just a few lines of JavaScript.

Further Reading:

Read the full case study on creative collaboration!

Like this project?

View the Portfolio

Authored By

Code Ranger

Morgan has been building custom WordPress websites for clients since 2009. She loves using WordPress to make people’s lives easier, whether they are managing a big business, small business, or a personal website. She has released over a dozen WordPress plugins to the public.

When she isn’t obsessing over the latest coding puzzle, you can find Morgan hiking in the forests of the Pacific Northwest, or with her nose buried in a book.

One thought on “Drawing SVGs with JavaScript: A Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *