JSFiddle - React, Tailwind, and code Playground

HTML

<p>Текст</p>
<svg viewbox="0,0,300,400">
  <circle cx="50" cy="30" r="5" class="dot"/>
  <g>
    <path d="M50,30 L50,200 L150,200" class="path line1"/>
    <text x="160" y="205" class="text">I love SVG!</text>
  </g>
  <g>
     <path d="M80,200 L80,300 L200, 300" class="path"/>
     <text x="210" y="305" class="text">Me too!</text>
  </g>

</svg>

CSS

svg{
  display:block;
  margin:auto;
  width:300px;
  height:400px;
  background:#67acff;
}
circle{
  visibility:hidden;
}
svg:hover circle{
  visibility:visible;
}
.text{
  fill:#333;
  opacity:0;
  animation-fill-mode: forwards;
}
svg:hover .text{
 animation-name:show;
}
.dot{
  fill:#333;
}
.path{
  stroke:#333;
  fill:none;
  animation-fill-mode: forwards;
}
svg:hover .path{
  animation-name:draw;
}
@keyframes draw{
  to{stroke-dashoffset:0;}
}
@keyframes show{
  to{opacity:1;}
}
p{
  font-size: 20px;
  color: red;
}

JavaScript

var path = document.querySelectorAll('.path');
var text = document.querySelectorAll('.text');
var transition_duration = 0.5;
for(var i = 0, l = path.length; i < l; i++){
	var length = path[i].getTotalLength();
  path[i].style.strokeDasharray = length;
  path[i].style.strokeDashoffset = length;
  path[i].getBoundingClientRect();
  path[i].style.animationDuration = transition_duration + 's';
  path[i].style.animationDelay = transition_duration * i + "s";
  if("undefined" !== typeof text[i]){
  	text[i].style.animationDuration = transition_duration + 's';
  	text[i].style.animationDelay = transition_duration * (i + 1) + "s";
  }
  
}