b2KIT

SVG Path Editor

Visual SVG path editor. Click to place points, drag Bezier curves, and see SVG path code update live.

3

Click canvas to add points. Green = start point. Drag blue/orange/purple handles to adjust. Double-click a point to cycle its mode (L → Q → C → L). Orange handles = quadratic control. Purple handles = cubic control points.

Path Data0 points

Click on the canvas to start drawing a path.

How to Use SVG Path Editor

  1. 1

    Enter path data

    Paste an SVG path string or start drawing from scratch.

  2. 2

    Edit control points

    Drag anchor points and handles to shape the path visually.

  3. 3

    Copy the path

    Click copy to grab the optimized SVG path data string.

Related Tools

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.