155 lines
3.1 KiB
CSS
155 lines
3.1 KiB
CSS
:root {
|
|
--animate: 0;
|
|
--windowWidthScalar: 1;
|
|
--windowHeightScalar: 1;
|
|
--bg: #f3f0ed;
|
|
--color: #9da2b9;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #242733;
|
|
--color: #b6a491;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
height: 200vh;
|
|
color: var(--color);
|
|
background: var(--bg);
|
|
}
|
|
|
|
svg {
|
|
position: fixed;
|
|
width: 50vmin;
|
|
height: 50vmin;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
overflow: visible !important;
|
|
}
|
|
|
|
path {
|
|
fill: url(#puzzle);
|
|
--startX: calc(var(--pieceX) * (100 * var(--windowWidthScalar) - 50) / 100 * 100%);
|
|
--endX: 0px;
|
|
--startY: calc(var(--pieceY) * (100 * var(--windowHeightScalar) - 50) / 100 * 100%);
|
|
--endY: 0px;
|
|
--startRotate: 0deg // set randomly below;
|
|
--endRotate: 0deg;
|
|
--x: calc(var(--startX) * (-1 * var(--animate) + 1) + var(--endX) * var(--animate));
|
|
--y: calc(var(--startY) * (-1 * var(--animate) + 1) + var(--endY) * var(--animate));
|
|
--rotate: calc(var(--startRotate) * (-1 * var(--animate) + 1) + var(--endRotate) * var(--animate));
|
|
-webkit-transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY));
|
|
transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY));
|
|
-webkit-transform: translate(var(--x), var(--y)) rotate(var(--rotate));
|
|
transform: translate(var(--x), var(--y)) rotate(var(--rotate));
|
|
stroke-width: 0.5vmin;
|
|
stroke: var(--bg);
|
|
}
|
|
path:nth-of-type(n + 1) {
|
|
--pieceX: -0.75;
|
|
}
|
|
path:nth-of-type(n + 5) {
|
|
--pieceX: -0.25;
|
|
}
|
|
path:nth-of-type(n + 9) {
|
|
--pieceX: 0.25;
|
|
}
|
|
path:nth-of-type(n + 13) {
|
|
--pieceX: 0.75;
|
|
}
|
|
path:nth-of-type(4n + 1) {
|
|
--pieceY: -0.75;
|
|
}
|
|
path:nth-of-type(4n + 2) {
|
|
--pieceY: -0.25;
|
|
}
|
|
path:nth-of-type(4n + 3) {
|
|
--pieceY: 0.25;
|
|
}
|
|
path:nth-of-type(4n + 4) {
|
|
--pieceY: 0.75;
|
|
}
|
|
path:nth-of-type(1) {
|
|
--startRotate: -67deg;
|
|
}
|
|
path:nth-of-type(2) {
|
|
--startRotate: -72deg;
|
|
}
|
|
path:nth-of-type(3) {
|
|
--startRotate: 77deg;
|
|
}
|
|
path:nth-of-type(4) {
|
|
--startRotate: 97deg;
|
|
}
|
|
path:nth-of-type(5) {
|
|
--startRotate: 70deg;
|
|
}
|
|
path:nth-of-type(6) {
|
|
--startRotate: -65deg;
|
|
}
|
|
path:nth-of-type(7) {
|
|
--startRotate: -90deg;
|
|
}
|
|
path:nth-of-type(8) {
|
|
--startRotate: 56deg;
|
|
}
|
|
path:nth-of-type(9) {
|
|
--startRotate: -53deg;
|
|
}
|
|
path:nth-of-type(10) {
|
|
--startRotate: -54deg;
|
|
}
|
|
path:nth-of-type(11) {
|
|
--startRotate: -90deg;
|
|
}
|
|
path:nth-of-type(12) {
|
|
--startRotate: 85deg;
|
|
}
|
|
path:nth-of-type(13) {
|
|
--startRotate: -86deg;
|
|
}
|
|
path:nth-of-type(14) {
|
|
--startRotate: 97deg;
|
|
}
|
|
path:nth-of-type(15) {
|
|
--startRotate: -75deg;
|
|
}
|
|
path:nth-of-type(16) {
|
|
--startRotate: -85deg;
|
|
}
|
|
|
|
#upload {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#upload-mask {
|
|
position: fixed;
|
|
top: 1em;
|
|
left: 1em;
|
|
bottom: 1em;
|
|
right: 1em;
|
|
pointer-events: none;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
padding: 1em;
|
|
border-radius: 0.5em;
|
|
border: 0.1em dashed var(--color);
|
|
text-align: center;
|
|
font-size: 32px;
|
|
color: var(--color);
|
|
opacity: 0;
|
|
z-index: 2;
|
|
} |