initial commit

2021-03-10 23:02:50 +01:00
commit 1d53596559
4 changed files with 176 additions and 0 deletions
--- a/style.css
+++ b/style.css
@ -0,0 +1,150 @@
+body {
+  background: #131313;
+}
+.lines {
+  fill: none;
+  stroke: #4d4d4d;
+  stroke-width: 10;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+.schaum {
+  fill: #F15A24;
+}
+.outline {
+  fill: none;
+  stroke: #4d4d4d;
+  stroke-width: 10;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+.beer {
+  fill: #FF00FF;
+}
+.handle {
+  fill: none;
+  stroke: #4d4d4d;
+  stroke-width: 10;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+
+/*** Animation ***/
+/* Outline */
+.outline {
+  stroke-dasharray: 1500;
+  stroke-dashoffset: 1500;
+  animation: outlinedash 6s linear infinite;
+}
+
+@keyframes outlinedash {
+  5% {
+    stroke-dashoffset: 1500;
+  }
+  45% {
+    stroke-dashoffset: 0;
+  }
+  55% {
+    stroke-dashoffset: 0;
+  }
+  95% {
+    stroke-dashoffset: 1500;
+  }
+}
+
+/* Handle */
+.handle {
+  stroke-dasharray: 300;
+  stroke-dashoffset: 300;
+  animation: handledash 6s linear infinite;
+}
+
+@keyframes handledash {
+  10% {
+    stroke-dashoffset: 300;
+  }
+  20% {
+    stroke-dashoffset: 300;
+  }
+  23% {
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  77% {
+    stroke-dashoffset: 0;
+  }
+  80% {
+    stroke-dashoffset: 300;
+  }
+  90% {
+    stroke-dashoffset: 300;
+  }
+}
+
+/* Lines */
+.lines {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: linedash 6s linear infinite;
+}
+
+@keyframes linedash {
+  5% {
+    stroke-dashoffset: 100;
+  }
+  10% {
+    stroke-dashoffset: 0;
+  }
+  90% {
+    stroke-dashoffset: 0;
+  }
+  95% {
+    stroke-dashoffset: 100;
+  }
+}
+
+/* Schaum */
+.schaum {
+  fill: #131313;
+  animation: fillschaum 6s linear infinite;
+}
+
+@keyframes fillschaum {
+  40% {
+    fill: #131313;
+  }
+  45% {
+    fill: #FFFFFF;
+  }
+  55% {
+    fill: #FFFFFF;
+  }
+  60% {
+    fill: #131313;
+  }
+}
+
+/* Beer */
+.beer {
+  fill: #131313;
+  animation: fillbeer 6s linear infinite;
+}
+@keyframes fillbeer {
+  40% {
+    fill: #131313;
+  }
+  45% {
+    fill: #DEB712;
+  }
+  55% {
+    fill: #DEB712;
+  }
+  60% {
+    fill: #131313;
+  }
+}