Running Year in Review Card Generator

Turn your race history into a beautiful concentric ring visualizer — each race becomes one ring, sized by distance and colored by your time relative to your personal best. Download as a 1080×1080 PNG ready to post on Instagram or Strava.

Tip: paste a CSV or type manually. Time formats accepted: H:MM:SS, MM:SS, M:SS. Distance in km.

Your Race Card

Personal best pace Mid range Slowest pace Ring width = distance

How it works

1
Enter your races
Type or paste one race per line: name, distance in km, finish time, and date. The generator accepts CSV format or plain text with commas.
2
Rings are drawn from the inside out
The first race appears as the innermost ring. Each subsequent race adds an outer ring. Ring width scales with distance — a marathon ring is roughly 4× wider than a 10 K ring, proportional to the distances entered.
3
Color = pace performance
The generator calculates your pace (min/km) for every race. The fastest pace gets a bright green, the slowest gets red, and everything in between blends through yellow. This lets you see at a glance which races were your best efforts.
4
Download and share
The card is rendered at exactly 1080×1080 pixels — the ideal square format for Instagram, Strava, or Twitter. Hit "Download PNG" to save it locally, then post directly.
Example format: Boston Marathon, 42.2, 3:45:22, 2024-04-15 10K Harbor Run, 10, 48:30, 2024-06-08 Half Marathon, 21.1, 1:52:44, 2024-09-22 5K Turkey Trot, 5, 22:15, 2024-11-28

Frequently asked questions

What time format should I use?
Use H:MM:SS for events over an hour (e.g. 3:45:22 for a 3-hour marathon), or MM:SS / M:SS for shorter races (e.g. 22:15 for a 5 K). The generator parses all three formats automatically. Do not include milliseconds.
How is the ring color calculated?
The generator converts every finish time to a pace in minutes per kilometer (pace = total seconds ÷ distance). It then finds the fastest and slowest pace across all your races and maps that range to a green → yellow → red gradient. Green means you were running at your fastest pace for that entry; red means your slowest relative to your own results. If all races have the same pace, all rings appear green.
How is ring width determined?
Ring widths are proportional to race distance. The longest race in your list gets the widest ring (up to 70 px), and all other rings scale down linearly. A minimum width of 14 px is enforced so short races remain visible. This means a marathon ring is typically 8× wider than a 5 K ring — visually conveying the effort involved.
Can I include more than 10 races?
Yes — the generator handles up to about 20–24 races before the rings run out of canvas space at 1080 px. If you have a very large season, consider grouping smaller training races or focussing on key events. The generator will warn you if there is not enough space to draw all rings.
Is my data sent anywhere?
No. Everything runs entirely in your browser using the HTML5 Canvas API. No data is uploaded to any server. Closing the tab erases all input — nothing is stored or tracked.