G-code Visualizer
What's on screen:
Split-panel layout. Left: a 2D toolpath canvas showing every move as colored lines on a scaled XY grid with origin cross, axis labels, and a gold tool-head dot with crosshair that moves along the path.
Right: a syntax-highlighted code panel (dark theme, IDE-style) showing the G-code with line numbers, where G-codes are blue, coordinates are green, feed rates are orange, M-codes are pink, and comments are dimmed.
The active line is highlighted gold. Completed lines are faded. Click any line to jump the visualizer to that move.
Animation controls:
Play/Pause: Animates the tool head moving along each segment. The active segment draws progressively (the line grows from start to end). The code panel scrolls to keep the active line visible.
Step: Advances one move at a time. Perfect for studying each line individually. The info bar explains what the current G-code does.
Reset: Returns to line 1, tool at origin.
Show all: Instantly draws the complete toolpath. Good for seeing the overall shape before stepping through details.
Speed 0.5x / 1x / 3x: Controls animation speed.
Arc visualization details:
When a G02/G03 arc is the active move, the canvas draws:
The arc center as a faint green dot
A dashed radius line from center to tool position
The arc progressively growing during animation
For the Circle preset, one G02 command with I0 J30 draws a complete 360-degree circle. The parser handles the full-circle case (start point = end point) by adding a full 2pi sweep.
For the Profile preset, both R-word arcs (G02 X45 Y45 R10) and I,J arcs coexist, showing that both formats produce the same result.
Key experiments:
Load "Square pocket." Hit Play. Watch the red dashed G00 rapid move from origin to (10,10). Then four blue G01 cuts form the rectangle. Then another red rapid back to origin. The fundamental structure of every CNC program: rapid-cut-cut-rapid.
Load "Circle (arcs)." Step through. The G00 rapids to (30,0). Then one G02 command draws the entire circle. The arc center dot appears at (30,30) with a radius line spinning around. I0 J30 means "the center is 0mm right and 30mm up from where I am now."
Load "Profile contour." This has G01 straights, a 45-degree chamfer, a G03 CCW corner (R10), and a G02 CW corner (R10). Step through each move. Watch the tool trace a complex part outline with mixed line/arc segments. This is what real profile milling looks like.
Load "Bolt hole pattern." Six purple drill dots appear on a bolt circle. Step through and watch the tool rapid to each XY position, plunge Z (purple marker appears), retract Z, rapid to next position. The code shows the explicit plunge-retract that a G81 canned cycle would automate.
Load "Face milling." The zigzag raster pattern fills a rectangular area. Each pass is a G01 cut, each step-over is a short G01 perpendicular move. This is the standard strategy for facing a flat surface with an end mill.
On any preset, click different lines in the code panel. The toolpath highlights jump to that move, and the info bar explains the G-code on that line. This builds the ability to read G-code and visualize the motion simultaneously.