JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<div class="detail_img">
  <img src="https://seasonkrasoty.ru/upload/iblock/209/209d8f2fed381faad6e7313cd1372e60.jpg">
  <div class="pa h100 w100 t0 l0 r0">

<div class="pr">
<svg viewBox="0 0 200 200" fill="transparent" class="line1">
<text x="130" y="25" font-size="5" font-weight="normal" 
    font-family="Arial, sans-serif">
        Этот кот в SVG
    </text>
<path class="path" stroke-width="0.1%" d="
      M160,30
      l-20,0
      L80,50      
      " />
</svg>
</div>
  </div>
</div>

CSS

.detail_img {
  position: relative;
}

.detail_img img {
  width: 500px;
 max-width: 100%;
}

.pa {
position: absolute;
}

.h100 {
  height: 100%;
}

.w100 {
  width: 100%;
}

.t0 {
  top: 0;
}

svg.line1 {
  stroke-width: 1px;
  stroke: black;
}

.path {
   animation: dash 5s linear forwards;
   stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}