puff.svg 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
  2. <svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
  3. <g fill="none" fill-rule="evenodd" stroke-width="2">
  4. <circle cx="22" cy="22" r="1">
  5. <animate attributeName="r"
  6. begin="0s" dur="1.8s"
  7. values="1; 20"
  8. calcMode="spline"
  9. keyTimes="0; 1"
  10. keySplines="0.165, 0.84, 0.44, 1"
  11. repeatCount="indefinite" />
  12. <animate attributeName="stroke-opacity"
  13. begin="0s" dur="1.8s"
  14. values="1; 0"
  15. calcMode="spline"
  16. keyTimes="0; 1"
  17. keySplines="0.3, 0.61, 0.355, 1"
  18. repeatCount="indefinite" />
  19. </circle>
  20. <circle cx="22" cy="22" r="1">
  21. <animate attributeName="r"
  22. begin="-0.9s" dur="1.8s"
  23. values="1; 20"
  24. calcMode="spline"
  25. keyTimes="0; 1"
  26. keySplines="0.165, 0.84, 0.44, 1"
  27. repeatCount="indefinite" />
  28. <animate attributeName="stroke-opacity"
  29. begin="-0.9s" dur="1.8s"
  30. values="1; 0"
  31. calcMode="spline"
  32. keyTimes="0; 1"
  33. keySplines="0.3, 0.61, 0.355, 1"
  34. repeatCount="indefinite" />
  35. </circle>
  36. </g>
  37. </svg>