Is the rink really NHL regulation?

Yes. Dimensions are scaled from NHL/IIHF spec: 200ft × 85ft, with corner radii, face-off circle radii, hash marks, neutral-zone dot placement, goal crease, and trapezoid all drawn to spec.

Can I save plays for later?

Not yet. The tool is currently single-session — refresh the page and your drawing is gone. A play library with save/load is planned.

Does it work on mobile?

Yes, but the drawing experience is better on tablet or desktop where you have more precision. The rink itself renders cleanly at any size.

Will you add animated play replay?

It's on the roadmap. The underlying canvas already supports it; the UI is the work that hasn't shipped.

Is this affiliated with the NHL?

No. Web Design Awards built this as a free utility. The rink is rendered from the public specification — nothing about the tool is licensed or endorsed by the NHL or any team.

Why is a web design awards site hosting a hockey tool?

Honest answer: a juror wanted a clean rink to diagram plays for their kid's coach, couldn't find one online that didn't look amateur, and we built one. It's free, it's accurate, it's here.

In-house tool

Hockey Whiteboard

A pixel-accurate NHL rink overlay you can draw plays on — built for coaches, broadcast designers, and hockey people.

Hockey Whiteboard is a Web Design Awards in-house tool that renders a regulation NHL ice rink to scale — face-off circles, hash marks, neutral spots, goal lines, trapezoids, creases — and gives you a drawable surface on top of it. Use it to diagram plays, mark up scouting clips, or build hockey graphics that don't look like Microsoft Paint.

Open the tool ↓Nominate a site →

Pricing · Free — in-house tool, no accountBuilt by Web Design Awards

— 01 / At a glance

The facts.

The shape of the tool.

Most online hockey whiteboards are approximations. Face-off circles are the wrong radius, the trapezoid behind the net is omitted, neutral-zone dots float at the wrong distance from the blue line, and the result is a rink that no coach would put a play on. That's fine if you're sketching for fun. It's not fine if you're a youth-team coach who actually wants the diagram to map to the ice your kids are on, or if you're a broadcast designer trying to ship a tactical breakdown that doesn't look amateur.

Hockey Whiteboard renders the rink from a regulation spec — 200ft × 85ft scaled to the canvas, with corner radii, face-off circle radii, hash mark lengths, and creasing dimensions all spec-correct. You draw on top with arrows, dots, dashes, and labels. The result is a play diagram that maps cleanly to the surface a coach will see at the rink.

It is a deliberately narrow tool. There's no animation, no multi-frame play replay, no formation library yet. That's intentional — getting the underlying rink right was the first and most-asked-for problem, and it deserved a dedicated solution. Future work will add a play library and animated play replay; for now, the static whiteboard is enough to ship a clean diagram.

— 03 / Try it

Open the tool.

Open the whiteboard

Live · runs in your browser

Regulation NHL dimensions are 200 feet long by 85 feet wide. Neutral zone width is 50 feet, defined by blue lines 25 feet from center ice. Goal lines sit 11 feet from the end boards with semicircular creases extending four feet into the zone.

Face-off circles are 15 feet in radius, positioned 20 feet from the goal line and 22 feet from the center line. Neutral zone dots sit five feet from the red line, matching NHL coaching whiteboard layouts, while trapezoid markers show the goaltender-restricted areas behind each net.

— 04 / Key features

What it actually does.

NHL regulation rink rendered to scale (200ft × 85ft, scaled to canvas)
Accurate face-off circles, hash marks, and neutral-zone dot placement
Goal crease, goal mouth, and trapezoid behind the net drawn to spec
Drawable overlay for play arrows, players, and labels
Clean SVG output suitable for screenshot, embed, or export
Mobile-friendly canvas sizing
No account, no upload, no tracking

— 05 / Use cases

When designers reach for it.

01
Youth and minor hockey coaching
Diagram a breakout, a power play, or a penalty kill on a surface that actually maps to the ice your team practices on. Print or screenshot for the locker room.
02
Beer-league and rec coaching
Same problem, lower stakes, equally valid. A clean diagram is the difference between a confused team and a team that runs the play.
03
Broadcast graphics design
Designers working on hockey broadcast packages need a base rink that doesn't embarrass them when zoomed in. Use this as a vector starting point, then style in your brand system.
04
Tactical analysis writing
Hockey newsletters and Substack writers embed play diagrams to break down plays. A spec-accurate rink lends credibility — readers notice when the face-off circles are wrong.
05
Awards portfolio context
Sports broadcasting and team websites are increasingly common award nominees. A whiteboard tool that respects the spec is also a credibility signal for the design team.

— 06 / Workflow

A working sequence.

01
Pick the rink orientation
Default is full-rink horizontal. Use a half-rink view for breakouts, power plays, or zone-specific plays.
02
Place players at their starting positions
Use the dot tool. Label by jersey number or position (C, LW, RW, LD, RD, G). Color by team.
03
Draw the puck movement
Use solid arrows for passes, dashed arrows for player movement without the puck, curved arrows for skating around an opponent.
04
Annotate timing or sequence
Number the arrows (1, 2, 3) so the reader follows the play in order. Add text labels for key decisions ('option A' vs 'option B').
05
Export or embed
Screenshot for quick share, copy the SVG markup for embed in a publication, or export from your screenshot tool of choice.

— 07 / Best for

Who it fits.

Hockey coaches at every level
Tactical analysts and writers
Sports broadcast designers
Hockey newsletter creators
Anyone tired of crappy paint-program rinks

— 08 / Strengths & trade-offs

The balance.

Strengths

Regulation rink rendered to spec — no approximations
Clean enough to screenshot and ship directly
Free, no account, no tracking, no upload
Loads fast and works on mobile

Trade-offs

No play animation yet (planned)
No formation library yet (planned)
Drawing tools are intentionally minimal
No collaborative drawing — single-user only

Web Design Awards — Verdict

A narrow, well-built tool for a specific audience. If you've ever winced at the rink in a hockey diagram, this is the tool you wanted. If you don't care about the rink, you won't notice — which is the point.

Pricing · Free — in-house tool, no account

— 09 / Common questions

FAQ

Is the rink really NHL regulation?
Yes. Dimensions are scaled from NHL/IIHF spec: 200ft × 85ft, with corner radii, face-off circle radii, hash marks, neutral-zone dot placement, goal crease, and trapezoid all drawn to spec.
Can I save plays for later?
Not yet. The tool is currently single-session — refresh the page and your drawing is gone. A play library with save/load is planned.
Does it work on mobile?
Yes, but the drawing experience is better on tablet or desktop where you have more precision. The rink itself renders cleanly at any size.
Will you add animated play replay?
It's on the roadmap. The underlying canvas already supports it; the UI is the work that hasn't shipped.
Is this affiliated with the NHL?
No. Web Design Awards built this as a free utility. The rink is rendered from the public specification — nothing about the tool is licensed or endorsed by the NHL or any team.
Why is a web design awards site hosting a hockey tool?
Honest answer: a juror wanted a clean rink to diagram plays for their kid's coach, couldn't find one online that didn't look amateur, and we built one. It's free, it's accurate, it's here.

— 10 / Related tools

Or look at the others.

Last reviewed: 2026-05 · 7 tools in the Web Design Awards directory