artofpilgrim/dials

Dials is a browser-based tool for creating dial and gauge graphics, the kind you see on speedometers, pressure gauges, or dashboard indicators. You pick a shape (straight line, semi-circle, partial arc, or full circle), set your number range and tick spacing, choose colors, and then download the result as a vector SVG file or a PNG at several resolutions. There is no software to install and no account required, the tool runs entirely in your browser. The configuration options go deeper than most simple graphic tools. You can define up to six color zones across the dial face, such as a red band for danger and a green band for safe, and position them inside or outside the rim. Typography controls let you pick fonts, including several Google Fonts loaded on demand, set a unit suffix like "mph" or "%", and replace individual tick numbers with custom labels. Each change updates the preview in real time. Sharing a specific dial configuration is built in. Every setting you choose gets encoded into the URL in your browser's address bar, so copying and pasting the link gives anyone else the exact same dial. A dedicated button writes that link to your clipboard. The tool also saves presets locally in your browser so you can return to saved configurations without bookmarking a long URL. Exporting is flexible. SVG gives you a vector file you can open in design tools like Figma or Illustrator. PNG exports at up to four times the canvas size, with an option to produce a transparent background for compositing into other designs. There is also an option to convert text to outlines on export, which means the font does not need to be installed on the recipient's machine to render correctly. The project is built with React and Vite. Pushing to the main branch automatically builds and publishes the latest version to GitHub Pages, where the live version is hosted. The SVG renderer does not depend on any external drawing library.