DDAC/app/assets/svg/home/arrow.svg

<svg width="514" height="347" viewBox="0 0 514 347" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
  .flowCore,
  .flowGlow {
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .flowCore {
    stroke: rgba(255, 255, 255, 0.88);
  }

  .flowGlow {
    stroke: rgba(150, 215, 255, 0.32);
    filter: url(#flowBlur);
  }

  @media (prefers-reduced-motion: reduce) {
    .flowGroup {
      display: none;
    }
  }
</style>
<path d="M252.5 0V19.5C252.5 47.1142 230.114 69.5 202.5 69.5H124.5C69.2715 69.5 24.5 114.272 24.5 169.5V338.5" stroke="url(#paint0_linear_378_1168)" stroke-width="10"/>
<g class="flowGroup" mask="url(#flowMaskY)">
<path class="flowGlow" d="M252.5 0V19.5C252.5 47.1142 230.114 69.5 202.5 69.5H124.5C69.2715 69.5 24.5 114.272 24.5 169.5V338.5" stroke-width="16"/>
<path class="flowCore" d="M252.5 0V19.5C252.5 47.1142 230.114 69.5 202.5 69.5H124.5C69.2715 69.5 24.5 114.272 24.5 169.5V338.5" stroke-width="8"/>
</g>
<path d="M24.5 346.5L45.7176 326.25H3.28238L24.5 346.5Z" fill="#B6B4FF"/>
<path d="M261 0.5V20C261 47.6142 283.386 70 311 70H389C444.228 70 489 114.772 489 170V339" stroke="url(#paint1_linear_378_1168)" stroke-width="10"/>
<g class="flowGroup" mask="url(#flowMaskY)">
<path class="flowGlow" d="M261 0.5V20C261 47.6142 283.386 70 311 70H389C444.228 70 489 114.772 489 170V339" stroke-width="16"/>
<path class="flowCore" d="M261 0.5V20C261 47.6142 283.386 70 311 70H389C444.228 70 489 114.772 489 170V339" stroke-width="8"/>
</g>
<path d="M489 347L467.782 326.75H510.218L489 347Z" fill="#B6B4FF"/>
<defs>
<linearGradient id="flowSweepY" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="white" stop-opacity="0"/>
<stop offset="0.42" stop-color="white" stop-opacity="0"/>
<stop offset="0.5" stop-color="white" stop-opacity="1"/>
<stop offset="0.58" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<mask id="flowMaskY" maskUnits="userSpaceOnUse">
<rect x="-40" y="-280" width="594" height="280" fill="url(#flowSweepY)">
<animate attributeName="y" from="-280" to="347" dur="2.2s" repeatCount="indefinite"/>
</rect>
</mask>
<filter id="flowBlur" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2"/>
</filter>
<linearGradient id="paint0_linear_378_1168" x1="153" y1="-152.5" x2="140.5" y2="449" gradientUnits="userSpaceOnUse">
<stop stop-color="#564EFF"/>
<stop offset="1" stop-color="#D2D0FF"/>
</linearGradient>
<linearGradient id="paint1_linear_378_1168" x1="360.5" y1="-152" x2="373" y2="449.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#564EFF"/>
<stop offset="1" stop-color="#D2D0FF"/>
</linearGradient>
</defs>
</svg>