triangle_flow.html

gistfile1.txt

<div class="container">

  <!--
  <svg width="100%" height="100%" viewBox="0 0 496 215" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M496 91C374.38 91 121.129 1 -9 1" stroke="#EDEBEB" />
    <path d="M495 113C373.62 113 120.871 68 -9 68" stroke="#EDEBEB" />
    <path d="M495 129C375.788 129 127.552 151 0 151" stroke="#EDEBEB" />
  </svg>
  <svg width="100%" height="100%" viewBox="0 0 496 215" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient">
      
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="0.8" stop-color="white" stop-opacity="1" />
        <stop offset="0.8" stop-color="white" stop-opacity="0" />
      </linearGradient>

      <mask id="gradient-mask">
        <rect class="mask-rect" x="-50%" y="0" width="100%" height="100%" fill="url(#gradient)" />
      </mask>
    </defs>
    <path d="M496 91C374.38 91 121.129 1 -9 1" stroke="#FB5844" mask="url(#gradient-mask)" />
    <path d="M495 113C373.62 113 120.871 68 -9 68" stroke="#E6FF02" mask="url(#gradient-mask)" />
    <path d="M495 129C375.788 129 127.552 151 0 151" stroke="#02B0FF" mask="url(#gradient-mask)" />
    
  </svg>-->
  
 <svg width="100%" height="100%" viewBox="0 0 302 262" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 261.5C120.853 227.12 186.481 227.864 301 261.5" stroke="#EDEBEB" />
<path d="M301.09 260.808C211.389 174.202 179.219 116.994 151.09 0.999991" stroke="#EDEBEB" />
<path d="M151,0.99999C120.847,121.986 87.3891,178.449 1,260.808" stroke="#EDEBEB" />
</svg>
  <svg width="100%" height="100%" viewBox="0 0 302 262" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient">
        <!-- white shows, black hides-->
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="0.8" stop-color="white" stop-opacity="1" />
        <stop offset="0.8" stop-color="white" stop-opacity="0" />
      </linearGradient>

      <mask id="gradient-mask-x">
        <rect class="mask-rect-x" x="-50%" y="0" width="100%" height="100%" fill="url(#gradient)" />
       </mask>
             <mask id="gradient-mask-y">
        <rect class="mask-rect-y" x="0" y="-50%" width="100%" height="100%" fill="url(#gradient)" />
       </mask>
    </defs>
    <path d="M1 261.5C120.853 227.12 186.481 227.864 301 261.5" stroke="#844BEB" mask="url(#gradient-mask-x)" />
<path d="M301.09 260.808C211.389 174.202 179.219 116.994 151.09 0.999991" stroke="#E6FF02" mask="url(#gradient-mask-y)"/>
<path d="M151,0.99999C120.847,121.986 87.3891,178.449 1,260.808" stroke="#FF0000" mask="url(#gradient-mask-y)" />
  </svg>
</div>


.container {
  width: 945px;
  height: 400px;
  position: relative;
  margin-top: 4rem;
  margin-right: auto;
  margin-left: auto;
}

.container svg {
  position: absolute;
  inset: 0;
}

@keyframes slideMaskX {
  from {
    x: -100%;
  }
  to {
    x: 100%;
  }
}

@keyframes slideMaskY {
  from {
    y: -100%;
  }
  to {
    y: 100%;
  }
}


.container .mask-rect-x {
  animation: slideMaskX 5s linear infinite;
}
.container .mask-rect-y {
  animation: slideMaskY 5s linear infinite;
}