Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Animate logo

Browse Source
This commit is contained in:
Xaver Maierhofer 2017-03-31 23:49:04 +02:00
parent 73f2307011
commit 1837ec1ea0
No known key found for this signature in database
GPG Key ID: 7FDCE23FD2EC9FE8
2 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/logo.svg
View File

@ -2,6 +2,29 @@
<title> <title>
Meshviewer Meshviewer
</title> </title>
<path d="m 41.426847,11.807177 a 11.89,11.89 0 1 0 -7.75,20.919993 12,12 0 0 0 4,-0.7 l 15.81,16.66 a 13.45,13.45 0 0 1 5.08,-4.82 l -15.25,-16.07 a 11.9,11.9 0 0 0 -1.89,-15.989993 z m -11.25,13.119993 a 5.41,5.41 0 1 1 3.5,1.29 5.35,5.35 0 0 1 -3.5,-1.29 z m 20.86,33.55 -28.39,16 c -0.24,-0.23 -0.49,-0.46 -0.75,-0.67 a 13.38,13.38 0 1 0 4.45,6.62 l 28.13,-15.85 a 14,14 0 0 1 -3.44,-6.1 z m -32.12,30.06 a 6.86,6.86 0 1 1 1.45,-5 6.85,6.85 0 0 1 -1.45,5 z M 119.4569,3.8671829 A 15.09,15.09 0 0 0 96.456847,22.64717 l -23.44,21.69 a 13.58,13.58 0 0 1 4.75,5.14 l 23.390033,-21.61 A 15.1,15.1 0 0 0 119.4569,3.8671829 Z m -3.3,17.0599871 a 8.62,8.62 0 1 1 2,-6.26 8.6,8.6 0 0 1 -2,6.31 z m -4.05,52.4 a 11.23,11.23 0 0 0 -14.690053,0.07 l -18.76,-12.53 a 13.56,13.56 0 0 1 -3.9,5.81 l 19.1,12.74 a 11.24,11.24 0 1 0 18.280053,-6.09 z m -3.72,11.62 a 4.74,4.74 0 0 1 -3.61,1.65 4.74,4.74 0 0 1 -3.59001,-7.82 4.74,4.74 0 0 1 3.61001,-1.65 4.67,4.67 0 0 1 3.06,1.14 4.75,4.75 0 0 1 0.53,6.68 z" fill="#ad2358"/> <style>
<path fill="#f4c72f" d="m 101.52068,52.899268 a 6.2809967,6.2864323 0 0 0 -8.861411,0.190195 6.2109856,6.2163606 0 0 0 -1.310208,2.102151 L 82.787703,54.711122 A 17.502777,17.517924 0 0 0 67.185227,38.51455 v -8.939146 a 6.3810126,6.3865347 0 1 0 -3.820606,0 v 8.949156 a 17.552785,17.567976 0 0 0 -6.781076,32.753514 l -2.5204,5.896032 a 6.3810126,6.3865347 0 1 0 3.510557,1.521557 l 2.5204,-5.966104 A 17.512779,17.527935 0 0 0 82.637679,58.545045 l 8.491348,0.470482 A 6.2709951,6.276422 0 1 0 101.53068,52.899268 Z M 54.513216,85.602731 a 2.4403873,2.4424992 0 0 1 -2.000317,0 2.4103825,2.4124684 0 0 1 -1.230196,-1.161189 2.4403873,2.4424992 0 0 1 3.160502,-3.3234 2.4103825,2.4124684 0 0 1 1.230195,1.161188 2.4503888,2.4525094 0 0 1 -1.130179,3.323401 z M 63.384624,22.01767 a 2.4403873,2.4424992 0 0 1 1.860295,-0.85087 2.4103825,2.4124684 0 0 1 1.590252,0.590604 2.4403873,2.4424992 0 0 1 -1.590252,4.304404 2.4103825,2.4124684 0 0 1 -1.590252,-0.590604 2.4503888,2.4525094 0 0 1 -0.230037,-3.453534 z m 9.881568,40.86181 a 10.591681,10.600847 0 1 1 2.510398,-7.697876 10.571678,10.580826 0 0 1 -2.480393,7.697876 z m 25.654071,-3.753841 a 2.4403873,2.4424992 0 0 1 -4.200667,-1.831874 2.4103825,2.4124684 0 0 1 0.670107,-1.551588 2.4403873,2.4424992 0 0 1 4.200666,1.831875 2.4103825,2.4124684 0 0 1 -0.640101,1.551587 z"/> path.fade {
animation: 1s fade ease-out infinite alternate;
}
path.spin {
animation: 2.3s spin linear infinite;
transform-origin: 65.4px 56px;
}
@keyframes fade {
to {
filter: grayscale(.8);
opacity: .2;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
<path class="fade" d="m 41.426847,11.807177 a 11.89,11.89 0 1 0 -7.75,20.919993 12,12 0 0 0 4,-0.7 l 15.81,16.66 a 13.45,13.45 0 0 1 5.08,-4.82 l -15.25,-16.07 a 11.9,11.9 0 0 0 -1.89,-15.989993 z m -11.25,13.119993 a 5.41,5.41 0 1 1 3.5,1.29 5.35,5.35 0 0 1 -3.5,-1.29 z m 20.86,33.55 -28.39,16 c -0.24,-0.23 -0.49,-0.46 -0.75,-0.67 a 13.38,13.38 0 1 0 4.45,6.62 l 28.13,-15.85 a 14,14 0 0 1 -3.44,-6.1 z m -32.12,30.06 a 6.86,6.86 0 1 1 1.45,-5 6.85,6.85 0 0 1 -1.45,5 z M 119.4569,3.8671829 A 15.09,15.09 0 0 0 96.456847,22.64717 l -23.44,21.69 a 13.58,13.58 0 0 1 4.75,5.14 l 23.390033,-21.61 A 15.1,15.1 0 0 0 119.4569,3.8671829 Z m -3.3,17.0599871 a 8.62,8.62 0 1 1 2,-6.26 8.6,8.6 0 0 1 -2,6.31 z m -4.05,52.4 a 11.23,11.23 0 0 0 -14.690053,0.07 l -18.76,-12.53 a 13.56,13.56 0 0 1 -3.9,5.81 l 19.1,12.74 a 11.24,11.24 0 1 0 18.280053,-6.09 z m -3.72,11.62 a 4.74,4.74 0 0 1 -3.61,1.65 4.74,4.74 0 0 1 -3.59001,-7.82 4.74,4.74 0 0 1 3.61001,-1.65 4.67,4.67 0 0 1 3.06,1.14 4.75,4.75 0 0 1 0.53,6.68 z" fill="#ad2358"/>
<path class="spin" fill="#f4c72f" d="m 101.52068,52.899268 a 6.2809967,6.2864323 0 0 0 -8.861411,0.190195 6.2109856,6.2163606 0 0 0 -1.310208,2.102151 L 82.787703,54.711122 A 17.502777,17.517924 0 0 0 67.185227,38.51455 v -8.939146 a 6.3810126,6.3865347 0 1 0 -3.820606,0 v 8.949156 a 17.552785,17.567976 0 0 0 -6.781076,32.753514 l -2.5204,5.896032 a 6.3810126,6.3865347 0 1 0 3.510557,1.521557 l 2.5204,-5.966104 A 17.512779,17.527935 0 0 0 82.637679,58.545045 l 8.491348,0.470482 A 6.2709951,6.276422 0 1 0 101.53068,52.899268 Z M 54.513216,85.602731 a 2.4403873,2.4424992 0 0 1 -2.000317,0 2.4103825,2.4124684 0 0 1 -1.230196,-1.161189 2.4403873,2.4424992 0 0 1 3.160502,-3.3234 2.4103825,2.4124684 0 0 1 1.230195,1.161188 2.4503888,2.4525094 0 0 1 -1.130179,3.323401 z M 63.384624,22.01767 a 2.4403873,2.4424992 0 0 1 1.860295,-0.85087 2.4103825,2.4124684 0 0 1 1.590252,0.590604 2.4403873,2.4424992 0 0 1 -1.590252,4.304404 2.4103825,2.4124684 0 0 1 -1.590252,-0.590604 2.4503888,2.4525094 0 0 1 -0.230037,-3.453534 z m 9.881568,40.86181 a 10.591681,10.600847 0 1 1 2.510398,-7.697876 10.571678,10.580826 0 0 1 -2.480393,7.697876 z m 25.654071,-3.753841 a 2.4403873,2.4424992 0 0 1 -4.200667,-1.831874 2.4103825,2.4124684 0 0 1 0.670107,-1.551588 2.4403873,2.4424992 0 0 1 4.200666,1.831875 2.4103825,2.4124684 0 0 1 -0.640101,1.551587 z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

16
scss/modules/_loader.scss
View File

@ -5,19 +5,3 @@
margin: 30vh auto; margin: 30vh auto;
text-align: center; text-align: center;
} }
.spinner {
path {
&:first-of-type {
animation: 1s spinner ease-in-out infinite alternate;
opacity: 1;
}
}
}
@keyframes spinner {
to {
filter: grayscale(.8);
opacity: .2;
}
}