misc/babystats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert the spinner to CSS animation from SMIL, and shrink it while doing so.

Browse Source
This commit is contained in:
Ian Gulliver
2016-01-07 18:19:45 -08:00
parent 7035605669
commit 65cb36d3e8
2 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
attic/balls.svg
View File

@@ -1,27 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
<circle r="5" cx="30" cy="50">
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1"/>
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#430a39;#bc1550"/>
</circle>
</g><g transform="rotate(72 50 50)">
<circle r="5" cx="30" cy="50">
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1"/>
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#bc1550;#e87f02"/>
</circle>
</g><g transform="rotate(144 50 50)">
<circle r="5" cx="30" cy="50">
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1"/>
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#e87f02;#f5c700"/>
</circle>
</g><g transform="rotate(216 50 50)">
<circle r="5" cx="30" cy="50">
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1"/>
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#f5c700;#88990f"/>
</circle>
</g><g transform="rotate(288 50 50)">
<circle r="5" cx="30" cy="50">
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1"/>
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#88990f;#430a39"/>
</circle>
</g></svg>
<style type="text/css" >
<![CDATA[
@keyframes coloredBounce {
0% {
fill: #430a39;
transform: translate(0, -20px);
}
20% {
fill: #bc1550;
transform: translate(19px, -6px);
}
40% {
fill: #e87f02;
transform: translate(12px, 16px);
}
60% {
fill: #f5c700;
transform: translate(-12px, 16px);
}
80% {
fill: #88990f;
transform: translate(-19px, -6px);
}
100% {
fill: #430a39;
transform: translate(0, -20px);
}
}
circle {
animation: coloredBounce 5s linear infinite;
}
]]>
</style>
<circle r="5" cx="50" cy="50"></circle>
<circle r="5" cx="50" cy="50" style="animation-delay: -1s"></circle>
<circle r="5" cx="50" cy="50" style="animation-delay: -2s"></circle>
<circle r="5" cx="50" cy="50" style="animation-delay: -3s"></circle>
<circle r="5" cx="50" cy="50" style="animation-delay: -4s"></circle>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 974 B

2
static/babystats.html
View File

@@ -11,7 +11,7 @@
<link rel="stylesheet" href="/static/babystats.css">
</head>
<body>
<div id="container" style="background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E %3Cg transform='rotate(0 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23430a39;%23bc1550'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(72 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23bc1550;%23e87f02'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(144 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23e87f02;%23f5c700'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(216 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23f5c700;%2388990f'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(288 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%2388990f;%23430a39'/%3E %3C/circle%3E %3C/g%3E%3C/svg%3E&quot;);"></div>
<div id="container" style="background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E %3Cstyle type='text/css' %3E %3C![CDATA[ @keyframes coloredBounce { 0% { fill: %23430a39; transform: translate(0, -20px); } 20% { fill: %23bc1550; transform: translate(19px, -6px); } 40% { fill: %23e87f02; transform: translate(12px, 16px); } 60% { fill: %23f5c700; transform: translate(-12px, 16px); } 80% { fill: %2388990f; transform: translate(-19px, -6px); } 100% { fill: %23430a39; transform: translate(0, -20px); } } circle { animation: coloredBounce 5s linear infinite; } ]]%3E %3C/style%3E %3Ccircle r='5' cx='50' cy='50'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -1s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -2s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -3s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -4s'%3E%3C/circle%3E %3C/svg%3E&quot;);"></div>
<script>
new BabyStats(document.getElementById('container'));
</script>