Getting current coordinates for a morphing svg with javascript

Question

I am attempting to take an svg path that is morphing in response to the user's mouse movements and expand it into a stable rectangle when the user clicks a button. The current project is here (please note that this is taken from a codrops demo with a few alterations): https://codepen.io/redheadedmandy/pen/RjBKeQ

Assuming that there is a way to call the current coordinates of the SVG, I figured I would do the following on the click of the button:

var currentPoints = ; // insert current path here

var clickMorph = anime({
    targets: '.morpho',
    d: [
        {currentPoints},
        {value: ''} // I also need to figure out what the best way to morph it into a retangle is... 
    ],
    easing: 'easeOutQuad',
    duration: 1500,
    loop: false
});

The problem is that I have no idea where the coordinates for the shape's path are at any given time-- as far as I can tell, in order to make that guided morph to a rectangle, anime.js would need the initial coordinates of the path. (I may be totally wrong about that.) If anyone has a suggestion for how to do this, I would be most grateful! (Or if you've noticed that my understanding of anime.js is completely flawed, that would be helpful too.)

Answer 1

In my opinion, - the best practice of mastering JS libraries for SVG animation is - understanding the basics of creating the simplest SVG figures and their manual animation.
Let me show you, on a concrete example, one way how this can be done.

Create an animation of the morphing of a pentagon into a square.

To morph one figure into another, you need two patches with the same number of nodes.
In our case, if a pentagon should have five nodes, then the patch of the square also has five.
Draw the shapes in a vector editor, for example, Inkscape.

• Set the size of the document 400х400 px

• We set the horizontal and vertical guides that run through the center of the document and the anchor points. In the figure below, these are blue lines. On them we will navigate when dragging nodes.

• In the tool palette, select the polygons

• Set the cursor to the center of the document and draw a pentagon

• Select the menu: Contour / Ocontur object (Shift + Ctrl + C)
• We save the files in * .svg format, but the editor does not close
• From the entire code of the file, we need only one line with the attribute d = "m ..z"

<path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />

• Return to Inkscape, select the tool - edit the contour nodes, and drag the nodes to make a square

  

• Again, save the file and copy the new values of the attribute d = "m .." The values we get are needed to substitute in the variable values = ".."

values="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z;
         m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z"

A semicolon separates the path values for a square and a pentagon. With the animation, the path will change from one value to another.

Below is the code that implements the animation of a smooth transformation of one figure into another:

Start animation when clicking on svg

 <svg id="svg2" width="400" height="400" viewBox="0 0 400 400" id="svg2" version="1.1">
      
      <g id="layer1" transform="translate(0,-652.36216)" style="fill:yellowgreen;stroke-width:3;stroke:dodgerblue">
        <path d="m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z" >
      <animate attributeName="d" begin="svg2.click" dur="6s" fill="freeze" repeatCount="1" restart="whenNotActive" 
          values=" m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z;
             m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />   
          

 </path>
      </g>
    </svg>  

Where,

<animate attributeName="d" - animation command attribute 'd'

begin="svg2.click" - start animation when clicking on svg

dur="6s" - Animation duration 6 seconds

fill="freeze" - After the animation ends, the figure freezes in its final position

repeatCount="1" - Single repetition

restart="whenNotActive" - prohibit the animation from restarting until it finishes

More complex example of the same technique

Animation tooltip with notches at the arrow

• From an svg file made in Inkscape, copy the patch blank tooltip

<svg version="1.1"  viewBox="0 0 240 240"  >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

• Change the shape of the workpiece tooltip by dragging the nodes

• Again copy the patch from the new svg file Inkscape

<svg id="svg1" version="1.1"  viewBox="0 0 240 240"   >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.4;stroke:#0391fd"/>
  </svg>

• Just like in the first example, we make the animation an attribute of the patch d

body {
  background: url('http://badumka.ru/images/1523569_krasochnaya-priroda.jpg') no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bdiv {
  display: table;
}

.container {
  position: relative;
  width: 500px;
  margin: 0 auto;
}  

<div class="bdiv">
  <div class="container">
    <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <g transform="scale(0.8)">
        <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
          <animate id="an_path" attributeName="d" values="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z  "
          begin="svg1.click" dur="8s" repeatCount="1" fill="freeze"></animate>
        </path>
        <text x="30" y="50" font-size="18" fill="white">click me </text>
      </g>
    </svg>
  </div>
</div>

Animating the attribute "d" of the patch is a very powerful and efficient tool that allows you to implement a variety of transformations.

After mastering and understanding the manual method of animating SVG shapes, it is much easier to be utilized libraries JS.