Four points defining one cubic Bezier curve
Two control points (40,20) and (160,20), with an end point of (180,100), starting from a fixed (20,100), produce the SVG path M 20 100 C 40 20, 160 20, 180 100 -- a single smooth cubic Bezier curve rendered directly as an SVG snippet you can copy and use.
A cubic Bezier curve is defined by exactly four points: a start point, two control points that pull the curve's shape without the curve actually passing through them, and an end point -- the two control points here (both at y=20, well above the start and end points at y=100) pull the curve upward into an arch shape between its two endpoints.
The M command moves the drawing cursor to the starting point without drawing anything, and the C command draws the actual cubic curve using its own two control points followed by the end point -- this exact sequence and syntax is what any SVG path using a cubic Bezier curve follows.
Why control points shape the curve without being touched by it
Starts at M 20 100. ViewBox is 0 0 200 200. Not a full path editor. The curve is tangent to the line from the start point to its nearby control point, and tangent to the line from the end point to its nearby control point -- this is what gives Bezier curves their smooth, predictable shape, and why moving a control point pulls and reshapes the curve's arc without the curve ever actually passing through that control point's exact location.
The fixed viewBox (0 0 200 200) defines the SVG's coordinate space and visible canvas area -- all the point coordinates entered need to make sense within that 200x200 space for the curve to render fully visible within the given viewBox rather than extending outside the visible canvas.
This tool visualizes and generates one single cubic Bezier segment -- a more complex path combining multiple curve segments (an S-curve, or a closed shape with several curved sections) would need multiple C commands chained together, which is beyond what this single-curve visualizer produces directly.
Related SVG and path-editing tools
Once you have a path like this, the SVG Path Optimizer can compact its syntax for a smaller file size.
For a different SVG-generation approach based on clip-path polygon points rather than curves, the CSS Polygon Clip-Path Generator covers that related but distinct shape technique.
Frequently Asked Questions (FAQ)
What are the four points that define a cubic Bezier curve?
A start point, two control points, and an end point. The curve begins at the start point and ends at the end point, while the two control points pull and shape the curve's arc between them without the curve ever passing directly through the control points themselves.
How do the control points at y=20 create the upward arch shape?
Since both control points sit at y=20, well above the start and end points at y=100, they pull the curve upward as it travels between its endpoints -- the curve is tangent to the line toward each nearby control point, which is what produces the smooth arching shape.
What does the viewBox value determine?
Starts at M 20 100. ViewBox is 0 0 200 200. It defines the SVG's coordinate space and visible canvas area (0 0 200 200 here, a 200x200 square). Point coordinates need to fit sensibly within that space for the resulting curve to render fully visible rather than extending beyond the visible canvas.
Can this tool create a path with multiple connected curve segments?
Not directly. Starts at M 20 100. ViewBox is 0 0 200 200. Not a full path editor. It visualizes and generates a single cubic Bezier curve segment. A more complex multi-segment path (like an S-curve or a closed curved shape) would need multiple chained C commands, which is beyond this single-curve visualizer's current output.
What's the difference between the M and C commands in the generated path?
M moves the drawing cursor to a starting point without drawing anything. C draws an actual cubic Bezier curve, taking two control point coordinates followed by an end point coordinate -- together, M and C form the complete path definition for one curve segment.
