mirror of https://github.com/requarks/wiki
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
4.5 KiB
46 lines
4.5 KiB
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="96px" height="96px">
|
|
<style>
|
|
.dot {
|
|
fill: #7a8793;
|
|
transform-box: view-box;
|
|
transform-origin: 0 0;
|
|
offset-anchor: 0 0;
|
|
offset-rotate: 0deg;
|
|
animation: flow-fwd 2s linear infinite;
|
|
}
|
|
.d1 { offset-path: path("M9,24V12.3A3.3,3.3 0 0 1 12.3,9H24"); animation-duration: 1.6s }
|
|
.d2 { offset-path: path("M24,9H35.7A3.3,3.3 0 0 1 39,12.3V24"); animation-duration: 1.9s; animation-delay: -.4s }
|
|
.d3 { offset-path: path("M39,24V35.7A3.3,3.3 0 0 1 35.7,39H24"); animation-duration: 1.5s; animation-delay: -.9s }
|
|
.d4 { offset-path: path("M24,39H12.3A3.3,3.3 0 0 1 9,35.7V24"); animation-duration: 1.8s; animation-delay: -.2s }
|
|
/* Two dots run against the flow so the traffic does not read as one rotating chain. */
|
|
.d5 { offset-path: path("M24,9H35.7A3.3,3.3 0 0 1 39,12.3V24"); animation-name: flow-rev; animation-duration: 2.2s; animation-delay: -1.1s }
|
|
.d6 { offset-path: path("M24,39H12.3A3.3,3.3 0 0 1 9,35.7V24"); animation-name: flow-rev; animation-duration: 2.1s; animation-delay: -.7s }
|
|
@keyframes flow-fwd { from { offset-distance: 0% } to { offset-distance: 100% } }
|
|
@keyframes flow-rev { from { offset-distance: 100% } to { offset-distance: 0% } }
|
|
/* Short green blips at uneven points; mismatched periods keep the four out of sync. */
|
|
.node { animation: node-flash 2.3s linear infinite }
|
|
.node-2 { animation-duration: 3.1s; animation-delay: -.6s }
|
|
.node-3 { animation-duration: 2.7s; animation-delay: -1.4s }
|
|
.node-4 { animation-duration: 3.7s; animation-delay: -.9s }
|
|
@keyframes node-flash {
|
|
0%, 8% { fill: #50e6ff }
|
|
10% { fill: #17e05c }
|
|
16% { fill: #50e6ff }
|
|
43% { fill: #50e6ff }
|
|
45% { fill: #17e05c }
|
|
51%, 100% { fill: #50e6ff }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dot, .node { animation: none }
|
|
.traffic { display: none }
|
|
}
|
|
</style>
|
|
<linearGradient id="k2yiUqNWn2Slk9gpK~j2Da" x1="14.104" x2="33.763" y1="42.408" y2="5.435" gradientTransform="matrix(1 0 0 -1 0 47.89)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c8d3de"/><stop offset="1" stop-color="#c8d3de"/></linearGradient><path fill="url(#k2yiUqNWn2Slk9gpK~j2Da)" d="M35.7,40H12.3C9.9,40,8,38.1,8,35.7V12.3C8,9.9,9.9,8,12.3,8h23.3c2.4,0,4.3,1.9,4.3,4.3v23.3 C40,38.1,38.1,40,35.7,40z M12.3,10C11,10,10,11,10,12.3v23.3c0,1.3,1,2.3,2.3,2.3h23.3c1.3,0,2.3-1,2.3-2.3V12.3 c0-1.3-1-2.3-2.3-2.3H12.3z"/><g class="traffic">
|
|
<circle class="dot d1" r="1.3"/>
|
|
<circle class="dot d2" r="1.3"/>
|
|
<circle class="dot d3" r="1.3"/>
|
|
<circle class="dot d4" r="1.3"/>
|
|
<circle class="dot d5" r="1.3"/>
|
|
<circle class="dot d6" r="1.3"/>
|
|
</g><linearGradient id="k2yiUqNWn2Slk9gpK~j2Db" x1="5.936" x2="12.063" y1="29.652" y2="18.128" gradientTransform="matrix(1 0 0 -1 0 47.89)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"/><stop offset="1" stop-color="#007ad9"/></linearGradient><path fill="url(#k2yiUqNWn2Slk9gpK~j2Db)" d="M15,27c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h8c1.1,0,2,0.9,2,2V27z"/><linearGradient id="k2yiUqNWn2Slk9gpK~j2Dc" x1="20.936" x2="27.064" y1="44.652" y2="33.129" gradientTransform="matrix(1 0 0 -1 0 47.89)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"/><stop offset="1" stop-color="#007ad9"/></linearGradient><path fill="url(#k2yiUqNWn2Slk9gpK~j2Dc)" d="M30,12c0,1.1-0.9,2-2,2h-8c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h8c1.1,0,2,0.9,2,2V12z"/><linearGradient id="k2yiUqNWn2Slk9gpK~j2Dd" x1="20.936" x2="27.064" y1="14.652" y2="3.128" gradientTransform="matrix(1 0 0 -1 0 47.89)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"/><stop offset="1" stop-color="#007ad9"/></linearGradient><path fill="url(#k2yiUqNWn2Slk9gpK~j2Dd)" d="M30,42c0,1.1-0.9,2-2,2h-8c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h8c1.1,0,2,0.9,2,2V42z"/><linearGradient id="k2yiUqNWn2Slk9gpK~j2De" x1="35.937" x2="42.063" y1="29.652" y2="18.128" gradientTransform="matrix(1 0 0 -1 0 47.89)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"/><stop offset="1" stop-color="#007ad9"/></linearGradient><path fill="url(#k2yiUqNWn2Slk9gpK~j2De)" d="M45,27c0,1.1-0.9,2-2,2h-8c-1.1,0-2-0.9-2-2v-6c0-1.1,0.9-2,2-2h8c1.1,0,2,0.9,2,2V27z"/><rect class="node node-1" width="8" height="6" x="5" y="21" fill="#50e6ff"/><rect class="node node-2" width="8" height="6" x="20" y="6" fill="#50e6ff"/><rect class="node node-3" width="8" height="6" x="20" y="36" fill="#50e6ff"/><rect class="node node-4" width="8" height="6" x="35" y="21" fill="#50e6ff"/></svg>
|
