svg animated a diamond path "d"-CodePudding

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.

CodePudding user response：

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" />
</svg>