0👍
If I’ve understood what you’re asking then the problem with the first example is just that the target path isn’t quite what you want.
Inside the d value there’s a section that says V895. That draws down to point 895. But your viewBox has height 932, so there are 37 pixels left as a gap at the bottom.
Contrast that with your original path which has V932, drawing all the way to the bottom.
I’m not entirely sure what you’re trying to do or how you ended up in this situation but changing V895 to V932 in the target d value should prevent the bottom of the blue region from creeping up.
I don’t really understand what problem you’re describing for the second example. If it’s playing in reverse then surely you just need to switch the two paths around?
Update:
First, I recommend the MDN guide to SVGs. It is an excellent introduction to drawing basic shapes:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
For your latest example there are some strange things going on with half pixels. By itself there’s nothing wrong with using half-pixels but it isn’t being consistent between the start path and the end path.
Here’s one way you might achieve the desired effect.
First let’s draw the initial rectangle. You can use <rect> to draw a rectangle but I’ll stick to using <path> as it’s what you’ve been using.
First I’d move the cursor to the bottom-left of the image. That’s M0 300. Then I’d draw the horizontal line along the bottom, H652. Then up the right-hand side, V0. Then along the top, H0. Finally, use a Z to join it up to the start. Note that with capital letters the co-ordinates are all absolute, not relative. So when I write something like V0 that means ‘move vertically until y is 0’. You could do something similar using lower-case letters and then the numbers would be relative to the current cursor position.
The finished path is:
<path class="polymorph" d="M0 300H652V0H0Z" fill="black"/>
You can insert extra spaces to make it easier to read, M0 300 H652 V0 H0 Z.
For the target path it’s very similar except we need to change the V0. We don’t want the black rectangle to extend all the way to the top (the top being 0). In your example you had the rectangle’s final height as 44, so I’m going to stick with that. Given we have a viewBox height of 300 that means we need V256, which is 300 - 44.
So that gives:
{ value: 'M0 300H652V256H0Z'}
To solve these kinds of problems I suggest turning off the animation. Instead just try to draw the target path in your static HTML. Once you’ve got it drawing the right thing you can move on to trying to animate it.