svg animated a diamond path "d" - html

Question

I wanted to animated this dash line diamond but since it path d and I don't know how to make that work... I basically search some stuff like this one. https://codepen.io/MyXoToD/pen/xxrGdR?editors=1100 that I found in article in svg path d but I don't know how it works...Also my problem is just simple.
<svg width="119" height="30" viewBox="0 0 119 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 0V25H10.7735L6 29.7735L0.226501 24L6 18.2265L10.7735 23H117V0H119Z" fill="black"/>
</svg>
When it hovers it will animated from creating the diamond to the edge of line... and then it will stays there unless it unhover. Thats it.

Answer 1

Is this what you mean?
The existing path is a filled shape that incorporates the diamond. I had to separate the diamond out into its own path. Then change the rest of the path to a line.
Then when you hover, we apply an animation to the diamond. It gets moved along the line and up to the top right corner.
svg:hover .diamond {
animation: move 0.5s ease-in forwards;
}
#keyframes move {
0% {
transform: translate(0,0);
}
82% {
transform: translate(112px,0);
}
100% {
transform: translate(112px,-24px);
}
}
<svg width="119" height="30" viewBox="0 -6 124 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- the L-shaped path -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M 118,0 V 24 H 6" fill="none" stroke="black" stroke-width="2"/>
<!-- the moving diamond -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.7735,24 L 6,29.7735 L 0.2265,24 L 6,18.2265 L 11.7735,24Z" fill="black" class="diamond"/>
</svg>