SVG Star Generator

How to use

1. 1Pick a preset (Classic 5-point, Rounded rating, 6-point Star, Sheriff badge, Sparkle, Sunburst) for a one-click look, or skip presets and tune the sliders.
2. 2Set the number of points (3 to 30) and the inner-to-outer ratio. A low ratio gives narrow sharp points; a high ratio gives wide chunky points.
3. 3Slide Corner rounding up to soften the corners into a rounded-point star, or leave it at zero for crisp geometric points.
4. 4Choose a fill mode (solid, gradient, or none), set fill and gradient colors, pick a stroke width and color, and pick a background color or transparency.
5. 5Copy the SVG markup, CSS background, CSS clip-path, path d attribute, Tailwind class, or data URI from the export panel, or download a .svg or .png at the export size you set.

About this tool

SVG Star Generator draws a parameterized N-pointed star as a closed SVG path that scales to any size. Each star is built from 2N vertices alternating between an outer radius and an inner radius around a shared center; the inner-to-outer ratio controls how pointy or chunky the star looks (a low ratio gives narrow sharp spikes, a high ratio gives wide stubby points that fill more of the bounding box). The Points slider runs from 3 to 30 so you can draw anything from a tiny three-point caltrop to a dense sunburst, the Rotation slider spins the whole shape, and a Corner rounding slider replaces every polygon corner with a quadratic Bezier fillet, capped at half the shorter adjacent edge so neighbouring fillets never overlap. Fill the star with a solid color, a two-color linear gradient at any angle, or no fill (handy when you only want an outline). Add an optional stroke with adjustable width and color (linejoin and linecap are set to round so chunky borders look intentional), set the background to a color or full transparency, and export at any pixel size from 64 to 2048. Presets cover the most-searched looks: a classic five-point star, a soft rounded rating star, a Star of David six-point hexagram, a chunky sheriff badge with a thick outline, a sharp four-point sparkle, and a twelve-point sunburst. The export panel produces ready-to-paste SVG markup with a 500x500 viewBox, a CSS background-image block with a URL-encoded data URI, a CSS clip-path string that masks any element into the star shape, the raw SVG path d attribute for animation libraries like GreenSock and Framer Motion, a Tailwind arbitrary-value background-image class, a downloadable .svg file for vector editors and Figma, and a rasterized .png that preserves background transparency. Useful for rating widgets, review badges, sticker-style icons, decorative section dividers, app icons, social-share thumbnails, and any UI that needs a clean geometric star without dragging a vector editor into the workflow. All math, rendering, and PNG rasterization run in your browser using native SVG, the Canvas API, and plain trigonometry, so the shapes you generate are never uploaded.

Free to use. Works in your browser. No signup, no login.