I built a 'life in weeks' poster generator in one HTML file

I made a tool that draws every week of your life on a single sheet of paper.

A long human life is roughly 5,200 weeks. That's a 100-row × 52-column grid — small enough to fit on one A4 page, big enough that you instinctively try to count them. The tool fills in the weeks you've already lived, leaves the rest empty, and exports a PDF you can print.

Live: https://alicommit-malp.github.io/life-in-weeks/
Source: https://github.com/alicommit-malp/life-in-weeks

It's also a quiet experiment in restraint:

One file (index.html — HTML, CSS, JS, all of it)
No framework, no bundler, no package.json
Two CDN deps: jsPDF and Google Fonts
No backend, no analytics, no localStorage
$0 hosting, $0 forever

This post is about the design decisions. There's just enough code to show what's interesting; the rest is on GitHub.

Why one file?

Because the surface area is small. The whole product is "type your name and birthdate, click two buttons." A build step buys nothing — and "no build step" buys something real: anyone can clone the repo, double-click index.html, and run it offline. No npm install, no Node version mismatch, no broken Vite plugin two years from now.

This wasn't dogma. I genuinely tried to imagine a v2 that needed React. I couldn't justify it.

Drawing 5,200 circles fast

The naive approach is <circle> × 5,200. It works, but that's a lot of DOM nodes.

The trick: two <path> elements, one for filled circles and one for empty ones. Build the path data as a single string of moveto + arc commands.

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);
  }
}

The M cx,cy m -r,0 a r,r 0 1,0 2r,0 a r,r 0 1,0 -2r,0 pattern draws a circle as two half-arcs from a moveto point. Subsequent M commands inside the same d attribute start a new disconnected subpath, so one <path> element ends up containing 5,000+ circles.

Two DOM nodes instead of 5,200. Render is instant.

Keeping the PDF honest

The on-screen preview is SVG. The download is a real PDF, generated by jsPDF from circle(), line(), and text() primitives. They have to look identical — if the preview lies, the user feels cheated the moment they hit "Download."

The fix is shared coordinate math. jsPDF in pt units uses A4 = 595.27 × 841.89, top-left origin, y growing down — exactly like SVG. So both renderers consume the same constants:

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, font sizes, tick step
}

Both renderSVG() and renderPDF() call computeLayout(years) and then walk identical loops. Change a margin in one place, both renderers update. No divergence.

The layout is height-constrained — and that's a feature

100 rows × 52 columns of square circles on a single A4 page means cell size is capped by page height, not width. The grid ends up about 135 mm wide — there are ~24 mm of empty margin on the left and right. People keep wanting to "fix" this.

Earlier iterations tried:

Two-page A4 — wider circles, but you have to tape the pages together
Landscape A4 — counterintuitively gives smaller circles, because height becomes the new constraint
Stretched ovals — looks bad

The empty side margins are correct. They're the price of the proportions. I kept them.

Adding pets

Recently I added a Human / Dog / Cat selector. Dogs get 20 rows × 52 columns; cats, 25. For shorter spans, the cell size becomes width-constrained instead, so circles get bigger, and the tick axis switches from a 10-year step to a 5-year step:

const SPECIES = {
  human: { years: 100, placeholder: "e.g. Ali" },
  dog:   { years: 20,  placeholder: "e.g. Spot" },
  cat:   { years: 25,  placeholder: "e.g. Mochi" },
};

// inside computeLayout:
const tickStep = years <= 30 ? 5 : 10;

Because all the layout state went through one function, adding species was a small diff plus a CSS segmented control. I didn't have to touch the rendering loops at all.

Going against the SaaS look

Most "free tool" landing pages use the same recipe: Inter, gradient backgrounds, rounded cards with shadows, a Lucide icon next to every heading. Safe and forgettable.

I went the other way:

Fraunces for the display serif (italic accent on in weeks)
JetBrains Mono for everything else
Warm off-white paper background with a faint radial-gradient grain
One emphasis color — terracotta — used sparingly
A magazine-style masthead bar at the top
Inputs are typewriter-style: serif text, single underline, no boxed fields

It looks more like a printed thing than a webapp. Which is the point — the output is a printed thing.

Privacy is the simple kind

There's no backend, no fetch to any server I control, no analytics, no cookies, no localStorage. Your name and birthdate never leave the browser tab.

The only network requests are Google Fonts and jsPDF from cdnjs. Neither receives the form data.

I didn't need a privacy policy because there's nothing to disclose.

Cost

GitHub Pages serves the file. The fonts are free. jsPDF is MIT. Total monthly cost: $0. I expect it to keep being.

Try it

Live: https://alicommit-malp.github.io/life-in-weeks/
Source: https://github.com/alicommit-malp/life-in-weeks (MIT)

Fork it, print it, gift it.

推荐订阅源

DEV Community