Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="morphTest" height="800" width="800" xmlns="http://www.w3.org/2000/svg">
  <path d="" stroke-width="3px" stroke="black" fill="transparent"></path>
</svg>
              
            
!

CSS

              
                
              
            
!

JS

              
                console.clear();

let sets = [
  [
    [
      250,
      250
    ],
    [
      475,
      474.99999999999994
    ],
    [
      700,
      250
    ]
  ],
  [
    [
      250,
      250
    ],
    [
      250.00000000000003,
      474.99999999999994
    ],
    [
      475,
      474.99999999999994
    ],
    [
      475,
      250
    ],
    [
      700,
      250
    ]
  ],
  [
    [
      250,
      250
    ],
    [
      137.50000000000006,
      362.5
    ],
    [
      250.00000000000003,
      474.99999999999994
    ],
    [
      362.5,
      362.5
    ],
    [
      475,
      474.99999999999994
    ],
    [
      587.5,
      362.5
    ],
    [
      475,
      250
    ],
    [
      587.5,
      137.50000000000003
    ],
    [
      700,
      250
    ]
  ],
  [
    [
      250,
      250
    ],
    [
      137.50000000000003,
      250.00000000000003
    ],
    [
      137.50000000000006,
      362.5
    ],
    [
      250,
      362.5
    ],
    [
      250.00000000000003,
      474.99999999999994
    ],
    [
      362.5,
      474.99999999999994
    ],
    [
      362.5,
      362.5
    ],
    [
      474.99999999999994,
      362.5
    ],
    [
      475,
      474.99999999999994
    ],
    [
      587.5,
      474.99999999999994
    ],
    [
      587.5,
      362.5
    ],
    [
      475,
      362.5
    ],
    [
      475,
      250
    ],
    [
      587.5,
      250
    ],
    [
      587.5,
      137.50000000000003
    ],
    [
      700,
      137.50000000000003
    ],
    [
      700,
      250
    ]
  ],
  [
    [
      250,
      250
    ],
    [
      193.75,
      193.75000000000003
    ],
    [
      137.50000000000003,
      250.00000000000003
    ],
    [
      193.75000000000003,
      306.25
    ],
    [
      137.50000000000006,
      362.5
    ],
    [
      193.75000000000003,
      418.74999999999994
    ],
    [
      250,
      362.5
    ],
    [
      306.25,
      418.74999999999994
    ],
    [
      250.00000000000003,
      474.99999999999994
    ],
    [
      306.25,
      531.2499999999999
    ],
    [
      362.5,
      474.99999999999994
    ],
    [
      306.25000000000006,
      418.74999999999994
    ],
    [
      362.5,
      362.5
    ],
    [
      418.75,
      418.74999999999994
    ],
    [
      474.99999999999994,
      362.5
    ],
    [
      531.2499999999999,
      418.74999999999994
    ],
    [
      475,
      474.99999999999994
    ],
    [
      531.25,
      531.2499999999999
    ],
    [
      587.5,
      474.99999999999994
    ],
    [
      531.25,
      418.74999999999994
    ],
    [
      587.5,
      362.5
    ],
    [
      531.25,
      306.25
    ],
    [
      475,
      362.5
    ],
    [
      418.75,
      306.25
    ],
    [
      475,
      250
    ],
    [
      531.25,
      306.25
    ],
    [
      587.5,
      250
    ],
    [
      531.25,
      193.75
    ],
    [
      587.5,
      137.50000000000003
    ],
    [
      643.75,
      193.75
    ],
    [
      700,
      137.50000000000003
    ],
    [
      756.25,
      193.75
    ],
    [
      700,
      250
    ]
  ],
  [
    [
      250,
      250
    ],
    [
      250,
      193.75
    ],
    [
      193.75,
      193.75000000000003
    ],
    [
      193.75,
      250
    ],
    [
      137.50000000000003,
      250.00000000000003
    ],
    [
      137.50000000000006,
      306.25
    ],
    [
      193.75000000000003,
      306.25
    ],
    [
      193.75000000000003,
      362.5
    ],
    [
      137.50000000000006,
      362.5
    ],
    [
      137.50000000000009,
      418.74999999999994
    ],
    [
      193.75000000000003,
      418.74999999999994
    ],
    [
      193.75000000000006,
      362.5
    ],
    [
      250,
      362.5
    ],
    [
      250.00000000000003,
      418.74999999999994
    ],
    [
      306.25,
      418.74999999999994
    ],
    [
      306.25,
      474.99999999999994
    ],
    [
      250.00000000000003,
      474.99999999999994
    ],
    [
      250.00000000000006,
      531.2499999999999
    ],
    [
      306.25,
      531.2499999999999
    ],
    [
      306.25,
      474.99999999999994
    ],
    [
      362.5,
      474.99999999999994
    ],
    [
      362.5,
      418.75
    ],
    [
      306.25000000000006,
      418.74999999999994
    ],
    [
      306.25000000000006,
      362.5
    ],
    [
      362.5,
      362.5
    ],
    [
      362.5,
      418.74999999999994
    ],
    [
      418.75,
      418.74999999999994
    ],
    [
      418.75,
      362.5
    ],
    [
      474.99999999999994,
      362.5
    ],
    [
      474.99999999999994,
      418.74999999999994
    ],
    [
      531.2499999999999,
      418.74999999999994
    ],
    [
      531.2499999999999,
      474.9999999999999
    ],
    [
      475,
      474.99999999999994
    ],
    [
      475,
      531.2499999999999
    ],
    [
      531.25,
      531.2499999999999
    ],
    [
      531.25,
      474.99999999999994
    ],
    [
      587.5,
      474.99999999999994
    ],
    [
      587.5,
      418.74999999999994
    ],
    [
      531.25,
      418.74999999999994
    ],
    [
      531.25,
      362.5
    ],
    [
      587.5,
      362.5
    ],
    [
      587.5,
      306.25
    ],
    [
      531.25,
      306.25
    ],
    [
      531.25,
      362.5
    ],
    [
      475,
      362.5
    ],
    [
      475,
      306.25
    ],
    [
      418.75,
      306.25
    ],
    [
      418.75,
      250
    ],
    [
      475,
      250
    ],
    [
      475,
      306.25
    ],
    [
      531.25,
      306.25
    ],
    [
      531.25,
      250
    ],
    [
      587.5,
      250
    ],
    [
      587.5,
      193.75
    ],
    [
      531.25,
      193.75
    ],
    [
      531.25,
      137.5
    ],
    [
      587.5,
      137.50000000000003
    ],
    [
      587.5,
      193.75
    ],
    [
      643.75,
      193.75
    ],
    [
      643.75,
      137.5
    ],
    [
      700,
      137.50000000000003
    ],
    [
      700,
      193.75
    ],
    [
      756.25,
      193.75
    ],
    [
      756.25,
      250
    ],
    [
      700,
      250
    ]
  ],
  [
    [
      250,
      250
    ],
    [
      278.125,
      221.875
    ],
    [
      250,
      193.75
    ],
    [
      221.87500000000003,
      221.875
    ],
    [
      193.75,
      193.75000000000003
    ],
    [
      165.62500000000003,
      221.87500000000003
    ],
    [
      193.75,
      250
    ],
    [
      165.62500000000003,
      278.125
    ],
    [
      137.50000000000003,
      250.00000000000003
    ],
    [
      109.37500000000006,
      278.12500000000006
    ],
    [
      137.50000000000006,
      306.25
    ],
    [
      165.62500000000006,
      278.125
    ],
    [
      193.75000000000003,
      306.25
    ],
    [
      165.62500000000003,
      334.375
    ],
    [
      193.75000000000003,
      362.5
    ],
    [
      165.62500000000003,
      390.625
    ],
    [
      137.50000000000006,
      362.5
    ],
    [
      109.3750000000001,
      390.625
    ],
    [
      137.50000000000009,
      418.74999999999994
    ],
    [
      165.62500000000006,
      390.625
    ],
    [
      193.75000000000003,
      418.74999999999994
    ],
    [
      221.875,
      390.625
    ],
    [
      193.75000000000006,
      362.5
    ],
    [
      221.87500000000003,
      334.37500000000006
    ],
    [
      250,
      362.5
    ],
    [
      221.87500000000006,
      390.625
    ],
    [
      250.00000000000003,
      418.74999999999994
    ],
    [
      278.125,
      390.62499999999994
    ],
    [
      306.25,
      418.74999999999994
    ],
    [
      278.125,
      446.87499999999994
    ],
    [
      306.25,
      474.99999999999994
    ],
    [
      278.125,
      503.12499999999994
    ],
    [
      250.00000000000003,
      474.99999999999994
    ],
    [
      221.87500000000009,
      503.12499999999994
    ],
    [
      250.00000000000006,
      531.2499999999999
    ],
    [
      278.125,
      503.12499999999994
    ],
    [
      306.25,
      531.2499999999999
    ],
    [
      334.37499999999994,
      503.1249999999999
    ],
    [
      306.25,
      474.99999999999994
    ],
    [
      334.375,
      446.87499999999994
    ],
    [
      362.5,
      474.99999999999994
    ],
    [
      390.62499999999994,
      446.875
    ],
    [
      362.5,
      418.75
    ],
    [
      334.375,
      446.87499999999994
    ],
    [
      306.25000000000006,
      418.74999999999994
    ],
    [
      334.375,
      390.625
    ],
    [
      306.25000000000006,
      362.5
    ],
    [
      334.375,
      334.37500000000006
    ],
    [
      362.5,
      362.5
    ],
    [
      334.37500000000006,
      390.625
    ],
    [
      362.5,
      418.74999999999994
    ],
    [
      390.625,
      390.62499999999994
    ],
    [
      418.75,
      418.74999999999994
    ],
    [
      446.87499999999994,
      390.625
    ],
    [
      418.75,
      362.5
    ],
    [
      446.875,
      334.37500000000006
    ],
    [
      474.99999999999994,
      362.5
    ],
    [
      446.875,
      390.625
    ],
    [
      474.99999999999994,
      418.74999999999994
    ],
    [
      503.1249999999999,
      390.625
    ],
    [
      531.2499999999999,
      418.74999999999994
    ],
    [
      503.12499999999994,
      446.8749999999999
    ],
    [
      531.2499999999999,
      474.9999999999999
    ],
    [
      503.125,
      503.12499999999983
    ],
    [
      475,
      474.99999999999994
    ],
    [
      446.87500000000006,
      503.1249999999999
    ],
    [
      475,
      531.2499999999999
    ],
    [
      503.125,
      503.1249999999999
    ],
    [
      531.25,
      531.2499999999999
    ],
    [
      559.375,
      503.1249999999999
    ],
    [
      531.25,
      474.99999999999994
    ],
    [
      559.375,
      446.87499999999994
    ],
    [
      587.5,
      474.99999999999994
    ],
    [
      615.625,
      446.87499999999994
    ],
    [
      587.5,
      418.74999999999994
    ],
    [
      559.375,
      446.87499999999994
    ],
    [
      531.25,
      418.74999999999994
    ],
    [
      559.375,
      390.625
    ],
    [
      531.25,
      362.5
    ],
    [
      559.375,
      334.375
    ],
    [
      587.5,
      362.5
    ],
    [
      615.625,
      334.375
    ],
    [
      587.5,
      306.25
    ],
    [
      559.375,
      334.375
    ],
    [
      531.25,
      306.25
    ],
    [
      503.125,
      334.375
    ],
    [
      531.25,
      362.5
    ],
    [
      503.125,
      390.625
    ],
    [
      475,
      362.5
    ],
    [
      503.125,
      334.375
    ],
    [
      475,
      306.25
    ],
    [
      446.875,
      334.375
    ],
    [
      418.75,
      306.25
    ],
    [
      446.875,
      278.125
    ],
    [
      418.75,
      250
    ],
    [
      446.875,
      221.875
    ],
    [
      475,
      250
    ],
    [
      446.875,
      278.125
    ],
    [
      475,
      306.25
    ],
    [
      503.125,
      278.125
    ],
    [
      531.25,
      306.25
    ],
    [
      559.375,
      278.125
    ],
    [
      531.25,
      250
    ],
    [
      559.375,
      221.875
    ],
    [
      587.5,
      250
    ],
    [
      615.625,
      221.875
    ],
    [
      587.5,
      193.75
    ],
    [
      559.375,
      221.875
    ],
    [
      531.25,
      193.75
    ],
    [
      559.375,
      165.625
    ],
    [
      531.25,
      137.5
    ],
    [
      559.375,
      109.37500000000003
    ],
    [
      587.5,
      137.50000000000003
    ],
    [
      559.375,
      165.62500000000003
    ],
    [
      587.5,
      193.75
    ],
    [
      615.625,
      165.625
    ],
    [
      643.75,
      193.75
    ],
    [
      671.875,
      165.625
    ],
    [
      643.75,
      137.5
    ],
    [
      671.875,
      109.37500000000003
    ],
    [
      700,
      137.50000000000003
    ],
    [
      671.875,
      165.62500000000003
    ],
    [
      700,
      193.75
    ],
    [
      728.125,
      165.625
    ],
    [
      756.25,
      193.75
    ],
    [
      728.125,
      221.875
    ],
    [
      756.25,
      250
    ],
    [
      728.125,
      278.125
    ],
    [
      700,
      250
    ]
  ]
];

