Email iconarrow-down-circleGroup 8arrow-rightGroup 4arrow-rightGroup 4Combined ShapeUntitled 2Untitled 2ozFill 166crosscupcake-iconPage 1HamburgerPage 1Page 1Oval 1Page 1Email iconphone iconpushpinblog icon copy 2 + Bitmap Copy 2Fill 1medal copy 3Group 7twitter iconPage 1

Introduction

At UVD we are always looking to learn new things and share knowledge that an individual might have among other team members. In this instance, it was my turn to run a workshop for my colleagues and I chose the topic of SVGs and SVG animation as I’ve had some experience working with these on client work in the past.

Presenting to the team

I began the afternoon with a relatively short and snappy presentation on what SVGs are, some of the elements that make up an SVG and covered a few techniques/examples of how we were going to use SVG later in the day. I also did my best to ensure that blood sugar levels didn’t drop by supplying a box of Krispy Kreme doughnuts as a bribe to all those who got involved – a very strong motivator!

If you’d like to feel as if you were part of the day you can find the full presentation at http://svg-presentation.surge.sh/#/.

After the presentation, the group decided that they wanted to pair up for the challenges I’d set, and we ended up with three teams. Jay and Rachael formed a dynamic duo, Ryan and Eddy formed a unit with Dave and Alex becoming the last pair.

Challenges and Prizes!

The main event of the afternoon involved a series of tasks to be completed by the three pairs and included a prize for the most creative solution.

Challenge 1: Simple shapes – draw me a face!

Starting with the basics, I asked the team to draw me a face using SVG elements and their brains (i.e. no cheating by using an SVG generator like Sketch3 or Adobe Illustrator). The task I set involved drawing a simple circle, rectangle and then a series of shapes to make up a face. You can see the desired outcome I was after in this codepen.

See the Pen Simple shapes example by James (@james-dowell) on CodePen.

To take this further I asked the teams to use their imagination to animate and improve upon the face. Some used animation to turned the face from happy to sad, others went big on features: hair, ears and ears!

Challenge 2: Paths and animations!

Next up, I asked the teams to try and reproduce an animation that in true Blue Peter style, I’d made earlier:

See the Pen SVG animation example 1 by James (@james-dowell) on CodePen.

Challenge 3: Freestyle SVG loading animations.

After specifying quite rigid tasks for the first two challenges I wanted to offer the opportunity for the teams to release their creativity – and the most creative pair would be rewarded with a Cadbury’s Milk Tray as a reward! As you can imagine with the promise of such a tremendous prize the rivalry was fierce.

Feeling that we still needed some focus, I came up with a general guideline as to what I was looking for: to draw and animate something they could imagine being used as a loading animation.

There was no limit to the tools they could use, so Sketch3 and Illustrator were allowed for this one. I also hinted that it might be nice to use some JS libraries to help with the animation, such as: Vivus, SnapSVG, SVG.js or even trusty D3.

In the end, Dave and Alex won the day with their rather witty and spectacular loading animation based on one of our projects here at UVD. Containing some classic quotes that would animate in and out and some clever path animations using Vivus.

Summing up the workshop

On the whole, I believe the workshop was a success – I think/hope everyone learned a little something about SVG, how they work and how you can go about animating them to create complex and sometimes interactive artwork. The workshops provide a great afternoon of knowledge sharing and boost team bonding and cohesiveness. I also believe that presenting to a group, even a small one, is great life/work experience is something we at UVD should all be doing.

Dave is next up on the workshop roundabout, introducing everyone to Clojure. I know I look forward to that and many more UVD workshops.

Photos from the day

Teams working together at the SVG Workshop

Dave sharing the spoils of his SVG workshop prize

Share: