I’ve been working on a new logo and a new website in-between projects / work / sleep etc. Part of the project was to introduce SVG elements to my site and gain a better understanding of the SVG spec.
The design itself is based on a mixture of the Fibonacci sequence, Art Nouveau and the floral Islamic art I grew up around as a child. While drawing the initial sketch I imagined it being drawn by itself, but I had know idea how I would do this. After a bit of experimentation with SVG and some research I managed to get this effect working;
With that initial design working as I wanted I did this on codepen:
See the Pen My logo animating SVG by mustafa-x (@mustafa-x) on CodePen.
The way it works is by using a CSS keyframe animation, playing with the stroke-dasharray and setstroke-dashoffset CSS settings. Jake Archibald explains the technique quite well but essentially we are creating a dashed key-line around a our illustration and expanding the distance between the dash until it can’t be seen. Finally we animate that backwards giving the illusion of something being drawn from scratch.
Back to my design, I started getting a bit ambitious;
See the Pen My logo animating SVG (Take 2) (by me) on CodePen.