css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Comments

  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:

    // My code from codepen

  5. I JUST LOVE IT....

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

  7. Can this animation be used for commercial purposes? I have from documentation there is only a user agreement it turns out I have to enter your permission there?

  8. @Alexander3232 all pens on Codepen are licensed with MIT, which is a very permissive license. You are free to use the code for commercial purposes.

  9. Hello, I have a browser game, can I use your animation in it? If yes, where can I indicate your license? I have a hosting where the game lies. It can be viewed by people clicking on the right button, go to the Sourcec section and find the link where my game is located. In the same place I will indicate your license will suit you?

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

You must be logged in to comment.
Loading...
Loading...