summaryrefslogtreecommitdiff
path: root/chryzantem.html
diff options
context:
space:
mode:
Diffstat (limited to 'chryzantem.html')
-rw-r--r--chryzantem.html625
1 files changed, 625 insertions, 0 deletions
diff --git a/chryzantem.html b/chryzantem.html
new file mode 100644
index 0000000..c9011c3
--- /dev/null
+++ b/chryzantem.html
@@ -0,0 +1,625 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>❁</title>
+ <style>
+ div, body {
+ margin: 0;
+ padding: 0;
+ }
+
+ img {
+ user-select: none;
+ }
+
+ html {
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ }
+
+ #picture {
+ --unit: calc(100vh / 90);
+ overflow: hidden;
+ height: calc(90 * var(--unit));
+ }
+
+ #picture h1 {
+ font-size: var(--unit);
+ }
+
+ #picture>*, .smile, .eyes, .center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .flower {
+ position: relative;
+ top: calc(-75 * var(--unit));
+ width: calc(30 * var(--unit));
+ height: calc(30 * var(--unit));
+ }
+
+ .flower>* {
+ position: relative;
+ width: 0;
+ height: 0;
+ }
+
+ .center {
+ top: calc(15 * var(--unit));
+
+ animation-name: center-appear;
+ animation-duration: 0.4s;
+ animation-fill-mode: both;
+ }
+
+ .center::before {
+ content: "";
+ display: block;
+ width: calc(3 * var(--unit));
+ height: calc(3 * var(--unit));
+ background-color: orange;
+ border-radius: calc(1.5 * var(--unit));
+ position: relative;
+ top: calc(-1.5 * var(--unit));
+ left: calc(-1.5 * var(--unit));
+ }
+
+ @keyframes center-appear {
+ 0% {
+ transform: scale(0);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ .petal {
+ top: calc(14.7 * var(--unit));
+ left: calc(15 * var(--unit));
+ }
+
+ .petal * {
+ width: calc(var(--subunit) * var(--unit));
+ animation-duration: 10s;
+ animation-timing-function: ease-out;
+ animation-fill-mode: both;
+ }
+
+ .petal>*{
+ position: relative;
+ top: calc(-3 * var(--subunit) * var(--unit));
+ left: calc(-0.5 * var(--subunit) * var(--unit));
+
+ transform-origin: 50% 100%;
+ animation-name: petal-rotate;
+ }
+
+ .petal>*>*{
+ position: relative;
+
+ animation-delay: inherit;
+ animation-name: petal-come-close;
+ }
+
+ @keyframes petal-rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(var(--end-deg));
+ }
+ }
+
+ @keyframes petal-come-close {
+ 0% {
+ bottom: calc(15 * var(--unit));
+ }
+
+ 100% {
+ bottom: 0;
+ }
+ }
+
+ .smile {
+ top: calc(20 * var(--unit));
+ }
+
+ .eyes {
+ top: calc(5 * var(--unit));
+ }
+
+ .smile>*, .eyes>* {
+ position: relative;
+ width: calc(17 * var(--unit));
+ left: calc(-8.5 * var(--unit));
+ top: calc(-3 * var(--unit));
+ animation-fill-mode: both;
+ }
+
+ .smile>* {
+ animation-name: appear;
+ animation-duration: 0.3s;
+ }
+
+ @keyframes appear {
+ 0% {
+ transform: scaleY(0);
+ }
+
+ 100% {
+ transform: scaleY(1);
+ }
+ }
+
+ .eyes>* {
+ transform-origin: 50% calc(10.5 * var(--unit));
+ animation-name: eyes-blink;
+ animation-duration: 4s;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes eyes-blink {
+ 0%, 100% {
+ transform: scaleY(0);
+ }
+
+ 7.5%, 92.5% {
+ transform: scaleY(1);
+ }
+ }
+
+ .stem {
+ position: relative;
+ top: calc(15 * var(--unit));
+ background-color: #495;
+ border-left: solid calc(0.5 * var(--unit)) #252;
+ border-right: solid calc(0.5 * var(--unit)) #252;
+ width: var(--unit);
+ height: calc(75 * var(--unit));
+
+ transform-origin: 50% calc(0 * var(--unit));
+ animation-name: appear;
+ animation-duration: 0.6s;
+ animation-fill-mode: both;
+ }
+
+ .wesolych, .wszystkich {
+ position: relative;
+ width: 0;
+ height: 0;
+ top: calc(-55 * var(--unit));
+
+ animation-name: appear;
+ animation-duration: 0.4s;
+ animation-fill-mode: both;
+ }
+
+ .wszystkich {
+ top: calc(-35 * var(--unit));
+ }
+
+ .wesolych>*, .wszystkich>* {
+ position: relative;
+ width: calc(42 * var(--unit));
+ left: calc(-21 * var(--unit));
+
+ transform-origin: 50% 100%;
+ animation-name: bounce;
+ animation-direction: alternate;
+ animation-iteration-count: infinite;
+ animation-duration: 1.5s;
+ animation-fill-mode: both;
+ animation-timing-function: cubic-bezier(0.01, 0.29, 0, 0.96);
+ }
+
+ @keyframes bounce {
+ 0% {
+ transform: scaleY(0.7);
+ }
+
+ 100% {
+ transform: scaleY(1.2);
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="picture">
+ <div class="stem" style="animation-delay: 27.15s;"></div>
+ <div class="flower">
+ <div class="center" style="animation-delay: 14.8s;"></div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -360deg; animation-delay: 17.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -384deg; animation-delay: 16.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -408deg; animation-delay: 16.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -432deg; animation-delay: 16.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -456deg; animation-delay: 16.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -480deg; animation-delay: 16.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -504deg; animation-delay: 15.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -528deg; animation-delay: 15.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -552deg; animation-delay: 15.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -576deg; animation-delay: 15.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -600deg; animation-delay: 15.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -624deg; animation-delay: 14.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -648deg; animation-delay: 14.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -672deg; animation-delay: 14.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 4.9; --end-deg: -696deg; animation-delay: 14.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -732deg; animation-delay: 14.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -756deg; animation-delay: 13.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -780deg; animation-delay: 13.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -804deg; animation-delay: 13.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -828deg; animation-delay: 13.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -852deg; animation-delay: 13.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -876deg; animation-delay: 12.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -900deg; animation-delay: 12.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -924deg; animation-delay: 12.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -948deg; animation-delay: 12.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -972deg; animation-delay: 12.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -996deg; animation-delay: 11.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -1020deg; animation-delay: 11.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -1044deg; animation-delay: 11.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 3.5; --end-deg: -1068deg; animation-delay: 11.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1104deg; animation-delay: 11.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1128deg; animation-delay: 10.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1152deg; animation-delay: 10.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1176deg; animation-delay: 10.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1200deg; animation-delay: 10.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1224deg; animation-delay: 10.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1248deg; animation-delay: 9.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1272deg; animation-delay: 9.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1296deg; animation-delay: 9.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1320deg; animation-delay: 9.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1344deg; animation-delay: 9.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1368deg; animation-delay: 8.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1392deg; animation-delay: 8.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1416deg; animation-delay: 8.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 2.5; --end-deg: -1440deg; animation-delay: 8.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1476deg; animation-delay: 8.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1500deg; animation-delay: 7.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1524deg; animation-delay: 7.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1548deg; animation-delay: 7.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1572deg; animation-delay: 7.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1596deg; animation-delay: 7.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1620deg; animation-delay: 6.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1644deg; animation-delay: 6.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1668deg; animation-delay: 6.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1692deg; animation-delay: 6.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1716deg; animation-delay: 6.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1740deg; animation-delay: 5.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1764deg; animation-delay: 5.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1788deg; animation-delay: 5.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1.5; --end-deg: -1812deg; animation-delay: 5.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -1848deg; animation-delay: 5.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -1872deg; animation-delay: 4.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -1896deg; animation-delay: 4.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -1920deg; animation-delay: 4.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -1944deg; animation-delay: 4.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -1968deg; animation-delay: 4.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -1992deg; animation-delay: 3.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2016deg; animation-delay: 3.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2040deg; animation-delay: 3.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2064deg; animation-delay: 3.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2088deg; animation-delay: 3.0s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2112deg; animation-delay: 2.8s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2136deg; animation-delay: 2.6s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2160deg; animation-delay: 2.4s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="petal">
+ <div style="--subunit: 1; --end-deg: -2184deg; animation-delay: 2.2s;">
+ <img src="./petal.svg" alt="flower petal" draggable="false">
+ </div>
+ </div>
+ <div class="smile">
+ <img style="animation-delay: 26.65s;" src="./smile.svg" alt="flower smile" draggable="false">
+ </div>
+ <div class="eyes">
+ <img style="animation-delay: 26.65s;" src="./eyes.svg" alt="flower eyes" draggable="false">
+ </div>
+ </div>
+ <div class="wesolych" style="animation-delay: 28.25s;">
+ <img src="wesolych.svg" alt="&quot;Wesołych Świąt&quot; text" draggabe="false"></img>
+ </div>
+ <div class="wszystkich" style="animation-delay: 28.25s;">
+ <img src="wszystkich.svg" alt="&quot;Wszystkich Świętych&quot; text" draggable="false"></img>
+ </div>
+ </div>
+ </body>
+</html>