console.log(sets.length);

// Make duplicate points so transitioning will work with anime
function duplicate(row) {
  const aggr = [];
  for (let i = 0; i < row.length - 1; i++) {
    aggr.push(row[i]);
    aggr.push(row[i]);
  }
  aggr.push(row[row.length-1]);
  return aggr;
}

const iter1 = duplicate(duplicate(duplicate(duplicate(duplicate(duplicate(sets[0]))))));
const iter2 = duplicate(duplicate(duplicate(duplicate(duplicate(sets[1])))));
const iter3 = duplicate(duplicate(duplicate(duplicate(sets[2]))));
const iter4 = duplicate(duplicate(duplicate(sets[3])));
const iter5 = duplicate(duplicate(sets[4]));
const iter6 = duplicate(sets[5]);
const iter7 = sets[6];

const mySets = [iter1, iter2, iter3, iter4 ,iter5, iter6, iter7]
mySets.map(arr => console.log(arr));

function pointsToPath(points) {
  const arrayOfStrings = [];
  arrayOfStrings.push(`M ${points[0][0]} ${points[0][1]}`);
  
  for (let i = 1; i < points.length; i++) {
    arrayOfStrings.push(`L ${points[i][0]} ${points[i][1]}`);
  }
  
  return arrayOfStrings.join(' ');
}

const pathSets = mySets.map(pointsToPath);
pathSets.push(pathSets[0]);

window.morphTest.querySelector('path').setAttribute('d', pathSets[0])

anime({
  targets: '#morphTest path',
  d: pathSets.map(set => ({ value: set})),
  easing: 'easeInOutQuint',
  duration: 20000,
  loop: true
});
              
            
!
999px

Console