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

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

You must be logged in to comment.