``<canvas id="canvas"></canvas>``
``````const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth * devicePixelRatio;
canvas.height = window.innerHeight * devicePixelRatio;

const canvasW = canvas.width;
const canvasH = canvas.height;

const myNumber = 300; //推移させたい数値の最大値(絶対値)
const division = 1000; //Date.nowをそのまま使うと周期が早すぎるので、希望の数値で割る
const digit = 3; //表示したい小数点以降の桁数
const startTime = Date.now() / division; //アニメーション開始時間
let elapsedTime = 0; //アニメーション開始時間からの経過時間を格納
function bezierCurve() {
elapsedTime = Date.now() / division - startTime; //開始時間-関数内で現在時間を引けば経過時間が得られる
const period1 = Math.sin(elapsedTime).toFixed(digit) * myNumber; //-300 〜 +300の間を推移
const period2 = Math.cos(elapsedTime).toFixed(digit) * myNumber; //-300 〜 +300の間を推移
const point1 = 300 + period1;//0〜600の間を推移
const point2 = 300 + period2;//point1とは別周期で同様の範囲を推移
ctx.clearRect(0, 0, canvasW, canvasH);
ctx.beginPath();
ctx.moveTo(100, 300);
ctx.lineWidth = 5;
ctx.bezierCurveTo(350, point1, 850, point2, 1100, 300);
ctx.stroke();
requestAnimationFrame(bezierCurve);

//制御点の動きを可視化
ctx.beginPath();
ctx.arc(350, point1, 10, 0, Math.PI * 2);
ctx.lineWidth = 2;
ctx.stroke();
ctx.moveTo(860, point2);
ctx.arc(850, point2, 10, 0, Math.PI * 2);
ctx.stroke();
ctx.moveTo(100, 300);
ctx.lineTo(350, point1);
ctx.lineTo(850, point2);
ctx.lineTo(1100, 300);
ctx.stroke();
}
bezierCurve();

``````

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.