Logo Sculptor (logo-to-3d-art-generator)
Live: https://theguysaccount.github.io/logo-to-3d-art-generator/ · Screens: desktop and phone
Turn a flat logo into 3D art in your browser. You upload an SVG, PNG, JPG or WebP, and the page traces the outline, extrudes and bevels it, and renders it in one of six looks:
- chrome
- gold
- marble
- glass
- neon
- your own colours as glossy layers
It exports four kinds of file:
- a seamless 3, 5 or 8 second MP4 loop (1:1, 9:16 or 16:9);
- a 2048-pixel PNG, transparent if you like;
- a GLB model;
- an STL for 3D printing.
Nothing is uploaded and there is no server. A Content Security Policy on every page stops the page from connecting to any other site.
How it works
| Step | Where | Notes |
|---|
| Rasterize | site/assets/js/app.js | The logo is drawn at up to 1400 px (SVGs always at 1400). Text, strokes and gradients come out as they look. |
| Trace | site/assets/js/vectorize.js | Background from transparency or the border colour; logo mask; marching squares on a soft field (sub-pixel outlines); Ramer–Douglas–Peucker; speck filter; nesting (holes, islands in holes); k-means colour layers |
| 3D | site/assets/js/scene.js | three.js ExtrudeGeometry with an inward bevel sized from the stroke width, creased normals. Studio environment for metals, refraction for glass, tubes plus bloom for neon, a procedural marble texture, and a shadow-catching backdrop. |
| Motion | site/assets/js/motion.js | Sway, spin, float or still, all periodic in the loop length (tested), so loops have no seam |
| Encode | site/assets/js/encoder.js | WebCodecs into MP4 (H.264) via mp4-muxer; VP9/WebM if H.264 isn't available; MediaRecorder as a fallback |
| Files | scene.js | PNG at 2048 px; GLB through GLTFExporter; binary STL, 60 mm along the longest side, checked to be a closed solid |
Pages are generated by scripts/build.mjs from site/pages/*.html (landing pages around the tool) and content/guides/*.md (guides, published on their publish: date).
Run it locally
Node 20 or newer. No keys.
npm ci
node scripts/build.mjs # → dist/ (BASE_URL defaults to http://127.0.0.1:4318)
node scripts/serve.mjs dist 4318 # open http://127.0.0.1:4318/
Test
npm test # tracing (discs, rings, islands, saddles, colour layers, alpha, noise), seamless motions, pages, links
node scripts/selftest.mjs # headless Chrome on the built site: pages, all six styles, video, PNG, GLB, STL (closed, 60 mm), upload with rights check
node scripts/selftest.mjs --url https://theguysaccount.github.io/logo-to-3d-art-generator/
node scripts/screens.mjs # screenshots → docs/screens/
node scripts/demos.mjs # re-render the per-style demo loops with the real tool (after a look changes)
node scripts/og.mjs # share card from the demo posters
Deploy
Every push to main runs .github/workflows/pages.yml. It runs the tests, builds, runs the headless end-to-end test, and deploys to GitHub Pages only if everything passed. It then submits the pages to IndexNow. It also runs every Monday to publish guides whose date has come. See OPERATIONS.md for every automated job, how each fails safe, and the optional keys.
Licence
Code and sample logos (original designs): MIT (LICENSE). Vendored three.js and muxers keep their MIT licences (NOTICE). Logos people upload stay theirs and never leave their device. The tool asks them to confirm they have the right to use a logo before it works on it.
