feat: add stripes to the top and the bottom

index.html

@@ -18,6 +18,7 @@
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <rect class="background" width="100%" height="100%" />
+                    <g class="stripes"></g>
                     <text
                         class="title"
                         x="600"

src/constants.ts

@@ -1,2 +1,5 @@
 export const BACKGROUND = "#343a42";
 export const TEXT_COLOR = "#fff";
+export const LIGHT_BLUE = "#20aabb";
+export const DARK_BLUE = "#1770bb";
+export const STRIPE_COLORS = [LIGHT_BLUE, DARK_BLUE];

src/main.ts

@@ -1,4 +1,4 @@
-import { BACKGROUND, TEXT_COLOR } from "./constants";
+import { BACKGROUND, STRIPE_COLORS, TEXT_COLOR } from "./constants";
 import { SvgBuilder } from "./svg";
 
 import "./style.css";
@@ -27,4 +27,5 @@ const cover = new SvgBuilder(svg);
 
 cover
     .setBackground(BACKGROUND)
+    .addStripes(STRIPE_COLORS)
     .setTitle({ text: inputTextArea.value, color: TEXT_COLOR, fontSize: 80 });

src/svg.ts

@@ -1,16 +1,36 @@
+import { randomInt } from "./utils";
+
 type TextOptions = {
     text: string;
     color: string;
     fontSize: number;
 };
 
+type RectangleOptions = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+};
+
 const lineHeight = 1.2;
 
+const stripeHeight = 12;
+const stripeSpacing = 18;
+const minWidth = 40;
+const maxWidth = 160;
+const marginTop = 18;
+const marginBottom = 602;
+const viewBoxWidth = 1280;
+const minVisibleWidth = 20;
+
 export class SvgBuilder {
     private readonly nameSpace = "http://www.w3.org/2000/svg";
 
     private readonly background: SVGGeometryElement;
     private readonly title: SVGTextElement;
+    private readonly stripes: SVGElement;
 
     constructor(private readonly element: SVGElement) {
         const background =
@@ -29,6 +49,14 @@ export class SvgBuilder {
         }
 
         this.title = title;
+
+        const stripes = this.element.querySelector<SVGElement>(".stripes");
+
+        if (!stripes) {
+            throw new Error("Cannot find stripes element");
+        }
+
+        this.stripes = stripes;
     }
 
     setBackground(color: string) {
@@ -66,4 +94,59 @@ export class SvgBuilder {
 
         return this;
     }
+
+    addStripes(colors: string[]) {
+        this.fillStripeSection(marginTop, marginTop + 100, colors);
+        this.fillStripeSection(marginBottom, marginBottom + 100, colors);
+
+        return this;
+    }
+
+    protected fillStripeSection(
+        yStart: number,
+        yEnd: number,
+        colors: string[],
+    ) {
+        let colorIndex = 0;
+        for (let y = yStart; y < yEnd; y += stripeHeight + stripeSpacing) {
+            colorIndex = (colorIndex + 1) % colors.length;
+
+            let x = -maxWidth; // Start from left side, stripes may overflow
+
+            while (x < viewBoxWidth) {
+                const stripeWidth = randomInt(minWidth, maxWidth);
+                const visibleWidth =
+                    stripeWidth + x < 0 ? stripeWidth + x : stripeWidth;
+
+                colorIndex = (colorIndex + 1) % colors.length;
+                const stripeColor = colors[colorIndex];
+
+                if (visibleWidth >= minVisibleWidth) {
+                    this.stripes.appendChild(
+                        this.buildRect({
+                            x,
+                            y,
+                            width: stripeWidth,
+                            height: stripeHeight,
+                            color: stripeColor,
+                        }),
+                    );
+                }
+
+                x += stripeWidth + stripeSpacing;
+            }
+        }
+    }
+
+    protected buildRect({ x, y, width, height, color }: RectangleOptions) {
+        const rect = document.createElementNS(this.nameSpace, "rect");
+
+        rect.setAttribute("x", x.toString());
+        rect.setAttribute("y", y.toString());
+        rect.setAttribute("width", width.toString());
+        rect.setAttribute("height", height.toString());
+        rect.setAttribute("fill", color);
+
+        return rect;
+    }
 }

src/utils.ts

@@ -0,0 +1,3 @@
+export function randomInt(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min) + min);
+}