hardcode link transforms

Author: g-harel

index.animated.html

@@ -27,6 +27,7 @@
 
             a {
                 color: #aaa;
+                display: inline-block;
                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
                     Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
                 font-weight: 700;
@@ -47,27 +48,27 @@
         </style>
 
         <header>
-            <a class="randomized" href="mailto:gabrielj.harel@gmail.com">CONTACT</a>
-            <a class="randomized" href="https://npmjs.com/package/blobs">NPM</a>
-            <a class="randomized" href="https://github.com/g-harel/blobs">GITHUB</a>
+            <a
+                href="mailto:gabrielj.harel@gmail.com"
+                style="transform: rotate(1deg) translateY(3px);"
+                >CONTACT</a
+            >
+            <a
+                href="https://npmjs.com/package/blobs"
+                style="transform: rotate(-2deg) translateY(-1px);"
+                >NPM</a
+            >
+            <a
+                href="https://github.com/g-harel/blobs"
+                style="transform: rotate(4deg) translateY(1px);"
+                >GITHUB</a
+            >
         </header>
 
         <main>
             <canvas id="canvas"></canvas>
         </main>
 
-        <script>
-            // Randomly rotate and move elements with "randomized" class.
-            const randomize = (elem) => {
-                elem.style.display = "inline-block";
-                elem.style.transform = `
-                    rotate(${-3 + 6 * Math.random()}deg)
-                    translate(${-5 + 10 * Math.random()}px, ${-5 + 10 * Math.random()}px)
-                `;
-            };
-            Array.from(document.querySelectorAll(".randomized")).map(randomize);
-        </script>
-
         <script>
             // Set blob size relative to window, but limit to 600.
             const size = Math.min(600, window.innerWidth - 64);