Interactive single-page tool for designing and exporting a "Level-Up Circle" — a visual map of interconnected goals, projects, or focus areas that reinforce each other through synergy and compounding growth. Built as a self-contained HTML Canvas app with minimal external dependencies.
Try it now: https://chiefinnovator.github.io/levelupcircle/levelup-circle-generator.html
- Up to 36 labeled points arranged radially around a central circle
- Smart color generation (equal or golden-angle spacing) for vivid, distinct colors
- Dark and light theme support with theme-aware preview background
- Independent neon glow effects for title, points, labels, circle, and connections
- Automatic multi-line smart label wrapping with semantic split points
- Adjustable point size, label offset spacing, label font size, and title font size
- Complete connection mesh toggle (show/hide lines between all points)
- High-resolution PNG export (1080, 2048, 3840 square)
- Deep linking with compressed URL state sharing (lz-string)
- Fullscreen mode for presentations and embedding
- Social sharing buttons (Copy Link, Twitter/X, Facebook)
- Ask ChatGPT for personalized strategic advice on your focus areas
- Auto-save to
localStorageon every change - Responsive resizing with
ResizeObserver - Mobile-friendly with collapsible controls panel and scroll indicator
- Toast notification system for user feedback
- XSS-safe label rendering with HTML entity escaping
- Open
levelup-circle-generator.htmlin any modern browser (Chrome, Edge, Safari, Firefox). No build step required. - Adjust the controls in the left panel — title, theme, number of points, glow effects, etc.
- Edit point labels and colors directly in the point list.
- Click Export PNG to download a high-resolution image.
- Use the share buttons to copy a link or share to social media.
| Control | Description |
|---|---|
| Title | Text displayed at top of the circle (glow optional) |
| Theme | Dark (black) or Light (white) background |
| Control | Range | Description |
|---|---|---|
| Number of Points | 1–36 | Nodes arranged around the circle |
| Export Size | 1080 / 2048 / 3840 | Output canvas dimension (square, in pixels) |
| Point Size | 1–60 | Radius of each goal node |
| Label Spacing | 0–100 | Distance of labels from point edge |
| Label Font Size | 8–32 | Size of point label text |
| Title Font Size | 16–48 | Size of title text |
| Control | Description |
|---|---|
| Neon Glow Title | Toggle glow for title text |
| Neon Glow Points | Toggle glow for point dots |
| Neon Glow Labels | Toggle glow for label text |
| Neon Glow Circle | Toggle glow for the outer ring |
| Neon Glow Connections | Toggle glow for connection lines |
| Show Connection Lines | Toggle full interconnection mesh |
| Button | Description |
|---|---|
| Random Colors | Re-generate colors (alternates spacing mode) |
| Load Example | Reset to seeded demo state |
| Save State | Persist configuration to localStorage with confirmation |
| Clear State | Clear saved state and reload example |
| Redraw | Force redraw the canvas |
| Export PNG | Generate and download image |
| Button | Description |
|---|---|
| Copy Link | Copy shareable URL to clipboard (includes fullscreen state) |
| Twitter/X | Share to Twitter/X with pre-filled text |
| Share to Facebook | |
| ChatGPT | Ask ChatGPT for strategic advice on your focus areas |
| Fullscreen | Toggle fullscreen presentation mode (hides controls) |
- Copy Share Link: Copies a URL containing your entire circle configuration. Recipients see your exact circle.
- Fullscreen Mode: Toggle fullscreen to hide controls and show only the circle. Share links preserve this mode with
&fs=1. - Twitter/X & Facebook: Share directly to social platforms (requires deployed URL, not localhost).
- Ask ChatGPT: Opens a new browser tab with a personalized strategy prompt based on your circle's title and focus areas.
URLs use lz-string compression for compact sharing. Legacy URL format is supported for backwards compatibility.
levelupcircle/
├── levelup-circle-generator.html # Main application (single-file app)
├── index.html # Redirect page to main app
├── README.md # This file
├── level_up_circle_blog.md # Philosophy article on synergy mapping
├── preview.png # Open Graph / social media preview image
├── docs/
│ ├── architecture.md # Technical architecture & rendering pipeline
│ ├── features.md # Complete feature specifications
│ ├── url-sharing-spec.md # URL sharing & deep linking specification
│ ├── state-management.md # State schema & persistence details
│ ├── ask-chatgpt-feature.md # ChatGPT integration documentation
│ └── roadmap.md # UI enhancement plan & roadmap
├── Rich/ # Reference example images
│ ├── level-up-circle-3840x3840 no lines.jpg
│ ├── level-up-circle-3840x3840 no lines.png
│ ├── level-up-circle-3840x3840 w lines.jpg
│ └── level-up-circle-3840x3840 w lines.png
└── .gitignore
| Dependency | Version | Purpose |
|---|---|---|
| lz-string | 1.5.0 (CDN) | URL compression for deep linking |
No build tools, package managers, or frameworks required. Works standalone in any modern browser.
Detailed specifications are in the docs/ folder:
- Architecture — Technical overview, rendering pipeline, and code organization
- Features — Complete feature specifications and behavior details
- URL Sharing — Deep linking format, compression, and legacy support
- State Management — State schema, localStorage persistence, auto-save
- Ask ChatGPT — ChatGPT integration and prompt template
- Roadmap — Planned enhancements and completion status
See level_up_circle_blog.md for the philosophy behind interconnected goal design. The Level-Up Circle represents a shift from isolated goal-setting to synergistic systems thinking, inspired by flywheel diagrams (Disney, Amazon) and goal compounding principles.
Modern browsers supporting HTML5 Canvas, localStorage, and ResizeObserver:
- Chrome / Edge (Chromium)
- Safari
- Firefox
No license is granted. All rights reserved. The source code, images, article content, and generated outputs may not be copied, modified, redistributed, published, or used (commercially or non-commercially) without the explicit prior written permission of the author.
Permitted use: You may view and run the HTML locally for personal evaluation only. Any other usage requires written authorization.
Copyright © 2025 Richard Crane. All Rights Reserved.