Gpx fit overlay tool · HTML Copy GPX / FIT Overlay Tool

GPX / FIT Overlay Tool

Speedometer · Route SVG · Dot SPL · Elevation SVG · Elevation SPL

📂
Drop your GPX or FIT file here
or click to browse · .gpx and .fit supported
Video & GPS settings
GPS offset = video timecode in seconds at the moment you pressed start on your watch. Negative if watch started before the camera.

Clock drift factor = corrects the GPS clock running at a slightly different rate than the camera clock. Even a 0.1% difference causes ~6 seconds of drift over 10 minutes — this is the most common cause of sync that's perfect at the start but gets progressively worse.

To calibrate: find a second sync event late in the clip. Note its video timecode and GPS elapsed time, then use the ⏱ Sync Helper button to calculate both values automatically, or use:
factor = (videoTimecode − offset) ÷ gpsElapsed
Example: second sync at video 9:04 (544s), GPS elapsed 9:10 (550s), offset = 5s → factor = (544 − 5) ÷ 550 = 0.9800
Route SVG style
Auto-sizes to fill 1920×1080 based on your GPS track's aspect ratio.
Elevation SVG style
Download outputs
How to use ▾
① Load your file
Drop a .fit (COROS, Garmin, Wahoo, etc.) or .gpx file onto the drop zone. Everything is processed entirely in your browser — nothing is uploaded anywhere. Once loaded you'll see your point count, duration, total distance, and peak speed, plus a route preview, speedometer preview, speed curve, and elevation profile (if your file contains elevation data).

② Configure your settings
• Frame Rate — Match this exactly to your video's frame rate. Even a small mismatch (e.g. 30 instead of 29.97) will cause drift over a long clip.
• Speed Unit — Sets both the stats display and the unit label on the speedometer gauge.
• Smoothing — Averages the speed curve over a rolling window to reduce GPS noise. 3–5 is a good starting point.
• GPS Offset — The video timecode in seconds at the moment you pressed start on your watch. Scrub your footage to find the exact frame where the watch transitions from the pre-activity screen to recording — that timecode is your offset. Use a negative value if you started your watch before you hit record on the camera. Use the ⏱ Sync Helper to calculate this automatically.
• Clock Drift Factor — If the first sync point looks correct but things drift progressively later in the clip, the GPS clock and camera clock are running at slightly different rates. Use the ⏱ Sync Helper with a second sync event to calculate the drift factor automatically.
• Max Gauge Speed — Auto-filled from your GPS peak speed rounded up to the nearest 0.5.
• Track / Elevation style settings — Adjust track width, dot radius, shadow width, shadow offset, and colors. Each card has a ↺ Reset button to restore defaults.

③ Note your duration
Before downloading, hover over the Duration stat and click copy to copy the timecode (HH:MM:SS:FF). You will need this when creating your Fusion compositions in DaVinci Resolve.

④ Speedometer — DaVinci Resolve setup
Step 1 — Create the Fusion composition: In DaVinci Resolve, go to the Edit tab. In the Media Pool, right-click and select New Fusion Composition. Paste the duration you copied from the tool, select your video's frame rate, and click Create. Drag it onto your timeline. Right-click it and select Open in Fusion Page.

Step 2 — Import the .setting file: If you can't see your nodes, go to the top menu and click Nodes. Find the Speed_Overlay.setting file you downloaded and drag and drop it directly into the Fusion node graph. Connect the gray output box on the SpeedOverlay group to your MediaOut node.

Step 3 — Animate the speedometer: Double-click the SpeedOverlay group, then double-click the CurrentSpeed node. In the Inspector (top-right — if hidden, click the wrench/brush tab), go to Controls → ActiveSpeed slider. Right-click ActiveSpeed and select Animate. Open the Spline editor, select ActiveSpeed in the list, right-click the line and select Import Spline. Navigate to active_speed.spl and select it. Click Zoom to Fit to confirm. Your speedometer is now animated.

⑤ Route & Elevation SVG — DaVinci Resolve setup
The route SVG and elevation SVG follow the exact same steps.

Step 1 — Create the Fusion composition: In the Media Pool, right-click → New Fusion Composition with the same duration and frame rate. Drag to timeline, right-click → Open in Fusion Page.

Step 2 — Import the SVG: At the very top of Fusion, go to File → Import → SVG. Select your route.svg or elevation.svg. Keep the default image size. Double-click the node group that appears and connect its output to MediaOut.

Step 3 — Publish MainPath: Double-click the MainPath node. At the bottom of the Inspector, right-click "Right-click here for shape animation" and select Publish.

Step 4 — Animate MainDot: Double-click MainDot. In the Inspector, right-click Center → Animate. Go to the Modifiers tab, right-click "Right-click here for shape animation" → Connect To → MainPath → Polyline Value. The dot snaps to the start of the path.

Step 5 — Link OutlineDot: Double-click OutlineDot. Right-click Center → Expression. Clear the box and type exactly: MainDot.Center (case-sensitive). This makes the shadow dot follow the main dot.

Step 6 — Import the SPL: Open the Spline editor. Select the MainDot Center spline, right-click the line → Import Spline. Select route_dot.spl or elevation_progress.spl. Click Zoom to Fit. Your dot now animates along the path.

⑥ Tips
• All outputs share the same GPS offset and drift factor — everything stays in sync automatically.
• If your GPS file has no embedded speed data, speed is derived from position deltas — smoothing helps reduce noise.
• Re-download any output after changing settings — everything regenerates live.
• Use ⬇ Download All Files to grab everything in one click.
• Use ⏱ Sync Helper to calculate offset and drift factor without doing the math manually.