Skip to content

Instantly share code, notes, and snippets.

@natbat

natbat/SVG animation experiment.markdown

Created January 29, 2016 22:37
Show Gist options
  • Save natbat/f81e29ff1970abca6fe8 to your computer and use it in GitHub Desktop.
Save natbat/f81e29ff1970abca6fe8 to your computer and use it in GitHub Desktop.
Download ZIP
SVG animation experiment
Raw
index.html
<h1>SVG animation experiment (28th Jan 2016)</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="42px" viewBox="0 0 32 42" version="1.1">
<title>Stopwatch</title>
<desc>For measuring time</desc>
<g class="container">
<path d="M17,8.05
L17,6
L19,6
C20.657,6 22,4.657 22,3
C22,1.343 20.657,0 19,0
L13,0
C11.343,0 10,1.343 10,3
C10,4.657 11.343,6 13,6
L15,6
L15,8.05
C6.632,8.569 0,15.501 0,24
C0,32.837 7.163,40 16,40
C24.837,40 32,32.837 32,24
C32,15.501 25.368,8.569 17,8.05 L17,8.05
Z
M13,4
C12.449,4 12,3.551 12,3
C12,2.449 12.449,2 13,2
L19,2
C19.551,2 20,2.449 20,3
C20,3.551 19.551,4 19,4
L13,4
Z
M16,38
C8.28,38 2,31.72 2,24
C2,16.28 8.28,10 16,10
C23.72,10 30,16.28 30,24
C30,31.72 23.72,38 16,38
L16,38
Z
" id="outline" />
</g>
<!-- <g class="container">
<path d="M15.293,23.293
L16.707,24.707
L24.707,16.707
L23.293,15.293
L15.293,23.293
Z
" />
</g> -->
<g class="container hand-container">
<path d="M0.293,8.293 L1.707,9.707 L9.707,1.707 L8.293,0.293 L0.293,8.293 L0.293,8.293 Z" id="hand" />
</g>
<g class="container">
<path d="M5.4142,9.4142
L4.0002,8.0002
L0.0002,12.0002
L1.4142,13.4142 L5.4142,9.4142
Z
" id="button" />
</g>
</svg>
<br><br>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 32 42" version="1.1">
<title>Stopwatch</title>
<desc>For measuring time</desc>
<g class="container">
<path d="M17,8.05
L17,6
L19,6
C20.657,6 22,4.657 22,3
C22,1.343 20.657,0 19,0
L13,0
C11.343,0 10,1.343 10,3
C10,4.657 11.343,6 13,6
L15,6
L15,8.05
C6.632,8.569 0,15.501 0,24
C0,32.837 7.163,40 16,40
C24.837,40 32,32.837 32,24
C32,15.501 25.368,8.569 17,8.05 L17,8.05
Z
M13,4
C12.449,4 12,3.551 12,3
C12,2.449 12.449,2 13,2
L19,2
C19.551,2 20,2.449 20,3
C20,3.551 19.551,4 19,4
L13,4
Z
M16,38
C8.28,38 2,31.72 2,24
C2,16.28 8.28,10 16,10
C23.72,10 30,16.28 30,24
C30,31.72 23.72,38 16,38
L16,38
Z
" id="outline" />
</g>
<!-- <g class="container">
<path d="M15.293,23.293
L16.707,24.707
L24.707,16.707
L23.293,15.293
L15.293,23.293
Z
" />
</g> -->
<g class="container hand-container">
<path d="M0.293,8.293 L1.707,9.707 L9.707,1.707 L8.293,0.293 L0.293,8.293 L0.293,8.293 Z" id="hand" />
</g>
<g class="container">
<path d="M5.4142,9.4142
L4.0002,8.0002
L0.0002,12.0002
L1.4142,13.4142 L5.4142,9.4142
Z
" id="button" />
</g>
</svg>
<br><br>
Raw
style.css
body {
font-family: sans-serif;
}
h2 {
margin-bottom:0
}
p {
margin-top:0.2em;
margin-bottom:0;
}
svg {
margin-top: 2em;
margin-bottom: 4em;
}
@-webkit-keyframes buttonPress {
0% {
transform: translate(0);
fill: black;
}
50% {
transform: translate(10%, 10%);
fill: #666;
}
100% {
transform: translate(0);
fill: black;
}
}
@-webkit-keyframes clockwiseSpin {
0% {
transform: translate(159%, 159%) rotate(0deg) ;
fill: red;
}
100% {
transform: translate(159%, 159%) rotate(360deg) ;
fill: red;
}
}
#outline {
fill: black;
}
#hand {
fill: black;
animation-iteration-count: 2;
/*animation-direction: alternate;*/
animation-timing-function: linear;
/* transform-origin: 88% 10%; */
transform-origin: 7% 95%;
animation-delay: 0.4s;
animation-duration: 2s;
transform: translate(159%, 159%);
animation-name: clockwiseSpin;
animation-fill-mode: initial;
}
#button {
fill: black;
animation-delay: 0;
animation-duration: 0.3s;
animation-iteration-count: 1;
animation-fill-mode: initial;
animation-name: buttonPress;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment