SVG morph animation using Kute.js and BBH black sheep Logo
- This project is a a test for the KUTE.js library
- I built this project to develop SVG animation skills.
- This project helped me learn how to morph complex multi node SVGs with a free library.
AS A marketing agency
I WANT Websites with motion graphics
SO THAT our sites are attractive to viewers and hold attention
- The page is a cyclical animation between SVGs of sheep and blob
- Making a scalable vector graphic animation is relatively simple provided the two shapes contain an identical number of nodes between vectors.
- If the graphics contain a different number of nodes and vectors, morphing between the two involves extremely complex math to blend nodes and vectors together to form each shape.
- The KUTE.js library has a built-in tween method which carries out the complex math involved in morphing between complex shapes.
- In this instance the short amount of JavaScript is added directly into the HTML page.
- Colours and animation timing is easily adjusted with contextual parameters inside the from to method.
*In addition, the mix blend mode on the text, set to difference, creates an interesting "colour flip" enhancing the animation.
This is a basic static front-end website deployment which can be deployed on any server or client with a browser. The GIThub page deployment
Original Blob animation tutorial: Taimoor Shahzada
Learn about the KUTE.JS animation engine
The 'Black Sheep' is the logo of the BBH agency and the SVG is taken from their website - not to be used for commercial purposes.
This work is published under the MIT Licence