Draw area Click to add points, drag to adjust position
Preset curves
Control panel
Control point settings
Curve settings
Curve information
Control point position
| Point | Xcoordinate | Ycoordinate | Action |
|---|---|---|---|
| Add control points to see the coordinates here | |||
Curve code
Export image
Tool Description
Instructions for Use:
- Click the "Add Control Point" button or click on the canvas to add a control point
- Drag the control point to adjust the curve shape
- You can copy single or all coordinates in the coordinate table
- Quickly create common shapes using preset curves
- You can copy the generated SVG code for other projects
- You can download the SVG file or export a PNG image for display or printing
Bezier Curve Teaching Guide
Bezier Curve Principles
Bezier curves are parametric curves in computer graphics, defined by control points. They are widely used in vector graphics,
such as font design and 3D modeling. An n-order Bézier curve is defined by n+1 control points and is generated as a smooth curve through recursive interpolation.
Application Scenarios
- Animated Transitions in UI Design
- Font Design and Vector Graphics
- Motion Trajectory in Game Development
- Curve Modeling in CAD/CAM Systems
- Smooth Curves in Data Visualization
Basic Concepts
Control Points
Defines the key points of the curve shape. Dragging the control points allows you to adjust the curve shape in real time.
t-value parameter (Parameter t)
A parameter ranging from 0 to 1, representing the position of a point on the curve. t=0 is at the starting point, t=1 is at the ending point.
Curve order (Curve Order)
Determined by the number of control points; n control points correspond to an n-1 order Bézier curve.
Curvature
A quantity describing the degree of curvature of a curve; the greater the curvature, the more pronounced the curvature.
In-depth analysis of t-value
The t-value is the core parameter of the Bézier curve. It is calculated using the **de Castellio algorithm** for recursive interpolation:
// Recursively calculate Bézier curve points
function bezier(t, points) {
if (points.length == 1) return points[0];
const newPoints = [];
for (let i = 0; i < points.length - 1; i++) {
newPoints.push(lerp(points[i], points[i+1], t));
}
return bezier(t, newPoints);
}
/**
* Linear interpolation function
* @param {number|Object} a - Starting value or point
* @param {number|Object} b - Ending value or point
* @param {number} t - Interpolation parameter [0,1]
* @returns {number|Object} Interpolation result
*/
function lerp(a, b, t) {
if (typeof a === 'number') {
return a + (b - a) * t;
}
else if (typeof a === 'object' && a.x !== undefined) {
return {
x: a.x + (b.x - a.x) * t,
y: a.y + (b.y - a.y) * t
};
}
else if (Array.isArray(a)) {
return [
a[0] + (b[0] - a[0]) * t,
a[1] + (b[1] - a[1]) * t
];
}
- Linear Interpolation: The t-value is linearly interpolated between each pair of control points
- Recursive Process: New interpolation points are continuously generated until only one point remains
- Geometric Meaning: The t-value corresponds to the intermediate state in the curve generation process
Curvature and Continuity
C0 Continuity
Positional continuity, curve segments with connected endpoints but may have sharp corners.
G1 Continuity
Tangent direction is continuous, visually smooth but curvature may abruptly change.
C1 Continuity
First derivative is continuous, curvature transitions smoothly.
Curvature Calculation Formula
Where B'(t) is the first derivative (tangent), and B''(t) is the second derivative.
Practical Tutorial
Observe the movement of the t-value
Drag the t-value slider and observe the movement trajectory of the red dot on the curve to understand the concept of parametric curves.
Analyze Curvature Changes
Turn on the curvature comb to observe the curvature changes in different regions and understand the influence of control points on the curvature of the curve.
Tangent Direction Analysis
Enable tangent display, observe the tangent direction at different t-values, and understand the local properties of the curve.
Privacy Policy
Welcome to the online Bézier curve drawing tool (hereinafter referred to as "this tool"). We highly value your privacy. This policy explains how we collect, use, store, and protect your information.
1. Information Collection
This tool is designed with privacy protection as its core principle. We minimize the collection of user data as much as possible:
- We do not collect any personally identifiable information, such as name, address, phone number, or email address.
- We do not require users to create an account or provide any login credentials.
- This tool runs locally in your browser. The Bézier curve designs and related data you create are stored only on your device.
- We use basic analytics tools to collect anonymous usage data, such as pageviews, usage time, and feature usage. This data cannot be linked to specific users.
2. Cookies and Local Storage
To provide a better user experience, this tool uses limited browser storage technologies:
- We use local storage (localStorage) to save your tool settings and curve designs. This data only exists on your device.
- We may use necessary cookies to save your preferences (such as light/dark mode selection).
- We use analytics tools such as Google Analytics to collect anonymous usage statistics. These tools use cookies to differentiate between different user sessions.
- You can clear local storage data and manage cookie preferences at any time through your browser settings.
3. Data Security
We value your data security and take reasonable measures to protect your information:
- All data transmission uses HTTPS encryption.
- Your curve design data is stored only in your local browser and is not automatically uploaded to our servers.
- We regularly review and update our security practices to protect our systems and any information you may provide.
- While we take reasonable measures to protect data, please note that data transmission over the internet cannot be guaranteed to be 100% secure.
4. Data Sharing and Disclosure
We respect your privacy and will not sell, trade, or transfer your information:
- We will not share any personally identifiable information with third parties because we do not collect such information.
- We may use third-party service providers (such as Google Analytics) to help us analyze tool usage. These service providers only have access to anonymized aggregated data.
- We may disclose information if required by law, to enforce website policies, or to protect our or others' rights, property, and safety.
5. Privacy Policy Changes
We may update this Privacy Policy from time to time:
- Any changes to this policy will take effect after an updated version is published on this page
- We will notify you of any changes by updating the "Last Updated" date at the top of this page
- We encourage you to check this Privacy Policy periodically for any changes
- By continuing to use this tool, you agree to the updated Privacy Policy
6. Contact Us
If you have any questions or suggestions regarding this Privacy Policy, please contact us through the following methods:
- Email: privacy#beziercurve.net
- We will respond to your inquiry as soon as possible, usually within 5 business days
Important Notice
By using this tool, you agree to the terms of this Privacy Policy. If you do not agree to these terms, please stop using this tool.
This Privacy Policy was last updated on September 3, 2025.