e39465ad2f
new file: Files/flashplayer_32_sa.exe
new file: favicon.ico
new file: globe.gif
new file: imgs/download.png
new file: imgs/zuck.jpg
new file: index.html
new file: other.ico
new file: script.js
new file: site.webmanifest
new file: sitemap.html
new file: styles/backround.css
new file: styles/border.css
new file: styles/fonts/Titillium_Web/OFL.txt
new file: styles/fonts/Titillium_Web/TitilliumWeb-Black.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-Bold.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-BoldItalic.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-ExtraLight.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-ExtraLightItalic.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-Italic.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-Light.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-LightItalic.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-Regular.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-SemiBold.ttf
new file: styles/fonts/Titillium_Web/TitilliumWeb-SemiBoldItalic.ttf
new file: styles/fonts/webfontkit-20221027-163353/generator_config.txt
new file: styles/fonts/webfontkit-20221027-163353/specimen_files/grid_12-825-55-15.css
new file: styles/fonts/webfontkit-20221027-163353/specimen_files/specimen_stylesheet.css
new file: styles/fonts/webfontkit-20221027-163353/stylesheet.css
new file: styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-demo.html
new file: styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff
new file: styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff2
new file: styles/fonts/webfontkit-20221027-165950/generator_config.txt
new file: styles/fonts/webfontkit-20221027-165950/specimen_files/grid_12-825-55-15.css
new file: styles/fonts/webfontkit-20221027-165950/specimen_files/specimen_stylesheet.css
new file: styles/fonts/webfontkit-20221027-165950/stylesheet.css
new file: styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-demo.html
new file: styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff
new file: styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff2
new file: styles/style.css
new file: tools/2048/.gitignore
new file: tools/2048/.jshintrc
new file: tools/2048/CONTRIBUTING.md
new file: tools/2048/LICENSE.txt
new file: tools/2048/README.md
new file: tools/2048/Rakefile
new file: tools/2048/favicon.ico
new file: tools/2048/index.html
new file: tools/2048/js/animframe_polyfill.js
new file: tools/2048/js/application.js
new file: tools/2048/js/bind_polyfill.js
new file: tools/2048/js/classlist_polyfill.js
new file: tools/2048/js/game_manager.js
new file: tools/2048/js/grid.js
new file: tools/2048/js/html_actuator.js
new file: tools/2048/js/keyboard_input_manager.js
new file: tools/2048/js/local_storage_manager.js
new file: tools/2048/js/tile.js
new file: tools/2048/meta/apple-touch-icon.png
new file: tools/webretro/cores/neocd_libretro.js
new file: tools/webretro/cores/neocd_libretro.wasm
new file: tools/webretro/cores/nestopia_libretro.js
new file: tools/webretro/cores/nestopia_libretro.wasm
new file: tools/webretro/cores/o2em_libretro.js
new file: tools/webretro/cores/o2em_libretro.wasm
new file: tools/webretro/cores/opera_libretro.js
new file: tools/webretro/cores/opera_libretro.wasm
541 lines
19 KiB
XML
541 lines
19 KiB
XML
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 120" width="250" height="120" enable-background="new 0 0 250 120" xml:space="preserve">
|
|
|
|
<!-- Playground -->
|
|
<!-- ################################################ -->
|
|
|
|
<!-- Fixed dots -->
|
|
<g fill="#fff">
|
|
<circle cx="15" cy="15" rel="0" r="2"></circle>
|
|
<circle cx="50" cy="15" rel="1" r="2"></circle>
|
|
<circle cx="85" cy="15" rel="2" r="2"></circle>
|
|
<circle cx="15" cy="50" rel="3" r="2"></circle>
|
|
<circle cx="50" cy="50" rel="4" r="2"></circle>
|
|
<circle cx="85" cy="50" rel="5" r="2"></circle>
|
|
<circle cx="15" cy="85" rel="6" r="2"></circle>
|
|
<circle cx="50" cy="85" rel="7" r="2"></circle>
|
|
<circle cx="85" cy="85" rel="8" r="2"></circle>
|
|
</g>
|
|
|
|
<!-- Big Dots (aka flash dots, the light flash while connecting a dot) -->
|
|
<g fill="#fff">
|
|
<circle cx="15" cy="15" class="bigdot bigdot-1" r="9"></circle>
|
|
<circle cx="50" cy="15" class="bigdot bigdot-2" r="9"></circle>
|
|
<circle cx="85" cy="15" class="bigdot bigdot-3" r="9"></circle>
|
|
<circle cx="15" cy="50" class="bigdot bigdot-4" r="9"></circle>
|
|
<circle cx="50" cy="50" class="bigdot bigdot-5" r="9"></circle>
|
|
<circle cx="85" cy="50" class="bigdot bigdot-6" r="9"></circle>
|
|
<circle cx="15" cy="85" class="bigdot bigdot-7" r="9"></circle>
|
|
<circle cx="50" cy="85" class="bigdot bigdot-8" r="9"></circle>
|
|
<circle cx="85" cy="85" class="bigdot bigdot-9" r="9"></circle>
|
|
</g>
|
|
|
|
<!-- The 4 different attemps -->
|
|
<g stroke-width="2" stroke-linecap="round" stroke="#ffffff" class="attempt-1">
|
|
<line class="attempt-1-1 line-1" x1="15" y1="15" x2="50" y2="15"></line>
|
|
<line class="attempt-1-2 line-1" x1="50" y1="15" x2="85" y2="15"></line>
|
|
<line class="attempt-1-3 line-1" x1="85" y1="15" x2="85" y2="50"></line>
|
|
</g>
|
|
<g stroke-width="2" stroke-linecap="round" stroke="#ffffff" class="attempt-2">
|
|
<line class="attempt-2-1 line-1" x1="15" y1="15" x2="15" y2="50"></line>
|
|
<line class="attempt-2-2 line-1" x1="15" y1="50" x2="15" y2="85"></line>
|
|
<line class="attempt-2-3 line-1" x1="15" y1="85" x2="50" y2="85"></line>
|
|
</g>
|
|
<g stroke-width="2" stroke-linecap="round" stroke="#ffffff" class="attempt-3">
|
|
<line class="attempt-3-1 line-1" x1="15" y1="85" x2="50" y2="85"></line>
|
|
<line class="attempt-3-2 line-1" x1="50" y1="85" x2="85" y2="85"></line>
|
|
<line class="attempt-3-3 line-1" x1="85" y1="85" x2="85" y2="50"></line>
|
|
</g>
|
|
<g stroke-width="2" stroke-linecap="round" stroke="#ffffff" class="attempt-4">
|
|
<line class="attempt-4-1 line-4" x1="15" y1="15" x2="85" y2="50"></line>
|
|
<line class="attempt-4-2 line-4" x1="85" y1="50" x2="15" y2="85"></line>
|
|
<line class="attempt-4-3 line-4" x1="15" y1="85" x2="50" y2="15"></line>
|
|
</g>
|
|
|
|
<!-- Result pos dots (the one on the top of the pattern to understand the importance of the position in the pattern) -->
|
|
<g stroke-width="2">
|
|
<circle class="result-pos result-pos-1" cx="15" cy="15" r="6.5"></circle>
|
|
<circle class="result-pos result-pos-2" cx="85" cy="50" r="6.5"></circle>
|
|
<circle class="result-pos result-pos-3" cx="15" cy="85" r="6.5"></circle>
|
|
<circle class="result-pos result-pos-4" cx="50" cy="15" r="6.5"></circle>
|
|
</g>
|
|
|
|
<!-- Result feedback (the result dots under the pattern) -->
|
|
<g stroke-width="2">
|
|
<circle class="result-dot result-dot-1" cx="20" cy="110" r="6.5"></circle>
|
|
<circle class="result-dot result-dot-2" cx="40" cy="110" r="6.5"></circle>
|
|
<circle class="result-dot result-dot-3" cx="60" cy="110" r="6.5"></circle>
|
|
<circle class="result-dot result-dot-4" cx="80" cy="110" r="6.5"></circle>
|
|
</g>
|
|
|
|
|
|
<!-- Delimiter -->
|
|
<!-- ################################################ -->
|
|
|
|
<line x1="125" y1="20" x2="125" y2="100" stroke="#fff" stroke-width="1" stroke-dasharray="1,1"></line>
|
|
|
|
|
|
<!-- Model -->
|
|
<!-- ################################################ -->
|
|
|
|
<!-- Fixed dots -->
|
|
<g fill="#fff">
|
|
<circle cx="165" cy="15" r="2"></circle>
|
|
<circle cx="200" cy="15" r="2"></circle>
|
|
<circle cx="235" cy="15" r="2"></circle>
|
|
<circle cx="165" cy="50" r="2"></circle>
|
|
<circle cx="200" cy="50" r="2"></circle>
|
|
<circle cx="235" cy="50" r="2"></circle>
|
|
<circle cx="165" cy="85" r="2"></circle>
|
|
<circle cx="200" cy="85" r="2"></circle>
|
|
<circle cx="235" cy="85" r="2"></circle>
|
|
</g>
|
|
|
|
<!-- The pattern model -->
|
|
<g stroke-width="6" stroke-linecap="round">
|
|
<line class="model-1 line-4" x1="165" y1="15" x2="235" y2="50" stroke="#666666"></line>
|
|
<line class="model-2 line-4" x1="235" y1="50" x2="165" y2="85" stroke="#b3b3b3"></line>
|
|
<line class="model-3 line-4" x1="165" y1="85" x2="200" y2="15" stroke="#ffffff"></line>
|
|
</g>
|
|
|
|
<!-- Result pos dots -->
|
|
<g stroke-width="2">
|
|
<circle class="result-pos result-pos-1" cx="165" cy="15" r="6.5"></circle>
|
|
<circle class="result-pos result-pos-2" cx="235" cy="50" r="6.5"></circle>
|
|
<circle class="result-pos result-pos-3" cx="165" cy="85" r="6.5"></circle>
|
|
<circle class="result-pos result-pos-4" cx="200" cy="15" r="6.5"></circle>
|
|
</g>
|
|
|
|
<!-- The little lock (not sure if this icon is relevant enough :-S) -->
|
|
<rect x="194" y="106" width="12" height="10" stroke="#fff" stroke-width="2" fill="none"></rect>
|
|
<path d="M195,105A5,5 0,1,1 205,105" stroke="#fff" stroke-width="2" fill="none"></path>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
/* Attempts pattern (lines) **************************/
|
|
|
|
.line-1 {stroke-dasharray: 35 35;}
|
|
.line-4 {stroke-dasharray: 80 80;}
|
|
|
|
.attempt-1-1 { animation: attempt-1-1 30s infinite; }
|
|
.attempt-1-2 { animation: attempt-1-2 30s infinite; }
|
|
.attempt-1-3 { animation: attempt-1-3 30s infinite; }
|
|
|
|
.attempt-2-1 { animation: attempt-2-1 30s infinite; }
|
|
.attempt-2-2 { animation: attempt-2-2 30s infinite; }
|
|
.attempt-2-3 { animation: attempt-2-3 30s infinite; }
|
|
|
|
.attempt-3-1 { animation: attempt-3-1 30s infinite; }
|
|
.attempt-3-2 { animation: attempt-3-2 30s infinite; }
|
|
.attempt-3-3 { animation: attempt-3-3 30s infinite; }
|
|
|
|
.attempt-4-1 { animation: attempt-4-1 30s infinite; }
|
|
.attempt-4-2 { animation: attempt-4-2 30s infinite; }
|
|
.attempt-4-3 { animation: attempt-4-3 30s infinite; }
|
|
|
|
|
|
/* Attempt n.1 */
|
|
@keyframes attempt-1-1 {
|
|
0% {stroke-dashoffset: 35;}
|
|
1% {stroke-dashoffset: 35;}
|
|
2% {stroke-dashoffset: 0;}
|
|
23.999% {stroke-dashoffset: 0;}
|
|
24% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
@keyframes attempt-1-2 {
|
|
0% {stroke-dashoffset: 35;}
|
|
2% {stroke-dashoffset: 35;}
|
|
3% {stroke-dashoffset: 0;}
|
|
23.999% {stroke-dashoffset: 0;}
|
|
24% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
@keyframes attempt-1-3 {
|
|
0% {stroke-dashoffset: 35;}
|
|
3% {stroke-dashoffset: 35;}
|
|
4% {stroke-dashoffset: 0;}
|
|
23.999% {stroke-dashoffset: 0;}
|
|
24% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
|
|
/* Attempt n.2 */
|
|
@keyframes attempt-2-1 {
|
|
0% {stroke-dashoffset: 35;}
|
|
26% {stroke-dashoffset: 35;}
|
|
27% {stroke-dashoffset: 0;}
|
|
48.999% {stroke-dashoffset: 0;}
|
|
49% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
@keyframes attempt-2-2 {
|
|
0% {stroke-dashoffset: 35;}
|
|
27% {stroke-dashoffset: 35;}
|
|
28% {stroke-dashoffset: 0;}
|
|
48.999% {stroke-dashoffset: 0;}
|
|
49% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
@keyframes attempt-2-3 {
|
|
0% {stroke-dashoffset: 35;}
|
|
28% {stroke-dashoffset: 35;}
|
|
29% {stroke-dashoffset: 0;}
|
|
48.999% {stroke-dashoffset: 0;}
|
|
49% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
|
|
/* Attempt n.3 */
|
|
@keyframes attempt-3-1 {
|
|
0% {stroke-dashoffset: 35;}
|
|
51% {stroke-dashoffset: 35;}
|
|
52% {stroke-dashoffset: 0;}
|
|
73.999% {stroke-dashoffset: 0;}
|
|
74% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
@keyframes attempt-3-2 {
|
|
0% {stroke-dashoffset: 35;}
|
|
52% {stroke-dashoffset: 35;}
|
|
53% {stroke-dashoffset: 0;}
|
|
73.999% {stroke-dashoffset: 0;}
|
|
74% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
@keyframes attempt-3-3 {
|
|
0% {stroke-dashoffset: 35;}
|
|
53% {stroke-dashoffset: 35;}
|
|
54% {stroke-dashoffset: 0;}
|
|
73.999% {stroke-dashoffset: 0;}
|
|
74% {stroke-dashoffset: 35;}
|
|
100% {stroke-dashoffset: 35;}
|
|
}
|
|
|
|
|
|
/* Attempt n.4 */
|
|
@keyframes attempt-4-1 {
|
|
0% {stroke-dashoffset: 80;}
|
|
76% {stroke-dashoffset: 80;}
|
|
77% {stroke-dashoffset: 0;}
|
|
98.999% {stroke-dashoffset: 0;}
|
|
99% {stroke-dashoffset: 80;}
|
|
100% {stroke-dashoffset: 80;}
|
|
}
|
|
|
|
@keyframes attempt-4-2 {
|
|
0% {stroke-dashoffset: 80;}
|
|
77% {stroke-dashoffset: 80;}
|
|
78% {stroke-dashoffset: 0;}
|
|
98.999% {stroke-dashoffset: 0;}
|
|
99% {stroke-dashoffset: 80;}
|
|
100% {stroke-dashoffset: 80;}
|
|
}
|
|
|
|
@keyframes attempt-4-3 {
|
|
0% {stroke-dashoffset: 80;}
|
|
78% {stroke-dashoffset: 80;}
|
|
79% {stroke-dashoffset: 0;}
|
|
98.999% {stroke-dashoffset: 0;}
|
|
99% {stroke-dashoffset: 80;}
|
|
100% {stroke-dashoffset: 80;}
|
|
}
|
|
|
|
|
|
/* Model pattern (lines) *****************************/
|
|
|
|
.model-1 { animation: model-1 7.5s infinite; }
|
|
.model-2 { animation: model-2 7.5s infinite; }
|
|
.model-3 { animation: model-3 7.5s infinite; }
|
|
|
|
@keyframes model-1 {
|
|
0% {stroke-dashoffset: 80;}
|
|
4% {stroke-dashoffset: 80;}
|
|
8% {stroke-dashoffset: 0;}
|
|
95.999% {stroke-dashoffset: 0;}
|
|
96% {stroke-dashoffset: 80;}
|
|
100% {stroke-dashoffset: 80;}
|
|
}
|
|
|
|
@keyframes model-2 {
|
|
0% {stroke-dashoffset: 80;}
|
|
8% {stroke-dashoffset: 80;}
|
|
12% {stroke-dashoffset: 0;}
|
|
95.999% {stroke-dashoffset: 0;}
|
|
96% {stroke-dashoffset: 80;}
|
|
100% {stroke-dashoffset: 80;}
|
|
}
|
|
|
|
@keyframes model-3 {
|
|
0% {stroke-dashoffset: 80;}
|
|
12% {stroke-dashoffset: 80;}
|
|
16% {stroke-dashoffset: 0;}
|
|
95.999% {stroke-dashoffset: 0;}
|
|
96% {stroke-dashoffset: 80;}
|
|
100% {stroke-dashoffset: 80;}
|
|
}
|
|
|
|
|
|
/* Big dots (aka flash) ******************************/
|
|
|
|
.bigdot { fill-opacity: 0; }
|
|
|
|
.bigdot-1 { animation: bigdot-1 30s infinite; }
|
|
.bigdot-2 { animation: bigdot-2 30s infinite; }
|
|
.bigdot-3 { animation: bigdot-3 30s infinite; }
|
|
.bigdot-4 { animation: bigdot-4 30s infinite; }
|
|
.bigdot-5 { }
|
|
.bigdot-6 { animation: bigdot-6 30s infinite; }
|
|
.bigdot-7 { animation: bigdot-7 30s infinite; }
|
|
.bigdot-8 { animation: bigdot-8 30s infinite; }
|
|
.bigdot-9 { animation: bigdot-9 30s infinite; }
|
|
|
|
@keyframes bigdot-1 {
|
|
0.999% {fill-opacity: 0;}
|
|
1% {fill-opacity: 1;}
|
|
2% {fill-opacity: 0;}
|
|
|
|
25.999% {fill-opacity: 0;}
|
|
26% {fill-opacity: 1;}
|
|
27% {fill-opacity: 0;}
|
|
|
|
75.999% {fill-opacity: 0;}
|
|
76% {fill-opacity: 1;}
|
|
77% {fill-opacity: 0;}
|
|
}
|
|
|
|
@keyframes bigdot-2 {
|
|
1.999% {fill-opacity: 0;}
|
|
2% {fill-opacity: 1;}
|
|
3% {fill-opacity: 0;}
|
|
|
|
78.999% {fill-opacity: 0;}
|
|
79% {fill-opacity: 1;}
|
|
80% {fill-opacity: 0;}
|
|
}
|
|
|
|
@keyframes bigdot-3 {
|
|
2.999% {fill-opacity: 0;}
|
|
3% {fill-opacity: 1;}
|
|
4% {fill-opacity: 0;}
|
|
}
|
|
|
|
@keyframes bigdot-4 {
|
|
26.999% {fill-opacity: 0;}
|
|
27% {fill-opacity: 1;}
|
|
28% {fill-opacity: 0;}
|
|
}
|
|
|
|
@keyframes bigdot-6 {
|
|
3.999% {fill-opacity: 0;}
|
|
4% {fill-opacity: 1;}
|
|
5% {fill-opacity: 0;}
|
|
|
|
53.999% {fill-opacity: 0;}
|
|
54% {fill-opacity: 1;}
|
|
55% {fill-opacity: 0;}
|
|
|
|
76.999% {fill-opacity: 0;}
|
|
77% {fill-opacity: 1;}
|
|
78% {fill-opacity: 0;}
|
|
}
|
|
|
|
@keyframes bigdot-7 {
|
|
27.999% {fill-opacity: 0;}
|
|
28% {fill-opacity: 1;}
|
|
29% {fill-opacity: 0;}
|
|
|
|
50.999% {fill-opacity: 0;}
|
|
51% {fill-opacity: 1;}
|
|
52% {fill-opacity: 0;}
|
|
|
|
77.999% {fill-opacity: 0;}
|
|
78% {fill-opacity: 1;}
|
|
79% {fill-opacity: 0;}
|
|
}
|
|
|
|
@keyframes bigdot-8 {
|
|
28.999% {fill-opacity: 0;}
|
|
29% {fill-opacity: 1;}
|
|
30% {fill-opacity: 0;}
|
|
|
|
51.999% {fill-opacity: 0;}
|
|
52% {fill-opacity: 1;}
|
|
53% {fill-opacity: 0;}
|
|
}
|
|
|
|
@keyframes bigdot-9 {
|
|
52.999% {fill-opacity: 0;}
|
|
53% {fill-opacity: 1;}
|
|
54% {fill-opacity: 0;}
|
|
}
|
|
|
|
|
|
/* Result dots ***************************************/
|
|
|
|
.result-dot {
|
|
stroke-opacity: 0;
|
|
stroke: #000;
|
|
fill: #000;
|
|
}
|
|
|
|
.result-dot-1 { animation: result-dot-1 30s infinite; }
|
|
.result-dot-2 { animation: result-dot-2 30s infinite .1s; }
|
|
.result-dot-3 { animation: result-dot-3 30s infinite .2s; }
|
|
.result-dot-4 { animation: result-dot-4 30s infinite .3s; }
|
|
|
|
@keyframes result-dot-1 {
|
|
4% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
5% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
23% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
24% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
|
|
29% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
30% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
48% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
49% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
|
|
54% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
55% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
73% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
74% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
}
|
|
|
|
@keyframes result-dot-2 {
|
|
4% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
5% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
23% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
24% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
|
|
29% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
30% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
48% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
49% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
|
|
54% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
55% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
73% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
74% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
}
|
|
|
|
@keyframes result-dot-3 {
|
|
/* No step 2 and 3 */
|
|
|
|
4% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
5% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
23% {stroke-opacity: 1; stroke: #fff; fill: #000;}
|
|
24% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
}
|
|
|
|
@keyframes result-dot-4 {
|
|
/* No step 1, 2 and 3 */
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill: #000;}
|
|
}
|
|
|
|
|
|
/* Result pos ****************************************/
|
|
|
|
.result-pos {
|
|
stroke-opacity: 0;
|
|
fill-opacity: 0;
|
|
}
|
|
|
|
.result-pos-1 { animation: result-pos-1 30s infinite; }
|
|
.result-pos-2 { animation: result-pos-2 30s infinite .1s; }
|
|
.result-pos-3 { animation: result-pos-3 30s infinite .2s; }
|
|
.result-pos-4 { animation: result-pos-4 30s infinite .3s; }
|
|
|
|
@keyframes result-pos-1 {
|
|
4% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
5% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
23% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
24% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
|
|
29% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
30% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
48% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
49% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
}
|
|
|
|
@keyframes result-pos-2 {
|
|
4% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
5% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
23% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
24% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
|
|
54% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
55% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
73% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
74% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
}
|
|
|
|
@keyframes result-pos-3 {
|
|
29% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
30% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
48% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
49% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
|
|
54% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
55% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
73% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
74% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
}
|
|
|
|
@keyframes result-pos-4 {
|
|
4% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
5% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
23% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #000;}
|
|
24% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
|
|
79% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
80% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
98% {stroke-opacity: 1; stroke: #fff; fill-opacity: 1; fill: #fff;}
|
|
99% {stroke-opacity: 0; stroke: #000; fill-opacity: 0; fill: #000;}
|
|
}
|
|
|
|
|
|
</style>
|
|
</svg> |