Transforming one SVG shape to another

index.html

<p> Used embedded information to transform SVG shape between two paths, and carry a set of rects with it</p>
<div style="display: flex; flex-flow: row wrap; justify-content: space-around; max-width: 1000px">
<div style="width:200px; height:200px; margin: 10px;">
<svg xmlns="http://www.w3.org/2000/svg" id="svg-1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="1000" height="1000" viewBox="0 0 1000 1000"> 
  <defs>
  <pattern patternContentUnits="userSpaceOnUse" width="100%" height="100%" id="pattern1">
  <rect x="260" y="260" width="10" height="10" fill-opacity="1" fill="blue" stroke="#F06D06" stroke-width="2" />
  <rect x="280" y="300" width="10" height="10" fill-opacity="1" fill="blue" stroke="#F06D06" stroke-width="2" />
   <rect x="350" y="300" width="10" height="10" fill-opacity="1" fill="blue" stroke="#F06D06" stroke-width="2" />
    <rect x="370" y="380" width="10" height="10" fill-opacity="1" fill="blue" stroke="#F06D06" stroke-width="2" />
    <rect x="500" y="500" width="10" height="10" fill-opacity="1" fill="blue" stroke="#F06D06" stroke-width="2" />
    </pattern>
  </defs>
  <path id="path-1" d="M 250 250 L 750 250 L 750 750 L 250 750 Z" stroke="red" stroke-width="3" stroke-opacity="1" fill="url(#pattern1)" />

  <animate xlink:href="#path-1"
    attributeName="d"
    attributeType="XML"
           repeatCount="10" 
    from="M 250 250 L 750 250 L 750 750 L 250 750 Z"
        to="M 200 250 L 700 280 L 760 730 L 260 650 Z "
    dur="10s"
    fill="freeze" />
  
  </svg>
  </div>
</div>

script.js

var svg1 = document.getElementById("svg-1");
var svg2 = document.getElementById("svg-2");
var path1 = svg1.getElementById("path-1");
var path2 = svg2.getElementById("path-2");

transforming-one-svg-shape-to-another.markdown

Transforming one SVG shape to another

A Pen by Fox Peterson on CodePen.

License.