<svg class='letter-v' data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
    <title>scsi</title>
    <rect x="0" y="0" width="800" height="800" />
    <path style="--line: 1" class="line cls" d="M533.37,692.37c51.71,0,96.48-59.13,107.7-142.25L700.3,171.25C711.51,88.14,751.22,0,808,0h60.38" />
    <path style="--line: 2" class="line cls" d="M518.82,692.37c51.7,0,96.47-59.13,107.69-142.25l59.23-378.87C697,88.14,736.66,0,793.43,0h60.38" />
    <path style="--line: 3" class="line cls" d="M504.26,692.37c51.71,0,96.48-59.13,107.7-142.25l59.22-378.87C682.4,88.14,722.11,0,778.88,0h60.37" />
    <path style="--line: 4" class="line cls" d="M489.7,692.37c51.71,0,96.48-59.13,107.7-142.25l59.23-378.87C667.84,88.14,707.55,0,764.32,0H824.7" />
    <path style="--line: 5" class="line cls" d="M475.15,692.37c51.7,0,96.47-59.13,107.69-142.25l59.23-378.87C653.29,88.14,693,0,749.76,0h60.38" />
    <path style="--line: 6" class="line cls" d="M460.59,692.37c51.71,0,96.48-59.13,107.69-142.25l59.23-378.87C638.73,88.14,678.44,0,735.21,0h60.37" />
    <path style="--line: 7" class="line cls" d="M446,692.37c51.71,0,96.48-59.13,107.7-142.25L613,171.25C624.17,88.14,663.88,0,720.65,0H781" />
    <path style="--line: 8" class="line cls" d="M431.48,692.37c51.7,0,96.47-59.13,107.69-142.25L598.4,171.25C609.62,88.14,649.32,0,706.09,0h60.38" />
    <path style="--line: 9" class="line cls-9" d="M533.37,692.37c-51.7,0-96.47-52.87-107.69-127.18L366.45,232.81c-11.21-74.31-50.92-127.18-107.69-127.18H198.38" />
    <path style="--line: 9" class="line cls-9" d="M518.82,692.37c-51.71,0-96.48-52.87-107.7-127.18L351.9,232.81C340.68,158.5,301,105.63,244.2,105.63H183.82" />
    <path style="--line: 10" class="line cls-10" d="M504.26,692.37c-51.71,0-96.48-52.87-107.69-127.18L337.34,232.81c-11.22-74.31-50.93-127.18-107.7-127.18H169.27" />
    <path style="--line: 10" class="line cls-10" d="M489.7,692.37c-51.7,0-96.47-52.87-107.69-127.18L322.78,232.81c-11.21-74.31-50.92-127.18-107.69-127.18H154.71" />
    <path style="--line: 11" class="line cls-11" d="M475.15,692.37c-51.71,0-96.48-52.87-107.7-127.18L308.23,232.81C297,158.5,257.3,105.63,200.53,105.63H140.15" />
    <path style="--line: 11" class="line cls-11" d="M460.59,692.37c-51.71,0-96.48-52.87-107.69-127.18L293.67,232.81C282.45,158.5,242.74,105.63,186,105.63H125.6" />
    <path style="--line: 12" class="line cls-12" d="M446,692.37c-51.7,0-96.47-52.87-107.69-127.18L279.11,232.81c-11.22-74.31-50.92-127.18-107.69-127.18H111" />
    <path style="--line: 12" class="line cls-12" d="M431.48,692.37c-51.71,0-96.48-52.87-107.7-127.18L264.56,232.81c-11.22-74.31-50.93-127.18-107.7-127.18H96.48" />
    <path style="--line: 13" class="line cls-13" d="M417.19,692.37c-51.71,0-96.48-52.87-107.69-127.18L250.27,232.81c-11.22-74.31-50.92-127.18-107.69-127.18H82.2" />
    <path style="--line: 13" class="line cls-13" d="M402.64,692.37c-51.71,0-96.48-52.87-107.7-127.18L235.71,232.81C224.5,158.5,184.79,105.63,128,105.63H67.64" />
    <path style="--line: 14" class="line cls-14" d="M388.08,692.37c-51.71,0-96.48-52.87-107.7-127.18L221.16,232.81c-11.22-74.31-50.93-127.18-107.7-127.18H53.09" />
    <path style="--line: 14" class="line cls-14" d="M373.52,692.37c-51.71,0-96.48-52.87-107.69-127.18L206.6,232.81C195.38,158.5,155.68,105.63,98.91,105.63H38.53" />
    <path style="--line: 15" class="line cls-15" d="M359.24,692.37c-51.71,0-96.48-52.87-107.7-127.18L192.32,232.81C181.1,158.5,141.39,105.63,84.62,105.63H24.24" />
    <path style="--line: 15" class="line cls-15" d="M344.68,692.37C293,692.37,248.2,639.5,237,565.19L177.76,232.81c-11.22-74.31-50.93-127.18-107.7-127.18H9.69" />
    <path style="--line: 16" class="line cls-16" d="M330.12,692.37c-51.7,0-96.47-52.87-107.69-127.18L163.2,232.81C152,158.5,112.28,105.63,55.51,105.63H-4.87" />
    <path style="--line: 16" class="line cls-16" d="M315.57,692.37c-51.71,0-96.48-52.87-107.7-127.18L148.65,232.81C137.43,158.5,97.72,105.63,41,105.63H-19.43" />
</svg>
body 
  margin: 0
  padding: 0
  background-color: #000

.letter-v
  max-height: 100vh
  max-width: 100vh
.line
    fill: none
    stroke-miterlimit: 10
    stroke-width: 4px  

$colors: (#fff,#ff7b77,#ed3c9e,#13afff,#2972ff,#293bff,#8b14ff,#d57fff)  
.cls
  stroke: #fff
.cls-9 
    stroke: #fff
.cls-10 
    stroke: #ff7b77
.cls-11 
    stroke: #ed3c9e
.cls-12 
    stroke: #13afff
.cls-13 
    stroke: #2972ff
.cls-14 
    stroke: #293bff
.cls-15 
    stroke: #8b14ff
.cls-16 
    stroke: #d57fff
  

.letter-v path
  
  $delay: calc(.1s * var(--line))
  $number: calc(var(--line) * 1)
  $ease: cubic-bezier(0,1.89,1,-0.72)
  position: relative
  +animator(lines, (duration: 3s, delay: $delay, iteration-count: infinite, timing-function: $ease))
    5%
      stroke: nth($colors, 1)
    10%
      stroke: nth($colors, 2)
    15%
      stroke: nth($colors, 3)
    20%
      stroke: nth($colors, 4)
    25%
      stroke: nth($colors, 5)
    30%
      stroke: nth($colors, 6)

  
    50%
      stroke: nth($colors, 7)
      transform: translateX(5px)
    50%
      stroke: nth($colors, 8)
View Compiled
Run Pen

External CSS

  1. https://raw.githubusercontent.com/ruidovisual/sass-mixins/master/mixins.sass

External JavaScript

This Pen doesn't use any external JavaScript resources.