113 lines
2.9 KiB
CSS
113 lines
2.9 KiB
CSS
@-webkit-keyframes rotating {
|
|
from {
|
|
-webkit-transform: var(--scale) rotate(0deg);
|
|
-o-transform: var(--scale) rotate(0deg);
|
|
transform: var(--scale) rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: var(--scale) rotate(360deg);
|
|
-o-transform: var(--scale) rotate(360deg);
|
|
transform: var(--scale) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotating {
|
|
from {
|
|
-ms-transform: var(--scale) rotate(0deg);
|
|
-moz-transform: var(--scale) rotate(0deg);
|
|
-webkit-transform: var(--scale) rotate(0deg);
|
|
-o-transform: var(--scale) rotate(0deg);
|
|
transform: var(--scale) rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
-ms-transform: var(--scale) rotate(360deg);
|
|
-moz-transform: var(--scale) rotate(360deg);
|
|
-webkit-transform: var(--scale) rotate(360deg);
|
|
-o-transform: var(--scale) rotate(360deg);
|
|
transform: var(--scale) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: unset;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
svg#antivertical {
|
|
--core-radius: 7px;
|
|
--node-radius: 14px;
|
|
--node-stroke: 2px;
|
|
--width: 75px;
|
|
--length: calc(var(--width) - (var(--node-radius) + var(--node-stroke)) * 2);
|
|
--bisector: calc((var(--length) * sqrt(3)) / 2);
|
|
--height: calc(
|
|
var(--bisector) + (var(--node-radius) + var(--node-stroke)) * 2
|
|
);
|
|
--x1: calc(var(--node-radius) + var(--node-stroke));
|
|
--y1: calc(var(--node-radius) + var(--node-stroke));
|
|
--x2: calc(var(--width) - var(--node-radius) - var(--node-stroke));
|
|
--y2: calc(var(--node-radius) + var(--node-stroke));
|
|
--x3: calc(var(--width) / 2);
|
|
--y3: calc(var(--bisector) + (var(--node-radius) + var(--node-stroke)));
|
|
--scale: scale(2);
|
|
--center-x: calc((var(--x1) + var(--x2) + var(--x3)) / 3);
|
|
--center-y: calc((var(--y1) + var(--y2) + var(--y3)) / 3);
|
|
--rotate: rotating 6s linear infinite;
|
|
width: var(--width);
|
|
height: var(--height);
|
|
transform-origin: var(--center-x) var(--center-y);
|
|
-webkit-animation: var(--rotate);
|
|
-moz-animation: var(--rotate);
|
|
-ms-animation: var(--rotate);
|
|
-o-animation: var(--rotate);
|
|
animation: var(--rotate);
|
|
}
|
|
|
|
svg#antivertical > circle.synapse {
|
|
cx: var(--center-x);
|
|
cy: var(--center-y);
|
|
r: calc(var(--length) / 2.1);
|
|
stroke-width: calc(var(--core-radius) * 0.9);
|
|
stroke: black;
|
|
fill: transparent;
|
|
}
|
|
|
|
svg#antivertical circle.node {
|
|
r: var(--node-radius);
|
|
stroke-width: var(--node-stroke);
|
|
stroke: black;
|
|
fill: transparent;
|
|
}
|
|
|
|
svg#antivertical > mask > circle.node {
|
|
fill: black;
|
|
}
|
|
|
|
svg#antivertical > circle.core {
|
|
r: var(--core-radius);
|
|
fill: black;
|
|
}
|
|
|
|
svg#antivertical circle.node:nth-of-type(1),
|
|
svg#antivertical > circle.core:nth-of-type(4) {
|
|
cx: var(--x1);
|
|
cy: var(--y1);
|
|
}
|
|
|
|
svg#antivertical circle.node:nth-of-type(2),
|
|
svg#antivertical > circle.core:nth-of-type(5) {
|
|
cx: var(--x2);
|
|
cy: var(--y2);
|
|
}
|
|
|
|
svg#antivertical circle.node:nth-of-type(3),
|
|
svg#antivertical > circle.core:nth-of-type(6) {
|
|
cx: var(--x3);
|
|
cy: var(--y3);
|
|
} |