user2-tail.svg 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <svg width="14" height="151" viewBox="0 0 14 151" fill="none" xmlns="http://www.w3.org/2000/svg">
  2. <style>
  3. .flowCore,
  4. .flowGlow {
  5. fill-rule: evenodd;
  6. }
  7. .flowCore {
  8. fill: rgba(255, 255, 255, 0.9);
  9. }
  10. .flowGlow {
  11. fill: rgba(150, 215, 255, 0.34);
  12. filter: url(#flowBlur);
  13. }
  14. @media (prefers-reduced-motion: reduce) {
  15. .flowGroup {
  16. display: none;
  17. }
  18. }
  19. </style>
  20. <rect width="14" height="151" fill="url(#paint0_linear_3000_1)"/>
  21. <g class="flowGroup" mask="url(#flowMaskY)">
  22. <rect class="flowGlow" width="14" height="151"/>
  23. <rect class="flowCore" width="14" height="151"/>
  24. </g>
  25. <defs>
  26. <linearGradient id="flowSweepY" x1="0" y1="0" x2="0" y2="1">
  27. <stop offset="0" stop-color="white" stop-opacity="0"/>
  28. <stop offset="0.42" stop-color="white" stop-opacity="0"/>
  29. <stop offset="0.5" stop-color="white" stop-opacity="1"/>
  30. <stop offset="0.58" stop-color="white" stop-opacity="0"/>
  31. <stop offset="1" stop-color="white" stop-opacity="0"/>
  32. </linearGradient>
  33. <mask id="flowMaskY" maskUnits="userSpaceOnUse">
  34. <rect x="0" y="-151" width="14" height="151" fill="url(#flowSweepY)">
  35. <animate attributeName="y" from="-151" to="151" dur="1.2s" repeatCount="indefinite"/>
  36. </rect>
  37. </mask>
  38. <filter id="flowBlur" x="-60%" y="-20%" width="220%" height="140%" color-interpolation-filters="sRGB">
  39. <feGaussianBlur stdDeviation="1.4"/>
  40. </filter>
  41. <linearGradient id="paint0_linear_3000_1" x1="7" y1="0" x2="7" y2="151" gradientUnits="userSpaceOnUse">
  42. <stop stop-color="#979797"/>
  43. <stop offset="1" stop-color="#E6E6E6"/>
  44. </linearGradient>
  45. </defs>
  46. </svg>