How To Create an Interactive SVG Splat Animation

As a life long learner I find teaching to be one of the best ways to hone and broaden my skills. Not only does it ensure that I’ve really understood the subject but I also get a tremendous sense of karmic balance – I too watch and read many articles, videos and blogs that either teach me something new or help me out of a spot so it’s good to give back to the community.

So today I’ve uploaded a new tutorial. I created the original pen several months ago and I had grand ideas of putting together a pack of UI elements to sell but I just don’t have the time so I made the pen public and made a tutorial on how to make it instead.

I hope you enjoy it and find it useful. Oh and here’s the original pen:

CSS Design Awards Winner 2015


2015 was a milestone year for me for many reasons but I’ll go into those reasons in another post.

One thing I am particularly proud of was winning a Best Code Wrangler 2015 award – to quote from the site:

Where would the digital world be without experimentalists? This year we thought it fitting to introduce a unique commendation that shines a light on the people that spend countless hours perfecting the little things that drive big innovation in the web design and dev industry. A special accolade for code-loving experimentalists.

This isn’t an award I put myself forward for – it’s based purely on judges and industry peers noticing work that breaks new ground and opens up new horizons as to what is possible on the web and for that I am (slightly shocked!) and even more proud.

I am a staunch supporter of a meritocracy – a society where hard work, dedication and, crucially, high quality results are rewarded and this award, for me at least, is the ultimate in recognition for the time and energy I spend on mine and my clients’ projects. The work of some of the most noted experimentalists in history has often gone unnoticed until years after their deaths and only then was it appreciated.

And whilst I would not be so arrogant as to draw a comparison between me and those pioneers my point is that this award goes some way towards ensuring that a light is shone on grafters like me and my peers who spend their time creating work that hopefully inspires, teaches and delights those that see it.


95% Inspiration and 5% Perspiration

SVG Balloon Slider has proved to be a bit of a hit and thankfully it conforms to the natural rule of creativity. And that is – when I spend hours and hours crafting a pen, tweaking and changing and generally trying to make it as good as it can be, it never seems to really work that well and is not hugely well received (Note: this is just an observation. I don’t make stuff to be ‘hugely well received’ although I must admit it’s nice when it is).

On the other hand, as in this case, the (fully formed) idea for it popped into my head whilst making some SVG sliders for a client, so I nipped over to CodePen, built it in around 1-2 hours (not on client time I might add!) and published it.

The reactions have been amazing and it just goes to show that the idea that success is 5% inspiration and 95% perspiration is not always true. Sometimes when you knock out an idea you just had and don’t think too much about it you’ll come up with something much more coherent than spending days polishing what could quite possibly be a turd.

Twitter Broken Heart

If you’ve been on Twitter recently you may have noticed the change when favouriting a tweet. The favourite/star is no more and has now been replaced with a sweet heart Like animation. It’s all very nice but they didn’t bother to design an ‘undo like’ animation.

So I decided to recreate Twitter’s Like/heart animation in SVG and to satisfy my OCD I also designed an ‘undo like’ animation.

Unliking has never been more fun!