JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<svg class="project-banner-separator" viewBox="0 0 440 35">
  <line x1="0" y1="-10" x2="440" y2="-10" stroke="white" stroke-width="0.5">     <animate attributeName="y1" dur="100ms" to="30" fill="freeze" />
    <animate attributeName="y2" dur="200ms" to="5" fill="freeze" />
  </line>
  <line x1="0" y1="-10" x2="440" y2="-10" stroke="white" stroke-width="0.5">
    <animate attributeName="y1" dur="300ms" to="25" fill="freeze" />
    <animate attributeName="y2" dur="400ms" to="20" fill="freeze" />
  </line>
  <line x1="0" y1="-10" x2="440" y2="-10" stroke="white" stroke-width="0.5">
    <animate attributeName="y1" dur="500ms" to="5" fill="freeze" />
    <animate attributeName="y2" dur="600ms" to="35" fill="freeze" />
  </line>
</svg>

CSS

body {
  margin-top: 50px;
  background: black;
}
/* .project-banner-separator line{
  animation: slidein 2s ease-in;
}
.project-banner-separator:nth-child(2){
  animation-delay: 0.3s;
}
.project-banner-separator:nth-child(3){
  animation-delay: 0.5s;
}
@keyframes slidein {
  from {
    transform: translateY(-200px);
  }
  
  to {
    transform: translateY(0);
  }
} */