Как сделать такой эффект при ховере? [закрыт]

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body { 
  padding: 1rem; 
} 
 
.title { 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
  font-size: 3rem; 
  font-weight: 700; 
  line-height: 1; 
  padding: 0 1rem; 
} 
 
.title__line { 
  position: absolute; 
  top: 10px; 
  left: 0; 
  width: 0; 
  height: 2px; 
  background: #95A7FF; 
  transition: width .3s linear; 
  transition-delay: .3s; 
} 
 
.title__line:nth-of-type(2) { 
  top: 15px; 
  left: 10%; 
  transition-delay: .4s; 
} 
 
.title__line:nth-of-type(3) { 
  top: 20px; 
  left: 10%; 
  transition-delay: .5s; 
} 
 
.title__line:nth-of-type(4) { 
  top: 25px; 
  left: 15%; 
  transition-delay: .6s; 
} 
 
.title__line:nth-of-type(5) { 
  top: 30px; 
  left: 15%; 
  transition-delay: .7s; 
} 
 
.title__line:nth-of-type(6) { 
  top: 35px; 
  left: 20%; 
  transition-delay: .8s; 
} 
 
.title__line:nth-of-type(7) { 
  top: 40px; 
  left: 25%; 
  transition-delay: .9s; 
} 
 
.title:hover .title__line:nth-of-type(1), 
.title:hover .title__line:nth-of-type(3), 
.title:hover .title__line:nth-of-type(6) { 
  width: 80%; 
} 
 
.title:hover .title__line:nth-of-type(2) { 
  width: 70%; 
} 
 
.title:hover .title__line:nth-of-type(4) { 
  width: 90%; 
} 
 
.title:hover .title__line:nth-of-type(5), 
.title:hover .title__line:nth-of-type(7) { 
  width: 60%; 
}

<h1 class="title"> 
  <span class="title__line"></span> 
  <span class="title__line"></span> 
  <span class="title__line"></span> 
  <span class="title__line"></span> 
  <span class="title__line"></span> 
  <span class="title__line"></span> 
  <span class="title__line"></span> Title text 
</h1>