cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image


  1. HOW did you do this?

  2. I'm glad you asked! Roughly: - Find two images that somewhat contain the same amount of triangles - Draw one triangle on top of each picture with Inkscape - This produces a SVG file with two paths - Create a HTML page with one SVG and one of the paths - Add a script which, with anime.js, morphs paths. I.e. morphs one set of paths to another set of paths - Create a nodejs script which parses the SVG into paths to morph from (goes into the HTML file) and paths to morph to (goes into the js script) - Duplicate triangles in both images - Run the animation and make sure these triangles morph as desired - Repeat until all triangles are drawn

  3. Hi, i realy like what you did :) i have tried to test it on one of my test site's but i cant seem to get it moving. i have put the javascript in between but it doesnt work. do you know what i did wrong?

  4. Thanks! I'll need to see the code to say exactly what is not working. My best guess is that you didn't include the anime.js library. To make it work locally you'll need to include the animejs library before the script. Like the below:

  5. I JUST LOVE IT....

  6. Whoa. It is AWESOME! Love it!!!! Thanks for sharing!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.