rings.svg 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
  2. <svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
  3. <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
  4. <circle cx="22" cy="22" r="6" stroke-opacity="0">
  5. <animate attributeName="r"
  6. begin="1.5s" dur="3s"
  7. values="6;22"
  8. calcMode="linear"
  9. repeatCount="indefinite" />
  10. <animate attributeName="stroke-opacity"
  11. begin="1.5s" dur="3s"
  12. values="1;0" calcMode="linear"
  13. repeatCount="indefinite" />
  14. <animate attributeName="stroke-width"
  15. begin="1.5s" dur="3s"
  16. values="2;0" calcMode="linear"
  17. repeatCount="indefinite" />
  18. </circle>
  19. <circle cx="22" cy="22" r="6" stroke-opacity="0">
  20. <animate attributeName="r"
  21. begin="3s" dur="3s"
  22. values="6;22"
  23. calcMode="linear"
  24. repeatCount="indefinite" />
  25. <animate attributeName="stroke-opacity"
  26. begin="3s" dur="3s"
  27. values="1;0" calcMode="linear"
  28. repeatCount="indefinite" />
  29. <animate attributeName="stroke-width"
  30. begin="3s" dur="3s"
  31. values="2;0" calcMode="linear"
  32. repeatCount="indefinite" />
  33. </circle>
  34. <circle cx="22" cy="22" r="8">
  35. <animate attributeName="r"
  36. begin="0s" dur="1.5s"
  37. values="6;1;2;3;4;5;6"
  38. calcMode="linear"
  39. repeatCount="indefinite" />
  40. </circle>
  41. </g>
  42. </svg>