initial commitHEAD master

author: Wojtek <stalking@disallow.ed> 2021-10-31 23:55:32 +0100
committer: Wojtek <stalking@disallow.ed> 2021-10-31 23:55:32 +0100
commit: 69574783196ba1af7f7c428ae8132d7379277c20 (patch)
tree: 2a2f9a1bb13f07edb120eb87f716e0b626f0a229 /chryzantem.html
download: chrysantemum-master.tar.gz
chrysantemum-master.zip
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>
author	Wojtek <stalking@disallow.ed>	2021-10-31 23:55:32 +0100
committer	Wojtek <stalking@disallow.ed>	2021-10-31 23:55:32 +0100
commit	69574783196ba1af7f7c428ae8132d7379277c20 (patch)
tree	2a2f9a1bb13f07edb120eb87f716e0b626f0a229 /chryzantem.html
download	chrysantemum-master.tar.gz chrysantemum-master.zip