Click to place anchors, drag Bézier handles on a 500×500 canvas, and instantly get the SVG path d attribute and a CSS clip-path: path() rule. Includes heart and star presets.
In Add Point mode, click the canvas to add an anchor; new points are curves (C) by default. Drag the green clover anchors to move nodes and the blue handles to bend the Bézier curves. In Delete Point mode, click an anchor to remove it. Copy the d attribute or clip-path code when you are done; everything runs in your browser.
Click to place anchors, drag Bézier handles on a 500×500 canvas, and instantly get the SVG path d attribute and a CSS clip-path: path() rule. Includes heart and star presets. Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
An SVG path element describes its shape with a d attribute such as "M 100 100 C 150 50 …", and writing those coordinates and Bézier control points by hand is easy to get wrong. This editor gives you a 500 × 500 canvas where you build the path by clicking and dragging, while the panel on the right instantly produces the matching SVG d code and a CSS clip-path: path() rule. Use it for icons, logo sketches, irregular image cut-outs, or simply to learn how SVG path commands actually work.
In Add Point mode, click the canvas to place an anchor. The first point is the start (M), and every point after it is a curve node (C) by default, with two blue control handles. Switch to Select/Edit mode to drag the green clover anchors and move nodes, or drag the handles to change the direction and depth of each curve. With a node selected, Node Type lets you turn it into a Corner (L) or Curve (C) node. In Delete Point mode, one click on an anchor removes it. The canvas works with a mouse, a trackpad or a touchscreen.
Turn on Snap to Grid and anchors lock to a 20-pixel grid, which makes symmetrical or tidy shapes much easier; the grid background can be shown or hidden at any time. Close Path (Z) connects the last point back to the first, creating a closed shape that can be filled. If you would rather not start from scratch, load the heart, star, drop or Alpa head template and adjust it. All coordinates are rounded to whole numbers, so the generated code stays short and ready to paste.
The d attribute uses a coordinate system from 0 to 500, so pair it with viewBox="0 0 500 500" in your SVG and the shape will scale with the SVG. CSS clip-path: path() works differently: its coordinates are in pixels and do not scale with the element, so it fits best on a 500 × 500 pixel element. For responsive clipping, use an SVG clipPath with clipPathUnits or scale the element with a transform. Everything runs in your browser and nothing is uploaded.
M (moveto) moves the pen to a starting point. L (lineto) draws a straight line to the given coordinates. C (curveto) draws a cubic Bézier curve: the first two coordinate pairs are control points and the last pair is the end point. Z (closepath) joins the path back to its start. This editor only uses these four commands, which keeps the output easy to read and tweak by hand.
The path() function in clip-path uses pixel coordinates, so (500, 500) on the canvas means 500 pixels right and 500 pixels down from the element's top-left corner, regardless of its size. If your element is not 500 × 500 pixels, scale it with transform: scale(), or use an SVG <clipPath clipPathUnits="objectBoundingBox"> with coordinates converted to the 0–1 range.
Put the d code into <svg viewBox="0 0 500 500"><path d="…" /></svg> and style it with fill and stroke. Thanks to the viewBox, you can set any width and height on the SVG and the shape scales proportionally. The same d string also works with CSS offset-path if you want an element to move along the path.
Not at the moment. The tool only lets you draw from scratch on the canvas or start from the heart, star, drop and Alpa head templates; the output boxes are read-only and cannot import code. To edit a complex existing icon, a full vector editor such as Inkscape or Figma is the better choice.
Browse this category: Design & Color
Upload your webpage screenshot, wrap it with a premium macOS browser frame, drop shadows, and beautiful gradient backdrops, and export high-res PNG.
Visually adjust multi-layer text-shadow, neon glow radius, colors, and flashing rate, then copy CSS code.
Extract colors from local images using a pixel-art style precision loupe. Support HEX, RGB, HSL copies and WCAG color contrast validation.
Visually configure and preview CSS Flexbox and Grid grid layouts, view animations, and copy CSS code.
