Micro Designer
Micro Designer builds small technical graphics: HUD reticles, serial numbers, barcodes, data readouts, registration marks and similar details for posters, packaging and social posts. You place elements from a library on a board, style and animate them, then export SVG, PNG or a video loop, or copy the SVG to Figma.
Open it from the Pixel Studio home page, or go to pixelstudio.oddomens.com/micro-graphics/.
WARNING
Micro Designer doesn't save your work, and it has no undo. Reloading the page clears the board. Export before you leave.
The workspace
- Left panel: six tabs along the top. Add, Layers, Animation, Colors, Presets and Canvas.
- Center: the board. The bar below it has the export buttons and shows the selected layer, the board size and the number of layers.
- Right panel, PROPERTIES & OUTPUT: the 1. ELEMENT INSPECTOR for the selected element.
The board starts at 800 × 800 pixels with a near-black background.
Add elements
Open the Add tab. Elements are grouped into five categories. Click an element to place it in the center of the board.
| Category | Elements |
|---|---|
| Typography | Text Label, Serial Number, Asset ID, Roman Numeral, Year Stamp, Version Tag |
| Geometric | Crosshair, Corner Brackets, Dashed Frame, Grid Dots, Scan Line, Circle Target |
| Symbols | Arc Gauge, Progress Bar, Abstract Logo, Circle Stack Logo, Trident Logo, Grid Logo, Warning Icon, Info Icon |
| Data | Barcode, QR Block, Coordinates |
| Decorative | Pill Badge, Divider Line, Noise Field |
The QR Block is a decorative pattern, not a scannable QR code.
Use your own SVG
Click Upload SVG at the top of the Add tab and pick an .svg file. It's added to the board as a layer you can move, scale and rotate like any other element. Fill and stroke colors apply to the parts of the SVG that don't set their own colors.
Move and select
- Click an element to select it. Click an empty part of the board to deselect.
- Drag an element to move it. It snaps to the center lines of the board when you get close. With Alignment Guides on, it also snaps to a 20-pixel grid. Pink lines show when it's snapped.
Element Inspector
Select an element to edit it in the right panel.
| Section | Controls |
|---|---|
| Header | The layer name (click to rename), its type, and buttons to duplicate or delete it. |
| Transform | X and Y position, Rot ° rotation and Scale (0.1–10). |
| Appearance | Fill and Stroke colors, Stroke W (0–10), Animation, and Opacity. |
| Typography | For text elements: Font Family (Inter, Space Mono, Georgia, Times New Roman, Courier New, Arial, Helvetica or System UI), Size (4–400), Spacing, Case (ABC, abc or None) and Redact Content, which covers the text with a black bar. |
| Properties | Settings specific to the element, such as its text, size, counts or values. |
Layers
The Layers tab lists every element, top layer first. Hover over a layer to show its buttons:
| Button | What it does |
|---|---|
| Eye | Hides or shows the layer. Hidden layers aren't exported. |
| Lock | Locks the layer so you can't select or move it on the board. |
| + | Duplicates the layer. |
| Trash | Deletes the layer. |
Click a layer to select it.
Animation
Each element can have one animation. Select an element, open the Animation tab and click a style, or choose one under Animation in the inspector.
| For | Animations |
|---|---|
| All elements | Static, Blink, Pulse, Flicker, Glitch, Fade In, Float, Shake, Wiggle, Bounce, Zoom In, Zoom Out, Flip |
| Text elements | Also Typewriter and Marquee |
| Progress Bar | Also Progress Fill |
| Shapes and symbols | Also Spin CW, Spin CCW, Spin 3D, Swing, Rubber Band, Tada, Heartbeat, Dash Flow, Sonar Ping, Radar Scan |
Auto-Animate Canvas gives every element a suitable animation in one click. For example, text gets Typewriter, crosshairs get Radar Scan and logos get Spin 3D.
Colors
The Colors tab has two parts:
- Global Themes: 22 color themes, such as Specimen White, Amber Terminal, Matrix Hacker, Cyberpunk Neon and Military Spec. Clicking one sets the board color and recolors every element's fill and stroke.
- Layer Colors: the fill (F) and stroke (S) color of each layer, so you can adjust them without selecting each one.
Presets
The Presets tab has 100 ready-made layouts in five families: HUD Reticle, Technical Blueprint, Specimen Registry, Editorial Layout and Data Stream Monitoring. Use the search box to filter them. Each shows a short description and its number of components.
Clicking a layout replaces everything on the board. Layouts are responsive, so elements pinned to corners and edges stay in place at any board size.
Canvas
| Section | Controls |
|---|---|
| 1. CANVAS PRESETS | 1080x1080 (Square), 1080x1350 (Portrait), 1080x1920 (Story) and 1920x1080 (Landscape). |
| 2. CANVAS PROPERTIES | WIDTH (PX) and HEIGHT (PX), Board Color, Video Export Length (Secs) (1–60, default 3) and Alignment Guides. |
| 4. GENERAL ACTIONS | Randomize Composition fills the board with 4 to 14 random elements. Clear Canvas Board removes every element, without asking first. |
With Alignment Guides on, the board shows faint center lines and a dashed margin 60 pixels in from each edge.
Export
Use the buttons in the bar below the board:
| Button | What you get |
|---|---|
| SVG | micro-graphic.svg. Animations are kept in the file. |
| PNG | micro-graphic.png at the board size. |
| To Figma | Copies the SVG code to your clipboard. Paste it into Figma to get editable vector layers. |
| WebM Loop | micro-graphic-loop.webm, recorded for the Video Export Length. |
| MP4 Loop | An MP4 recorded for the Video Export Length. If your browser can't record MP4, you get a WebM file instead. |
Video exports are recorded in real time, so they take as long as the length you set.
TIP
Alignment guides and the blue marker on the selected element are drawn on the board, so they're included in exports. Turn off Alignment Guides and click an empty part of the board before you export.