GeeksforGeeks App
Open App
Browser
Continue

# D3.js bezierCurveTo() Function

The d3.bezierCurveTo() function in d3.js is used to draw the cubic-bezier segment to a certain point from the current given point via certain control points.

Syntax:

`path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);`

Parameters: This function takes the following parameters.

• cpx1: It is the x1-coordinate of the bezier control point.
• cpy1: It is the y1-coordinate of the bezier control point.
• cpx2: It is the x2-coordinate of the bezier control point.
• cpy2: It is the y2-coordinate of the bezier control point.
• x: It is the x-coordinate of the endpoints.
• y: It is the y-coordinate of the endpoint.

Return Value: This function does not return any value.

Example 1:

## HTML

 ```<``html` `lang``=``"en"``>`` ` `<``head``>``    ``<``meta` `charset``=``"UTF-8"``>``    ``<``meta` `name``=``"viewport"` `path1tent``=``        ``"width=device-width,initial-scale=1.0"``>`` ` `    ``<``script` `src``=``        ``"https://d3js.org/d3.v4.min.js"``>``    ```` ` `    ``<``style``>``        ``h1 {``            ``color: green;``        ``}`` ` `        ``svg {``            ``background-color: #f2f2f2;``        ``}`` ` `        ``.path2 {``            ``stroke: #000;``        ``}``    `````` ` `<``body``>``    ``<``div``>``        ``<``h1``>GeeksforGeeks``        ``<``b``>D3.js | Path.bezierCurveTo() Function``        ``<``br``><``br``>``        ``<``svg` `width``=``"100"` `height``=``"100"``>``            ``<``path` `class``=``"path2"``>``        ````    ```` ` `    ``<``script``>`` ` `        ``// Creating a path ``        ``var path = d3.path();``        ``path.moveTo(10, 10);``        ``path.bezierCurveTo(95, 10, 50, 90, 10, 10)``         ` `        ``// Closing the path ``        ``path.closePath();``        ``d3.select(".path2").attr("d", path); ``    `````` ` ``

Output:

Example 2:

## HTML

 ```<``html` `lang``=``"en"``>`` ` `<``head``>``    ``<``meta` `charset``=``"UTF-8"``>``    ``<``meta` `name``=``"viewport"` `path1tent``=``        ``"width=device-width,initial-scale=1.0"``>`` ` `    ``<``script` `src``=``        ``"https://d3js.org/d3.v4.min.js"``>``    ```` ` `    ``<``style``>``        ``h1 {``            ``color: green;``        ``}`` ` `        ``svg {``            ``background-color: #f2f2f2;``        ``}`` ` `        ``.path2 {``            ``stroke: #000;``        ``}``    `````` ` `<``body``>``    ``<``div``>``        ``<``h1``>GeeksforGeeks``        ``<``b``>D3.js | Path.bezierCurveTo() Function``        ``<``br``><``br``>``        ``<``svg` `width``=``"100"` `height``=``"100"``>``            ``<``path` `class``=``"path2"``>``        ````    ```` ` `    ``<``script``>`` ` `        ``// Creating a path ``        ``var path = d3.path();``        ``path.moveTo(10, 10);``        ``path.bezierCurveTo(95, 10, 50, 90, 10, 10)``         ` `        ``// Closing the path ``        ``path.closePath();``        ``path.bezierCurveTo(90, 10, 15, 110, 10, 10)``         ` `        ``// Closing the path ``        ``path.closePath();``        ``d3.select(".path2").attr("d", path); ``    `````` ` ``

Output:

My Personal Notes arrow_drop_up
Related Tutorials