Generate precise SVG squircles and superellipse shapes for iOS app icons. Adjust smoothness, curvature, and scale. Free, browser-based, and easy to export.
AI Generation Prompt
Technical Specification: Browser-Based SVG Squircle Shape Generator
Overview
This utility is a high-performance, client-side application designed to generate mathematically accurate superellipse (squircle) shapes. The application serves designers and developers who require precise vector paths for iOS-style icons or modern web UI elements.
Core Technical Constraints
- Architecture: Single-file HTML5/CSS3/Vanilla JS application.
- State Management: In-memory only. Absolutely no
localStorage,cookies, orIndexedDB. - Environment: Must function perfectly inside a sandboxed iframe with no origin.
- Aesthetic: Strictly clean, light-mode, SaaS-inspired UI (e.g., Apple-like clean design).
Feature Set
- Real-time Canvas Preview: A central drawing area rendering the squircle based on live parameter adjustments.
- Parameter Controls:
Corner Smoothness(Exponent slider: 2.0 to 5.0).Aspect Ratio(Lockable ratio toggle).Scale/Size(Live dimension control).
- Export Options:
Download SVG: Triggers a browser-native download of the shape as a .svg file.Copy Path Data: Copies the<path d="..." />string to the clipboard.CSS Output: Generates theclip-path: path(...)CSS rule for direct implementation.
UI/UX Design Specifications
- Layout:
- Header: Minimalist title and short "how to" instructions.
- Main Area: Split-pane design. Left side contains the control panel (sliders/inputs), right side contains the interactive SVG visualizer.
- Output Section: Collapsible container at the bottom showing the generated code snippets.
- Color Palette:
- Background:
#F9FAFB(Soft grey). - Primary:
#2563EB(Professional blue for actions). - Text:
#1F2937(Dark grey, high legibility). - Borders/Input:
#E5E7EB.
- Background:
- Micro-interactions:
- Use CSS
transition(ease-in-out, 0.2s) for all button hover states. - Smooth path deformation when moving sliders to simulate fluid vector manipulation.
- Success toast notification (custom, non-blocking) when copying to clipboard.
- Use CSS
Implementation Guidelines
- Vanilla JS Implementation: All calculations for the squircle path must be handled using the mathematical superellipse formula:
|x/a|^n + |y/b|^n = 1. - Responsiveness: Use Tailwind CSS (via CDN) for grid-based responsiveness. Ensure controls stack vertically on screens smaller than 768px.
- SVG Handling: Generate the SVG programmatically in the DOM. Ensure the viewBox is calculated dynamically based on the input dimensions.
- Accessibility: All sliders must have associated labels and
aria-labelattributes. Keyboard navigation (tab support) is mandatory for sliders.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a squircle and why is it used for app icons?
A squircle is a geometric shape that represents a hybrid between a square and a circle. It is mathematically defined as a special case of a superellipse, providing a much more organic and fluid transition at the corners compared to standard rounded rectangles. iOS app icons utilize this specific shape to create a consistent, modern visual language across the Apple ecosystem. By using a squircle, developers ensure that their app icons feel cohesive with system icons, offering a professional aesthetic that is visually pleasing to the human eye.
How do I export the squircle shape for use in design software?
This tool allows you to export your generated squircle in two primary formats: standard SVG code and raw path data. Simply click the 'Download SVG' button to save the vector file directly to your device, or use the 'Copy Path' feature to grab the specific path coordinates for use in tools like Figma, Sketch, or Adobe Illustrator. The exported SVG files are clean, production-ready, and optimized for web or mobile development. They are fully scalable, ensuring that your icons maintain high fidelity whether they are used for small interface elements or large promotional banners.
Can I use this tool to generate CSS code for web projects?
Yes, the tool includes a built-in generator for CSS clip-path properties. By adjusting the sliders to your preferred curvature and smoothness, you can generate a ready-to-copy snippet that applies the squircle shape to any HTML element using the `clip-path` CSS attribute. This is particularly useful for web developers looking to apply modern iOS-style masking to images, buttons, or containers without needing an external image asset. The generated code is lightweight, browser-compatible, and renders perfectly without affecting page load performance.
Do I need to save my work to a database or account?
No, this application is a completely client-side, ephemeral tool. We do not use cookies, local storage, or server-side databases to store your generated shapes or settings. Every time you refresh the page, the application resets to its initial state. Because of this architecture, your privacy is guaranteed as no data ever leaves your browser. You can generate, copy, and download as many shapes as you need during your session, and once you close the tab, the state is cleared automatically.
