diff --git a/antivertical.css b/antivertical.css new file mode 100644 index 0000000..d5c9511 --- /dev/null +++ b/antivertical.css @@ -0,0 +1,117 @@ +@-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, +svg#antivertical > mask > circle.node { + r: var(--node-radius); + stroke-width: var(--node-stroke); + stroke: #000; + 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), +svg#antivertical > mask > circle.node:nth-of-type(1) { + cx: var(--x1); + cy: var(--y1); +} + +svg#antivertical > circle.node:nth-of-type(2), +svg#antivertical > circle.core:nth-of-type(5), +svg#antivertical > mask > circle.node:nth-of-type(2) { + cx: var(--x2); + cy: var(--y2); +} + +svg#antivertical > circle.node:nth-of-type(3), +svg#antivertical > circle.core:nth-of-type(6), +svg#antivertical > mask > circle.node:nth-of-type(3) { + cx: var(--x3); + cy: var(--y3); +}