Skip to content

Instantly share code, notes, and snippets.

@DGruenwald

DGruenwald/example-animation.svg Secret

Created April 9, 2021 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DGruenwald/59010f6caa5e60e71eea5d127078f982 to your computer and use it in GitHub Desktop.
Save DGruenwald/59010f6caa5e60e71eea5d127078f982 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Animation in GitHub
Display the source blob
Display the rendered blob
Raw
example-animation.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<style>
.animate {
fill: red;
animation: flip 2s ease-in-out infinite;
transform-origin: center;
}
@keyframes flip {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<rect class="animate" x="25" y="25" width="50" height="50"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment