Jukedeck SVG Animation

Code animation to explain machine learning for generating music.

Jukedeck are devloping machine learning technology for generating high quality original music. They needed an effective way of explaining how this technology works to anybody. They wanted this to feature on their homepage and for interactive elements to be integrated.

I came up with this preliminary design using SVG graphics and a lightweight javscript animation library (Anime.js) so that they can use this on their website and add interactivity without crazy load times as commonly seen in video animation. I also hooked up some basic butttons to the animation to demonstrate how the animation can be rigged for user input.

See the Pen CPU- anime.js by Scott Wraxton (@Wraxton) on CodePen.

See the Pen CPU by Scott Wraxton (@Wraxton) on CodePen.

An early concept I created was a CPU circuit animation however this was found to be far too vague. I recieved a schooling in the kind of machine learning involved and this set me on a better path to representing their tech in the design.

Animating in Pseudo 3D

Now for the clever bit. The design is isometric 3D but technically it's still 2D. The rotating record is a perfect circle that is simply rotated while it's parent element has been transformed to the isometric angle using the matrix() and some maths. This can be quite tricky to pull off because CSS transforms and SVG use completely different systems of coordinates.

See the Pen gybmvJ by Scott Wraxton (@Wraxton) on CodePen.