Like all explorations, this one started with an idea. A little idea that took root during the design stage of one of our more recent web development projects. What was the inspiration for this little idea? A squiggle. Yes, you read that correctly, a squiggle.
It’s a squiggle much like the ones that arise from furious scribbling and continuous circling of important information. Something so many of us do unconsciously when we’re in meetings and taking phone calls or at least, that’s true of the creatives in our office.
Why do we scribble and circle around information like this? Because it is important and we want to make it stand out. In digital, we need to do exactly the same thing to make key calls to action stand out from the background content too. Typically, the solution for making this key information stand out is to apply a button style to the key text. But what if the button style wasn’t the traditional rectangle, what it if it was circled or scribbled around instead?
See the Pen Basic Scribble Button by Pixelbuilders (@pixelbuilders) on CodePen.
Therein lies the start of our journey into the versatilities of SVGs.
An SVG, for those of a slightly less technical persuasion much like myself (I am a marketer after all), an SVG is an image file that is written in XML and the beauty of XML (so I am told), is that it is very similar to good old HTML, which is used in almost every website out there in the World Wide Web. This is significant because it means, developers like our front end development expert Josh, can target elements of an SVG’s XML code with CSS styles, so the SVG can be manipulated to appear differently on screen.
So going backing to our squiggle then, if we were to use an SVG to implement it on the front end of a website, we could develop it from a simple graphic into something far more fetching, far more engaging and much more like the original hand drawn squiggles that inspired it. It could become… an animated squiggle.
Using a simple SVG depicting a line, some CSS styles, a little JQuery and a dash of general development wizardry from Josh we (he) created the illusion of drawing our emphatic circle around the call to action on screen.
Here come the technical details…
When the SVG is originally created in Adobe Illustrator, it arrives at the developer’s desk with a set of basic styles saved in its XML file. Josh started by stripping these out, leaving him with something that only had (rather philosophically) the potential to be a line.
At this point our SVG is completely invisible on the front end of the website and it creates the path for where styles or in our case colour specifically can appear. The styles we need are added back in using CSS and SVG Strokes and then the line starts to take shape.
strokeDasharray is is use to determine the length of the coloured portion of the line using co-ordinates marking the start and end point of the coloured section. A style transition is then used to slide the coloured section of the line along the path of the original SVG, created the illusions of our line being drawn.
See the Pen Scribble Button Animation Example by Pixelbuilders (@pixelbuilders) on CodePen.
To make this meaningful for the user, the animation is triggered using a little JQuery when the mouse hovers over the circled call to action, at which point our animated squiggle struts its stuff indicating the element is clickable and voila! A bold, engaging and different way of making key content stand out.
See the Pen Scribble Button Complete by Pixelbuilders (@pixelbuilders) on CodePen.
This goes to show what can be achieved with a little code and an SVG. And we really do just mean a little code. The potential of SVGs actually goes much further than our relatively simple animation. Just
look at this animation from CSS-tricks and you’ll see exactly how versatile the humble SVG can be.