arrow2.svg 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <svg width="49" height="109" viewBox="0 0 49 109" fill="none" xmlns="http://www.w3.org/2000/svg">
  2. <style>
  3. .flowCore,
  4. .flowGlow {
  5. stroke-linecap: round;
  6. stroke-linejoin: round;
  7. }
  8. .flowCore {
  9. stroke: rgba(255, 255, 255, 0.9);
  10. }
  11. .flowGlow {
  12. stroke: rgba(150, 215, 255, 0.34);
  13. filter: url(#flowBlur);
  14. }
  15. @media (prefers-reduced-motion: reduce) {
  16. .flowGroup {
  17. display: none;
  18. }
  19. }
  20. </style>
  21. <path d="M25 0V102.5" stroke="url(#paint0_linear_378_1216)" stroke-width="10"/>
  22. <g class="flowGroup" mask="url(#flowMaskY)">
  23. <path class="flowGlow" d="M25 0V102.5" stroke-width="16"/>
  24. <path class="flowCore" d="M25 0V102.5" stroke-width="8"/>
  25. </g>
  26. <path d="M24.5 108.5L45.7176 88.25H3.28238L24.5 108.5Z" fill="#B6B4FF"/>
  27. <defs>
  28. <linearGradient id="flowSweepY" x1="0" y1="0" x2="0" y2="1">
  29. <stop offset="0" stop-color="white" stop-opacity="0"/>
  30. <stop offset="0.42" stop-color="white" stop-opacity="0"/>
  31. <stop offset="0.5" stop-color="white" stop-opacity="1"/>
  32. <stop offset="0.58" stop-color="white" stop-opacity="0"/>
  33. <stop offset="1" stop-color="white" stop-opacity="0"/>
  34. </linearGradient>
  35. <mask id="flowMaskY" maskUnits="userSpaceOnUse">
  36. <rect x="-20" y="-200" width="89" height="200" fill="url(#flowSweepY)">
  37. <animate attributeName="y" from="-200" to="109" dur="1.45s" repeatCount="indefinite"/>
  38. </rect>
  39. </mask>
  40. <filter id="flowBlur" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  41. <feGaussianBlur stdDeviation="2"/>
  42. </filter>
  43. <linearGradient id="paint0_linear_378_1216" x1="25.5636" y1="-64.3095" x2="-66.074" y2="-7.3816" gradientUnits="userSpaceOnUse">
  44. <stop stop-color="#564EFF"/>
  45. <stop offset="1" stop-color="#D2D0FF"/>
  46. </linearGradient>
  47. </defs>
  48. </svg>