Switch into interactive svg Logo

- Follow mouse with `css` transforms and animations in _CoverPage_
- Use vector based `.svg` Logo in Readme with a little animation
- Remove unused `.png` file

README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <a href="https://mythbusters.js.org"><img src="docs/logo.png"></a>
+  <a href="https://mythbusters.js.org"><img src="docs/logo.svg"></a>
   <br>
   JS MythBusters
   <br>
@@ -12,4 +12,4 @@
 
 <h4 align="center">A JavaScript optimization handbook from a high level point of view.</h4>
 
-<br>
+<br>

docs/_coverpage.md

@@ -1,4 +1,46 @@
-![logo](logo.png)
+
+<div class="logo-container">
+  <div class="heats"> 
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <div class="h"></div>
+    <svg class="ghost" viewBox="0 0 300 300">
+      <path d="M150 21.2a100 100 0 0 0-100 100v157.6l25-26 25 26 25-26 25 26 25-26 25 26 25-26 25 26V121.2a100 100 0 0 0-100-100z" fill="#edf4f7" stroke="#51565f" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path>
+      <g class="eye eye--left">
+        <circle cx="127.5" cy="133.2" r="25" fill="currentColor" stroke="#51565f" stroke-width="4"></circle>
+        <circle class="pupil" cx="136.1" cy="133.7" r="5" fill="#51565f"></circle>
+        <path class="eyelid" fill="#edf4f7" d="M94.6 82.2h65.7v39.82H94.6z"></path>
+      </g>
+      <g class="eye eye--right">
+        <circle cx="127.5" cy="133.2" r="25" fill="currentColor" stroke="#51565f" stroke-width="4"></circle>
+        <circle class="pupil" cx="136.1" cy="133.7" r="5" fill="#51565f"></circle>
+        <path class="eyelid" fill="#edf4f7" d="M94.6 82.2h65.7v39.82H94.6z"></path>
+      </g>
+    </svg>
+  </div>
+</div>
 
 # JS MythBusters 
 

docs/style.css

@@ -1000,3 +1000,195 @@ pre:after {
 #HW_badge_cont {
   display: inline !important;
 }
+
+
+/* Interactive Logo  */
+/* Source: http://codepen.io/elrumordelaluz/pen/aWavEG */
+
+.logo-container {
+  position: relative;
+  width: 256px;
+  height: 256px;
+  display: block;
+  margin: 0 auto;
+}
+
+.ghost,
+.heats {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.heats {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.ghost {
+  z-index: 1;
+}
+
+.eye {
+  color: #00d3ee;
+  transition: .3s;
+  transform-origin: center center;
+}
+
+.eye--right {
+  transform: translateX(70px);
+}
+
+.eyelid {
+  animation: blink 5s infinite alternate;
+}
+.eye--left .eyelid {
+  transform-origin: top right;
+}
+.eye--right .eyelid {
+  transform-origin: top left;
+}
+
+.pupil,
+.eyelid {
+  transition: .3s;
+}
+
+.pupil {
+  transform-origin: center center;
+}
+
+.h {
+  z-index: 2;
+  /* debug */
+  /* outline: 1px solid red; */
+}
+
+.h:nth-of-type(1):hover ~ .ghost .pupil {
+  transform: translate(-10px, -10px);
+}
+
+.h:nth-of-type(2):hover ~ .ghost .pupil {
+  transform: translate(-5px, -10px);
+}
+
+.h:nth-of-type(3):hover ~ .ghost .pupil {
+  transform: translate(0px, -10px);
+}
+
+.h:nth-of-type(4):hover ~ .ghost .pupil {
+  transform: translate(5px, -10px);
+}
+
+.h:nth-of-type(5):hover ~ .ghost .pupil {
+  transform: translate(10px, -10px);
+}
+
+.h:nth-of-type(6):hover ~ .ghost .pupil {
+  transform: translate(-10px, -5px);
+}
+
+.h:nth-of-type(7):hover ~ .ghost .pupil {
+  transform: translate(-5px, -5px);
+}
+
+.h:nth-of-type(8):hover ~ .ghost .pupil {
+  transform: translate(0px, -5px);
+}
+
+.h:nth-of-type(9):hover ~ .ghost .pupil {
+  transform: translate(5px, -5px);
+}
+
+.h:nth-of-type(10):hover ~ .ghost .pupil {
+  transform: translate(10px, -5px);
+}
+
+.h:nth-of-type(11):hover ~ .ghost .pupil {
+  transform: translate(-10px, 0px);
+}
+
+.h:nth-of-type(12):hover ~ .ghost .pupil {
+  transform: translate(-5px, 0px);
+}
+
+.h:nth-of-type(13):hover ~ .ghost .pupil {
+  transform: translate(0px, 0px);
+}
+
+.h:nth-of-type(14):hover ~ .ghost .pupil {
+  transform: translate(5px, 0px);
+}
+
+.h:nth-of-type(15):hover ~ .ghost .pupil {
+  transform: translate(10px, 0px);
+}
+
+.h:nth-of-type(16):hover ~ .ghost .pupil {
+  transform: translate(-10px, 5px);
+}
+
+.h:nth-of-type(17):hover ~ .ghost .pupil {
+  transform: translate(-5px, 5px);
+}
+
+.h:nth-of-type(18):hover ~ .ghost .pupil {
+  transform: translate(0px, 5px);
+}
+
+.h:nth-of-type(19):hover ~ .ghost .pupil {
+  transform: translate(5px, 5px);
+}
+
+.h:nth-of-type(20):hover ~ .ghost .pupil {
+  transform: translate(10px, 5px);
+}
+
+.h:nth-of-type(21):hover ~ .ghost .pupil {
+  transform: translate(-10px, 10px);
+}
+
+.h:nth-of-type(22):hover ~ .ghost .pupil {
+  transform: translate(-5px, 10px);
+}
+
+.h:nth-of-type(23):hover ~ .ghost .pupil {
+  transform: translate(0px, 10px);
+}
+
+.h:nth-of-type(24):hover ~ .ghost .pupil {
+  transform: translate(5px, 10px);
+}
+
+.h:nth-of-type(25):hover ~ .ghost .pupil {
+  transform: translate(10px, 10px);
+}
+
+.h:nth-of-type(8):hover ~ .ghost .eye,
+.h:nth-of-type(13):hover ~ .ghost .eye {
+  color: #f00;
+}
+
+.h:nth-of-type(8):hover ~ .ghost .eye--left .pupil {
+  transform: translate(10px, -5px);
+}
+.h:nth-of-type(8):hover ~ .ghost .eye--right .pupil {
+  transform: translate(-20px, -10px);
+}
+
+.h:nth-of-type(13):hover ~ .ghost .eye--left .pupil {
+  transform: translate(10px, 7px);
+}
+.h:nth-of-type(13):hover ~ .ghost .eye--right .pupil {
+  transform: translate(-20px, 5px);
+}
+
+@keyframes blink {
+  0%,
+  97% {
+    transform: translateY(-18px);
+  }
+  100% {
+    transform: translateY(20px);
+  }
+}