images/sep_line.svg

<svg fill="none" viewBox="0 0 1000 5" width="1000" height="5" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        @keyframes gradient {
          0% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }

        .sep-line {
          background: linear-gradient(90deg, rgba(252,126,79,0),  rgba(252,126,79,0.05), rgba(252,126,79,1), rgba(252,126,79,0.05), rgba(252,126,79,0));
          background-size: 900% 900%;
          animation: gradient 5s ease infinite;

          width: 100%;
          height: 3px;

          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
        }

        @media (prefers-reduced-motion) {
          .container {
            animation: none;
          }
        }
      </style>

      <div class="sep-line"></div>
    </div>
  </foreignObject>
</svg>