Hockey Play Designer

1 · Tools

Curved arrow: drag from start to finish, then drag the circular control handle to shape the curve. Click elsewhere to finish.

2 · Draw style

ColorWidthStyle

3 · Pittsburgh Stars 16U AAA (2026–27)

19 verified players · 16 skaters and 3 goalies. Use Add Selected Player for one player, or Add All Players to place the full roster. Tap a roster entry to add that individual player directly.

Optional CSV headers: number,name,team,position,shoots. team may be home or away. Tap any numbered Add button below to place a player on the ice. Opponents can be added using the orange Away Team controls above.

4 · Save & reset

▶ Play Animator

1. Position players and puck. 2. Capture start. 3. Choose Skating Path and drag from a player along their route. 4. Play. For a puck pass, drag from the puck to its destination.

Assign skating route to Select from the dropdown OR tap a player on the rink. Then drag anywhere to add a route. Drag directly from an avatar to select it and draw in one gesture. Tap another player to switch focus.

Duration 6sPuck pass duration 0.5sSpeed Show routes Loop

Timeline 0.0s

Capture the starting positions to begin.

🔵 Home Team — Pittsburgh Stars players0 on ice

🟠 Away Team — add opponent players

No opponent roster needed: tap Generic Away Player for an A1, A2… marker. You can also enter a jersey number or add a six-player unit.

⚠ Controls are not initialized. Open this downloaded .html file in Safari or Chrome, not the ChatGPT file preview.

For easier drawing, rotate your phone sideways. Drag players using the Move tool; choose a drawing tool to annotate the ice.

Player SizeAuto · 100%

Home teamAway teamPuckGreen avatar border in roster = goalieSelect a player, then use Remove Selected Player. Double-click also removes.Esc deselect curve handle

All work stays in your browser. Export an image to share with the team, or save a JSON file to reopen and edit later.