Building a Zero-Dependency 'Life in Weeks' Poster Generator

I built a ‘life in weeks’ poster generator in one HTML file

Ali Alp developed a ‘life in weeks’ poster generator contained entirely within a single index.html file. The tool visualizes a 100-year human life by drawing a 100-row by 52-column grid comprising 5,200 SVG circles.

Why This Matters

Modern web development often defaults to complex frameworks and build steps even for trivial tasks, creating dependency rot and maintenance overhead. This project demonstrates that vanilla JavaScript and path-based SVG rendering can achieve instant performance and perfect PDF fidelity at zero cost without the need for a backend or node_modules.

Key Insights

• Path-based SVG rendering: Using two path elements with moveto and arc commands instead of 5,200 circle nodes ensures instant DOM performance.
• Unified coordinate math: Sharing a layout function between the SVG preview and jsPDF (using pt units where A4 is 595.27 x 841.89) prevents visual divergence between web and print.
• Zero-dependency longevity: Eschewing npm and bundlers allows the project to run offline via a local file system without version mismatches or broken plugins.
• Privacy-by-design: By processing all data locally without a backend or localStorage, the tool eliminates the need for privacy disclosures or data tracking.
• Dynamic layout constraints: Scaling logic adjusts between width-constrained and height-constrained grids based on species lifespan (Human, Dog, or Cat) to maintain circle proportions.

Working Examples

Optimized SVG rendering using subpaths to draw 5,200 circles with only two DOM nodes.

function circlePath(cx, cy, r) {
  return `M${cx},${cy} m${-r},0 a${r},${r} 0 1,0 ${2*r},0 a${r},${r} 0 1,0 ${-2*r},0 `;
}
let filledD = "", emptyD = "";
for (let r = 0; r < YEARS; r++) {
  const cy = gridTop + (r + 0.5) * ROW_H;
  for (let w = 0; w < WEEKS; w++) {
    const cx = leftX + (w + 0.5) * CELL;
    const idx = r * WEEKS + w;
    if (idx < totalWeeks) filledD += circlePath(cx, cy, CIRCLE_R);
    else emptyD += circlePath(cx, cy, CIRCLE_R);
  }
}

Shared layout logic ensuring the SVG preview matches the jsPDF export exactly.

const PAGE_W = 595.27;
const PAGE_H = 841.89;
const MM = 2.83465; // 1 mm in pt
function computeLayout(years) {
  const cellWMax = (PAGE_W - LEFT_M - RIGHT_M) / 52;
  const cellHMax = (PAGE_H - TOP_M - BOTTOM_M) / years;
  const cell = Math.min(cellWMax, cellHMax);
  // ... gridW, gridH, leftX, gridTop, circleR
}

Practical Applications

• Use Case: Building single-file utility tools that must remain functional for years without maintenance or active hosting; Pitfall: Over-engineering with frameworks like React for simple visualizations leads to dependency rot.
• Use Case: Generating high-fidelity print documents from web interfaces using jsPDF; Pitfall: Divergent rendering logic between screen and print creates a ‘cheated’ user experience when the PDF output doesn’t match the preview.
• Use Case: High-performance data visualization in the browser; Pitfall: Creating thousands of individual DOM nodes for small shapes causes significant browser layout and paint latency.

References:

• https://alicommit-malp.github.io/life-in-weeks/
• https://github.com/alicommit-malp/life-in-weeks
• https://dev.to/alialp/i-built-a-life-in-weeks-poster-generator-in-one-html-file-40hp