https://github.com/dashpilot/flash-like-vector-drawing
Recreating the wonderful Adobe Flash/Animate vector drawing tools for the web
https://github.com/dashpilot/flash-like-vector-drawing
Last synced: 26 days ago
JSON representation
Recreating the wonderful Adobe Flash/Animate vector drawing tools for the web
- Host: GitHub
- URL: https://github.com/dashpilot/flash-like-vector-drawing
- Owner: dashpilot
- Created: 2026-02-16T00:55:22.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-16T01:04:46.000Z (5 months ago)
- Last Synced: 2026-02-16T08:47:00.928Z (5 months ago)
- Language: JavaScript
- Homepage: https://flash-like-vector-drawing.vercel.app/
- Size: 17.6 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flash-like Vector Drawing App
Adobe Flash/Animate had some of the best vector drawing tools ever made. When Adobe announced plans to kill Animate entirely (later reversed), these tools nearly vanished forever. So I rebuilt them for the web—a small passion project to preserve what made Flash's creative tools so special.
Draw with the Line (N), Rectangle (R), or Oval (O) tools—hold Shift for square or circle. Select and edit with the Selection tool (V), or fill shapes with the Paint Bucket (B). Lines that cross automatically split. Export to SVG when done.
**[Try it live →](https://flash-like-vector-drawing.vercel.app/)**
## Features
### Tools
- **Selection (V)** — Select, move, reshape segments
- **Line (N)** — Draw vector lines
- **Paint Bucket (B)** — Fill closed shapes with color
### Line Tool (N)
- **Drag only** — you must press and hold the mouse button to draw; each drag creates one segment
- **Shift held during drag** — constrains to straight lines or 45° angles (0°, 45°, 90°, etc.)
- Each segment is created only while the mouse button is held (no click-to-place)
### Selection Tool (V)
- **Click** on a segment to select it (blue dashed highlight)
- **Shift + click** — add or remove segments from selection (multi-select)
- **Drag on empty space** — marquee selection; draws a rectangle and selects all segments within it (blue semi-transparent fill)
- **Drag near an endpoint** (within 10px) — move only that point of the line
- **Drag on segment body** — pull/reshape the curve; straight lines become curves
- **Drag on shared vertex** (where two+ lines meet) — moves that point for all connected segments
- **Command-Z** (Ctrl-Z) — undo | **Command-Shift-Z** — redo | **Command-D** (Ctrl-D) — duplicate
- **Properties panel** — Right side: stroke width, stroke color (swatches), paint bucket fill color
### Rectangle (R) and Oval (O)
- **Shift during drag** — Rectangle becomes a square; Oval becomes a perfect circle
### Line as Knife
- When a line crosses another line, rectangle, or oval, both are split at the intersection
- All resulting pieces become individually selectable segments (works with curves in ovals too)
### Keyboard Shortcuts
- **V** — Selection tool
- **N** — Line tool
- **Command-D** (Ctrl-D) — Duplicate selected segments or fills
- **Delete / Backspace** — Delete selected segment(s)
## Run locally
Open `index.html` in a browser, or use a local server:
```bash
npx serve
```
Then visit http://localhost:3000 (serve will automatically install if needed)
## Press the :star: button
Don't forget to press the :star: button to let me know I should continue improving this project.