Eliminate images and use gradients instead

.gitignore

@@ -4,6 +4,4 @@
 
 !*.html
 !*.md
-!*.png
-!*.py
 !*.woff2

generate_sides.py

@@ -1,70 +0,0 @@
-from PIL import Image, ImageDraw
-
-width, height = 1024, 1024
-
-canvas = Image.new("RGB", (width, height))
-draw   = ImageDraw.Draw(canvas)
-
-sides = {
-    "front": [
-        (000, 255, 255),
-        (255, 255, 255),
-        (000, 000, 255),
-        (255, 000, 255),
-    ],
-    "top": [
-        (000, 255, 000),
-        (255, 255, 000),
-        (000, 255, 255),
-        (255, 255, 255),
-    ],
-    "back": [
-        (255, 255, 000),
-        (000, 255, 000),
-        (255, 000, 000),
-        (000, 000, 000),
-    ],
-    "bottom": [
-        (000, 000, 255),
-        (255, 000, 255),
-        (000, 000, 000),
-        (255, 000, 000),
-    ],
-    "right": [
-        (255, 255, 255),
-        (255, 255, 000),
-        (255, 000, 255),
-        (255, 000, 000),
-    ],
-    "left": [
-        (000, 255, 000),
-        (000, 255, 255),
-        (000, 000, 000),
-        (000, 000, 255),
-    ],
-}
-
-for side, colors in sides.items():
-    top_left, top_right = colors[0], colors[1]
-    bottom_left, bottom_right = colors[2], colors[3]
-
-    for y in range(height):
-        left = (
-            int((bottom_left[0] - top_left[0]) * y / height) + top_left[0],
-            int((bottom_left[1] - top_left[1]) * y / height) + top_left[1],
-            int((bottom_left[2] - top_left[2]) * y / height) + top_left[2]
-        )
-        right = (
-            int((bottom_right[0] - top_right[0]) * y / height) + top_right[0],
-            int((bottom_right[1] - top_right[1]) * y / height) + top_right[1],
-            int((bottom_right[2] - top_right[2]) * y / height) + top_right[2]
-        )
-
-        for x in range(width):
-            r = int((right[0] - left[0]) * x / width) + left[0]
-            g = int((right[1] - left[1]) * x / width) + left[1]
-            b = int((right[2] - left[2]) * x / width) + left[2]
-
-            draw.point((x, y), fill=(r, g, b))
-
-    canvas.save(f"{side}.png")

index.html

@@ -104,34 +104,72 @@
       position: absolute;
     }
 
+    .face::after {
+      z-index: -1;
+      content: "";
+      width: inherit;
+      height: inherit;
+      position: absolute;
+    }
+
     .front {
       transform: rotateY(0deg) translateZ(2.5em);
-      background-image: url(front.png);
+      background: linear-gradient(to bottom, cyan, blue);
+    }
+
+    .front::after {
+      background: linear-gradient(to bottom, white, magenta);
+      mask-image: linear-gradient(to left, magenta, transparent);
     }
 
     .top {
       transform: rotateX(90deg) translateZ(2.5em);
-      background-image: url(top.png);
+      background: linear-gradient(to bottom, lime, cyan);
+    }
+
+    .top::after {
+      background: linear-gradient(to bottom, yellow, white);
+      mask-image: linear-gradient(to left, white, transparent);
     }
 
     .back {
       transform: rotateY(180deg) translateZ(2.5em);
-      background-image: url(back.png);
+      background: linear-gradient(to bottom, yellow, red);
+    }
+
+    .back::after {
+      background: linear-gradient(to bottom, lime, black);
+      mask-image: linear-gradient(to left, black, transparent);
     }
 
     .bottom {
       transform: rotateX(-90deg) translateZ(2.5em);
-      background-image: url(bottom.png);
+      background: linear-gradient(to bottom, blue, black);
+    }
+
+    .bottom::after {
+      background: linear-gradient(to bottom, magenta, red);
+      mask-image: linear-gradient(to left, red, transparent);
     }
 
     .right {
       transform: rotateY(90deg) translateZ(2.5em);
-      background-image: url(right.png);
+      background: linear-gradient(to bottom, white, magenta);
+    }
+
+    .right::after {
+      background: linear-gradient(to bottom, yellow, red);
+      mask-image: linear-gradient(to left, red, transparent);
     }
 
     .left {
       transform: rotateY(-90deg) translateZ(2.5em);
-      background-image: url(left.png);
+      background: linear-gradient(to bottom, lime, black);
+    }
+
+    .left::after {
+      background: linear-gradient(to bottom, cyan, blue);
+      mask-image: linear-gradient(to left, blue, transparent);
     }
   </style>
 
@@ -315,4 +353,4 @@
   </script>
 </body>
 
-</html>
+</html>