A working Stargate you can operate in a browser.
In Stargate the device is a standing ring carved with symbols. You dial a destination by turning the ring until each symbol in turn lines up under a fixed chevron at the top, which locks; when the whole address is locked the gate opens onto a shimmering event horizon, and an armoured iris can be closed over it to block anything coming through.
This project is that machine as a web page. Pick eight symbols from the keypad and the ring turns to each one in order, locks a chevron, and lights the symbol blue on both the ring and the pad. With all eight locked, RUN opens the gate. IRIS closes twenty-four blades over it. CLS spins the ring down and releases the address.
The symbols are not the ones from the show. They are a 64-symbol alphabet I designed — each one a 5 × 5 arrangement of 2 × 2 blocks — and an address is eight of them rather than the show's seven-of-thirty-nine. The ring had to be redivided into 64 cells to hold them.
It is built with no framework, no build step and no runtime dependencies: one HTML file, one
stylesheet, and about 500 lines of hand-written JavaScript. Every animation is
SMIL —
<animateTransform> elements constructed in JavaScript and triggered with beginElement().
That was the point of the exercise: to find out how far SVG could be pushed with no canvas and
no game engine.
| Button | What it does |
|---|---|
| any symbol | Adds it to the address. Click a symbol again to remove it — but only if the ring has not locked it in yet. |
| AUTO | On by default. The ring chases your selections as you make them. |
| RUN | With all eight symbols locked, opens the gate. With an incomplete address, blinks red once for every symbol still missing. |
| IRIS | Closes or opens the 24-blade iris over the event horizon. |
| CLS | Spins the ring down and releases the address. While the gate is open it arms a clear instead, which fires when the gate closes. |
| BTN ×4 | Disabled placeholders. These are becoming the manual dial — see the roadmap. |
 |
 |
| Mid-dial — locked symbols turn blue on both the ring and the keypad | The iris closed |
Active, and being developed. The core works and has always worked: it loads with no console errors and no failed requests, and every control does what it says.
What it does not yet have is a point. There is no destination, nothing on the other side of the gate, and every address behaves identically. Giving it one is v0.5.
- ROADMAP.md — what is planned, in order. Next up is v0.2: fixing the measured defects below.
- KNOWNISSUES.md — ten issues, each reproduced and measured rather than guessed at, with the numbers and the intended fix.
The headline ones: the CLS red flash is computed and never actually painted (332 red/black
pairs in one clear, none surviving a single animation frame); that same routine issues 17,472
setAttribute calls to release eight symbols; and turning AUTO off is a one-way trap that
freezes the dial with no manual control to recover with. All three are small fixes and all three
are scheduled.
Written over eight days in April 2021, in six commits. Picked up again in 2026 with a tidy pass
that changed no behaviour — dead code and a committed copy of jQuery that nothing imported
removed, 65 stray <?xml?> declarations and 68 duplicate element ids cleaned out of the
markup, spelling fixed in the JavaScript API (adress → address, Dephragm → diaphragm),
and the position: absolute; left: 500px layout replaced with flexbox, which took a 390 px
phone from 512 px of horizontal overflow to 0. The 2021 state is tagged v0.1-original.
No build step and no dependencies. Any static server will do:
git clone https://github.com/Dimitriuses/Stargate.git
cd Stargate
python -m http.server 8000 # or: npx http-server -p 8000Then open http://localhost:8000/. Double-clicking index.html works too — the symbol images
are same-directory relative paths, so they load under file:// as well (checked in Chromium:
0 failed requests).
Because the interesting behaviour is animation timing, changes are checked against a scripted
ten-checkpoint session — dial a full eight-symbol address, open the gate, close and reopen the
iris, close the gate, clear the address, then dial and deselect — which dumps the model state,
the ring angle, the chevron classes, the address slots and the fill colour of all 64 ring
symbols and all 64 keypad symbols at each checkpoint. SMIL uses fill="freeze", so snapshots
taken at settled moments are deterministic.
Run it three times against an unchanged build first, to prove the harness is self-consistent,
then against the commit you are comparing to. The 2026 tidy scored 10 / 10 checkpoints
byte-identical against v0.1-original, and 10 / 10 again for the assembled Pages site served
from a /Stargate/ sub-path.
This is not a substitute for unit tests, which the project does not yet have — see #10.
The 64-symbol alphabet is mine (art/synvols.ai), and so is the 24-blade iris
(art/Diaphragm.ai).
The gate ring is not. It is a hand redraw of a Wikimedia Commons file by Max Willis and User:M.A.D.company, licensed CC BY-SA 3.0. None of the upstream path data survives here — a rotation-aligned raster comparison of the two ring chassis scores an IoU of 0.211 where a re-export would score about 0.95 — but it is recognisably the same design, so it is credited as a derivative and the artwork carries the upstream licence. The full measurement is in ATTRIBUTION.md.
index.html the page: gate, iris and 64-key pad, all inline SVG
index.js dialing logic and every SMIL animation, built in JS
index.css layout
favicon.svg
glyphs/S1..S64.svg the alphabet, one file per symbol, shown in the address strip
art/synvols.ai Illustrator source for the alphabet (mine)
art/Diaphragm.ai Illustrator source for the 24-blade iris (mine)
art/StarGate2.ai Illustrator source for the ring redraw (derivative)
art/gate-ring.svg the ring as exported; index.html inlines a copy of it
docs/ screenshots
Issues and pull requests are welcome, particularly against anything in KNOWNISSUES.md — each entry says how to reproduce it and what the fix looks like. If you change dialing behaviour, please say what the regression harness reported.
Code — MIT. Gate ring artwork — CC BY-SA 3.0, derived from work by Max Willis and User:M.A.D.company. Stargate is a trademark of Metro-Goldwyn-Mayer; this is a non-commercial fan project with no affiliation to the rights holder.