Bending Bézier Curves in SVG: A JavaScript Introduction to Moving Control Points with Two Sliders

About This Article
This article was created using an automated generation workflow powered by generative AI.
We checked the official specifications for SVGpathand cubic Bézier curves, and created fictional educational material that changes the shape of a line using two sliders. This is a self-assessment of P1 to P5 by ChatGPT and is not an independent AI assessment.

Verification Status: 🧪 JavaScript syntax verified / 12 interaction items passed in isolated Chromium 144 / Actual display on public Pages and WordPress is unverified.
On October 31, 2026, MDN specifications were cross-referenced with the code stored in GitHub. The same HTML and JavaScript were loaded in isolated Linux Chromium 144, and 12 items were executed, including slider operation, SVG updating, status statements, straightening, resetting, rendering, and mobile width. Arrival on GitHub Pages, actual smartphones, actual WordPress display within blue borders, and print appearance remain unverified.

SVG curves can change shape even while their start and end points remain fixed.This time, we will move two "control points" up and down using sliders and observe how the blue line bends. Before memorizing the code, let's try moving the line first.

Try it first: bend the curve yourself

🔷 Live demo
Open the SVG Bezier curve manipulation demo (public accessibility unconfirmed. The same HTML/JS operation is verified in an isolated Chromium instance).
GitHub sample and README (saved)

First three operations
1. Move 'Control Point 1 Height' from 70 to 160.
2. Compare the blue line with the SVG commands at the bottom of the screen.
3. Press 'Make Straight' and observe the changes in the line and numeric values.

It is designed to initially display a slightly undulating line from the start point to the end point. Moving the slider changes the purple control points, dashed lines, and blue curve.The following table shows the results verified in an isolated Chromium instance. These are not results from public Pages or actual smartphones.

Check here after the operation. In addition to the diagram, also check the command displayed below.M 60 160 C 200 70 400 250 540 160Changes in the text values indicate that the coordinates passed to the SVG have changed. Even if colors and shapes are difficult to distinguish, state descriptions can be checked using the screen reader function. However, actual device testing using assistive technologies has not yet been conducted.

Why the line bends at two points

The SVG<path>element can draw not only straight lines, but also curves and arcs within a single element.dattributes contain commands and coordinates specifying "where to start and what kind of line to draw." In this case,Mmoves to the starting point, andCis acubic Bézier curve that specifies two control points and an endpoint.

M 60 160 C 200 70 400 250 540 160
  始点      制御点1 制御点2   終点

The start point is (60,160) and the end point is (540,160). Both are fixed at a height of 160. Meanwhile, the Y coordinate for control point 1 is 70, and the Y coordinate for control point 2 is 250. The two control points serve as guides to determine which direction the line is pulled.Control points do not necessarily lie directly on the curve itself. Confusing this point may lead to the mistaken assumption that a malfunction has occurred when the purple points and the blue line do not coincide.

flowchart LR
    A["スライダーを動かす"] --> B["Y座標を読む"]
    B --> C["SVGのd属性を更新"]
    C --> D["曲線を再描画"]
    C --> E["座標を文字で表示"]

The diagram is a simplified representation of the educational material's event processing. It is not an exact illustration of the browser's internal rendering process.

The core of the code is "converting coordinates into a string"

Extract only the parts related to line updating from the completed JavaScript.

const y1 = Number(topSlider.value);
const y2 = Number(bottomSlider.value);
const d = `M 60 160 C 200 ${y1} 400 ${y2} 540 160`;
route.setAttribute("d", d);

Number()to read the slider value as a number, anddreconstructs the string.setAttribute("d", d)updates the attributedof the existing SVG element. Instead of accepting the string from arbitrary user input, the design retrieves it from a slider with an HTMLmin・max・step element. Because the coordinate range is predefined, there is no need to include personal information or arbitrary HTML in the input. MDN notes thatsetAttribute()depending on the type of attribute using it, passing untrusted values can lead to script execution and other issues. In this tutorial, the update targets are restricted to SVG attributes such asd, and only values converted to numbers from range sliders are used. When adapting this to a production application that accepts freeform input, validate both the attribute name and the input value separately.

These four lines do not constitute the complete code. Acquiring sliders and SVG elements, registering events, updating the purple point and dashed line, displaying text, and operating buttons are separated intothe main JavaScript file of Daily Code. Rather than pasting long HTML or CSS into the article, this approach ensures you can first understand "what happens when you change what."

