Drawing in SVG, or What I Did With My Spring Break

Today, or rather over the course of the past week, I learned the value of knowing some javaScript in web design. I don't know much (right now), but even the little bit I know at least gave me the confidence to fiddle around with some scripts and jQuery to try and make it work.

So what was I trying to do? Well, this: Codrops Demo. Or this: Vox media review of the Polygon site

I thought that maybe I could have my little whiteboard wanderer character be drawn into the page, and have the rest of the page fade in around him. Seemed simple. Until I fell down the rabbit hole.

The fun thing about that Codrops article is that they don't really tell you how it's all done. They tell you what the effect is, how it's used, and where you can see it, but it's more of a "look how cool this is" than a "let me show you how to do that."So, I found myself picking away though the source files, which look something like this:

Which, after some research, this makes sense to me

And that's just the HTML source, mind you. There were three JS sources and three CSS sources to deal with as well. It was a bit of a maze for me. It's not that it was confusing, I understand the way that JS works, but there was just a lot for me to process and untangle. After I picked around through it for a bit, I decided to see if someone else had already. So I poked around the internet and found this article:
Jake Archibald Animate Line Drawing
Which was exactly what I was looking for. It was all about using CSS styles and JS to draw SVGs, specifically how. Essentially, you create a dashed line along the path of your drawing, with the spaces between the dashes as big as the dash itself. Then, you just shrink the gap, giving the illusion of the line being drawn.

Seeking further clarification, I found an article by the same author, further explaining the technique:  24 Ways animating vectors. This article was a little more recent, and easier for me to understand. After I worked my way through the whole article and thought I had a grasp of the concept, I prepared to buckle down for some JS coding. I would need to open up my SVG and convert it to line points, then plug those points into the html. Using a javaScript function, I would tell those lines to "draw" by adjusting their stroke offset (using a 'for' loop), and then tweak it till it looked nice.

And that's when I noticed a link to this little gem at the top of the comments section for the LazyLine Paitner Method. Now, generally I don't like to associate myself with something labeled "Lazy," but this was a prebuilt JS function that did everything I was trying to do.

So, I downloaded the demo file and began to pick that apart. It didn't take too long to get my little shape being drawn up in HTML, though it did take a good amount of tweaking to get it right (I'll post a tutorial on it later, specifically one geared toward people with little JS experience). Here's what I ended up with:

http://mywebspace.quinnipiac.edu/gtrava/gregRava%20Site/index.html.

Until next time!