A self-contained DevOps lifecycle infinity-loop SVG generator. One HTML file, no build step, no runtime dependencies beyond a Google Fonts stylesheet loaded from CDN.
- Editable phase list with per-phase tool annotations; phases distribute by arc length around the entire path, so crossover bars carry phase colours and dividers can land anywhere — including across the central X.
- Four bar-ending styles: pointed (chevron interlock), round, arrow, flat.
- Eight colour palettes; dark mode is an independent toggle and works with every palette.
- Sliders for canvas width/height, ribbon thickness, chevron size, weave depth, and font sizes (title, subtitle, phase label, tool text).
- Optional background watermark with size, opacity, and X/Y position controls.
- Live preview with an explicit update button as fallback.
- Export to SVG, PNG, or JPG at the configured canvas dimensions.
- Reset button restores style settings to defaults; phase content is kept.
Visit the live demo, edit phases and styling in the left panel, export from the header.
To run locally:
git clone https://github.com/Mohl/loop-studio.git
cd loop-studio
xdg-open index.html # or: open / start, depending on platformNo install, no build — the entire app is one HTML file with inlined CSS and JavaScript.
The diagram is built around an arc-length-parameterised infinity path made of two circular lobes joined by two straight crossover bars. With N phases, the generator divides the total path length into N equal slices and emits one polygon per slice by sampling outer and inner offsets along the centreline. Phase boundaries are stamped with the chosen ending style (chevron, quadratic curve, flat radial cut, or flat plus arrowhead overlay).
The crossover bars use perpendicular cross-sections rather than each lobe's radial outer/inner — necessary for constant ribbon width across the centre crossing (radial cross-sections collapse to zero width at the canvas centre and produce a bow-tie artefact).
The whole generator is ~170 lines of pure JavaScript with no DOM
dependencies, embedded alongside a thin UI controller in index.html.
MIT.