Invert the left svg animation? - css

Question

Here is my code https://codepen.io/victoreugen2002/pen/PoJJPzP
I am trying to animate the left and right svg, to acheive this:
both starting at the same time from the top and they continue drawing.
until they both met at the bottom in the middle.
In order to acheive this I am thinking of inversing the animation for left svg, but it's not working:
.left {
width: 50%;
stroke-dasharray: 1855.968505859375;
animation: dash 2s ease-in;
#keyframes dash {
from {
stroke-dashoffset: 1855.968505859375;
}
to {
stroke-dashoffset: 3710;
}
}
svg {
left: 0;
}
}

Answer 1

You had to go from -1855.968505859375 to 0.
.left {
width: 50%;
stroke-dasharray: 1855.968505859375;
animation: dash-left 2s ease-in;
}
.left svg {
left: 0;
}
.right {
width: 50%;
stroke-dasharray: 1855.968505859375;
animation: dash-right 2s ease-in;
}
.right svg {
right: 0;
}
svg {
position: absolute;
top: 20px;
width: 50%;
stroke-width: 5px;
}
#keyframes dash-left {
from { stroke-dashoffset: -1855.968505859375 }
to { stroke-dashoffset: 0 }
}
#keyframes dash-right {
from { stroke-dashoffset: 1855.968505859375 }
to { stroke-dashoffset: 0 }
}
<div class="left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 425">
<path d="M733,424.5H39A38.5,38.5,0,0,1,.5,386V39A38.5,38.5,0,0,1,39,.5H733" style="fill: none;stroke: #78be21"/>
</svg>
</div>
<div class="right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 425">
<path d="M0,.5H694A38.5,38.5,0,0,1,732.5,39V386A38.5,38.5,0,0,1,694,424.5H0" style="fill: none;stroke: #78be21"/>
</svg>
</div>