Change only one place and compare it with your prediction

In "make it a straight line," set the heights of both control points to 160. Since the start and end points are also 160, everything aligns on the same horizontal line. In this case, the cubic Bézier curve mathematically becomes a straight line. This is not simplyCcommand rewritten toLcommand.

Next, change only control point 1 from 160 to 100. Leave control point 2 at 160. The expected difference is that the left-leaning portion bulges upward. Moving the control points continuously changes the overall shape of the curve. Because changing both sliders simultaneously makes it difficult to explain the cause, you should change only one condition at first.

Note here that for the Y-axis coordinates,the numerical value increases as you go down>. While standard mathematical graphs often consider upward as positive, in this SVG viewport, points higher up have smaller Y values. It is normal for the value to decrease even though you moved it upward.

Run it on your own computer

If you cannot open the demo, find it in the pinned commitHTMLandJavaScriptare saved in the same folder.index.htmlIt is designed to be opened in a browser with no additional packages required. If you encounter issues loading local files, you can use a local HTTP server as needed.

python3 -m http.server 8000 --bind 127.0.0.1

on the same PC.http://127.0.0.1:8000/To stop, use in the terminal.Ctrl+COn Windows, ifpython3is not available, replace it withpy -3if the Python Launcher is installed.This local startup procedure was also not executed on the actual device this time.Please check the available development tools and policies on organizational PCs.

Troubleshooting

In this implementation, the SVG viewport isviewBox="0 0 600 320"fixed to , and designed to scale down according to the horizontal width using CSS. Even if the browser screen width changes, internal coordinates use the same values. It has not yet been verified whether it layout breaks on actual smartphones or A4/PDF printing.

⚠️ Safety and Limitations
Displays only fictitious coordinates, not actual maps or delivery routes. External CDNs, geolocation, microphones, cameras, and authentication are not used. Arbitrary JavaScript is not embedded in the WordPress post body, and the operation screen is isolated into a separate Daily Code page.

If Used for Work or Study

This mechanism can be applied to curves connecting processes, arrows in explanatory diagrams, formula visualization, and path representation within screens. For example, if a line connecting two processes in a business workflow overlaps with other elements, the position of the control points can be adjusted to improve readability. However, a curve looking clean is distinct from the accuracy of the business workflow content.

Actual road routes and traffic routes used in map applications cannot be reproduced simply by freely drawing Bezier curves. This learning material is intended for learning curve control. Furthermore, representing important information solely through line shapes or colors may result in failure to convey it in print, color vision deficiency, or screen reader environments. Make sure the design fundamentally pairs coordinates with explanatory text.

Because SVG treats graphics as elements, its role differs from learning materials that render numerous particles using Canvas. When directly updating a small number of lines and control points as in this case, using SVG makes it easier to trace the correspondence between coordinates and graphics. Performance when frequently updating a large volume of elements must be compared using actual devices and data volumes.

Official Documentation

• MDN: SVG d attribute — MandCmeanings, andpathhow to specify for.

• MDN: SVG Path Tutorial — Cubic Bézier curves and the concept of control points.

• MDN: setAttribute() — How to update attributes in JavaScript.

Official documentation review date: November 1, 2026 (re-verified the MDN pages fordattributes, paths, andsetAttribute()). Confirming that the Git blob SHA of the HTML/JavaScript retrieved from GitHub on October 31, 2026 matches, 12 out of 12 desktop and mobile width interaction items passed in isolated Chromium 144 (Linux, headless). On November 1, 2026, the same GitHubapp.jswas re-run in a V8 simulated DOM, and 8 out of 8 items passed, including initial rendering, sliders, control points, straight-line conversion, status text, reset, and display strings. Because direct navigation to file:// was blocked by management restrictions, the same HTML was loaded via set_content and the same JavaScript was executed via add_script_tag. GitHub Pages deployment reachability, physical devices, actual WordPress blue-border rendering, and printing remain unverified.

GitHub Sample

• Chromium 144-item reproduction test (Playwright, optional)

• Daily-Code-Samples: SVG Bézier Curve Interaction Tutorial

• Completed JavaScript version

• Live Demo (Reachability and functionality unverified)

The main text serves as educational material for understanding operations, observations, and principles, while GitHub serves as the definitive source for reusing the HTML, JavaScript, README, and optional browser tests. The eyecatch image has not been created or registered, and no non-existent images or media IDs are configured within the text.