Skip to content

Instantly share code, notes, and snippets.

@riccardoscalco

riccardoscalco/SVG Circle Pulse.markdown

Created May 7, 2016 06:51
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save riccardoscalco/22300f7899483335a8df23b4dfc13b62 to your computer and use it in GitHub Desktop.
Save riccardoscalco/22300f7899483335a8df23b4dfc13b62 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Circle Pulse
Raw
index.html
<html>
<body>
<svg class = "button" expanded = "true" height = "100px" width = "100px">
<circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "none" stroke = "#000000" stroke-width = "5%">
<animate attributeType="SVG" attributeName="r" begin="0s" dur="1.5s" repeatCount="indefinite" from="5%" to="25%"/>
<animate attributeType="CSS" attributeName="stroke-width" begin="0s" dur="1.5s" repeatCount="indefinite" from="3%" to="0%" />
<animate attributeType="CSS" attributeName="opacity" begin="0s" dur="1.5s" repeatCount="indefinite" from="1" to="0"/>
</circle>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment