Permalink
Browse files

Convert SVG animations to CSS

  • Loading branch information...
NoelDeMartin committed Dec 7, 2018
1 parent 007b909 commit 643d38543591977da5f9c9f55886931c22b607af
Showing with 37 additions and 19 deletions.
  1. +37 −19 public/index.html
@@ -8,7 +8,6 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:100:300,400,500,700,900|Material+Icons" rel="stylesheet">
<title>Focus</title>
<!-- TODO move this to scss file? -->
<style>
body[loading] {
margin: 0;
@@ -26,6 +25,39 @@
body[loading] #app svg {
fill: #00a86b;
}
body[loading] #app svg circle:nth-child(1) {
transform-origin: 12.5% 50%;
}
body[loading] #app svg circle:nth-child(2) {
transform-origin: 50% 50%;
}
body[loading] #app svg circle:nth-child(3) {
transform-origin: 87.5% 50%;
}
body[loading] #app svg circle:nth-child(1),
body[loading] #app svg circle:nth-child(3) {
animation: heartbeat-up 1s infinite;
}
body[loading] #app svg circle:nth-child(2) {
animation: heartbeat-down 1s infinite;
}
@keyframes heartbeat-up {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(.7); opacity: .3; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes heartbeat-down {
0% { transform: scale(.7); opacity: .3; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(.7); opacity: .3; }
}
</style>
</head>

@@ -34,24 +66,10 @@
<strong>We're sorry but Focus doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<svg width="60" height="15" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="fill-current">
<circle cx="15" cy="15" r="15">
<animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="60" cy="15" r="9" fill-opacity="0.3">
<animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="105" cy="15" r="15">
<animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear"
repeatCount="indefinite" />
</circle>
<svg width="60" height="15" viewBox="0 0 120 30" class="fill-current">
<circle cx="15" cy="15" r="15"></circle>
<circle cx="60" cy="15" r="15"></circle>
<circle cx="105" cy="15" r="15"></circle>
</svg>
</div>
<!-- built files will be auto injected -->

0 comments on commit 643d385

Please sign in to comment.