Morphing SVG line from straight to expanded

Question

So what I am trying to achieve here is a smooth morphing between 2 SVG shapes.

As you can see from these both images these are the start and endstate of how it should look. The problem comes when I am trying to morph it.

While it is morphing it keeps closing the shape and if I look into the devtools it always appends the Z indicator at the end of my d attribute in the path tag.

I used several libraries and as of writing right now I am using D3 with flubber. Before that KUTE and animejs. All with the same result.

I have a back and forth with my designers that provided me with several different svgs to try out and I also tried svg software out and draw it by hand all with the same exact result.

Just for reference that would be my svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 128">
        <path
          id="straightTwo"
          d="m 2,123.84 21.739273,0.0182 40.181833,0.003 391.239074,-0.14697 32.8891,0.13722 229.58891,-0.17218Z"
          fill="none"
          stroke="blue"
          stroke-linecap="round"
          stroke-width="3"
        />
    </svg>

And the logic (quite messy right now) I have in place with D3:

const path1 =
        'm 2,123.84 21.739273,0.0182 40.181833,0.003 391.239074,-0.14697 32.8891,0.13722 229.58891,-0.17218';
      const path2 =
        'M2,123.84l21.9-4v-36L470.59,1.24V81.37S635.46,68.61,696,64';
      const interpolator = interpolate(path1, path2);
      d3.select('#straightTwo')
        .transition()
        .duration(25550)
        .attrTween('d', function() {
          return interpolator;
        });

So I've basically defining the start and endpath there and was hoping the steps in between would be done by D3/flubber. I paid attention that there are the same amount of nodes in between those shapes (that's what INKSCAPE and Illustrator tell me at least). I am literally out of ideas here why it would always close the shape while morphing instead of just "dragging" the nodes up. Is this even possible or am I trying the unachievable here and there would be a better solution for it?

Cheers, Dan

You might want to try https://github.com/pbeshai/d3-interpolate-path instead — Michael Mullany, Jul 30 '21 at 13:12
Might want to look at tweaking https://github.com/veltman/flubber/blob/master/src/svg.js - the toPathString function seems to be responsible for adding a "Z" to paths. If you get rid of the + "Z" - it might work. — Michael Mullany, Aug 01 '21 at 11:50
Tried that, but removing that "Z" gives really weird results. — drood87, Aug 17 '21 at 07:40

score 1 · Answer 1 · answered Aug 17 '21 at 13:44

This is relatively easy to do by hand with the animate element. Just remember that each path must have the exact same number of commands in the same order. (I've added explicit "l"'s in the path below so you can see how they match up.) This means that in your simple horizontal line, you need to insert dummy "v's" that do nothing - just so that the path has the same structure as the other one.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 128">
        <path
          id="straightTwo"
          d="m 2 123.8 l 21.7 0 v 0 l 391 0 v 0 l 229 0"
          fill="none"
          stroke="blue"
          stroke-linecap="round"
          stroke-width="3">
  
  <animate attributeName="d" from="m 2 123.8 l 21.7 -10 v -20 l 391 -40 v 25 l 229 -10" to="m 2 123.8 l 21.7 0 v 0 l 391 0 v 0 l 229 0" dur="5s"/>
  
  </path>
    </svg>

Morphing SVG line from straight to expanded

1 Answers1