-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (83 loc) · 3.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link
href="https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
rel="stylesheet"
/>
<title>Cubic Bezier Curve Generator</title>
<meta
name="description"
content="Generate cubic bezier curves for your CSS animation"
/>
</head>
<body>
<header>
<h1>Cubic Bezier Curve Generator</h1>
<p>Generate cubic bezier curves for your CSS animation</p>
</header>
<div class="canvas-container">
<p>
Drag the handles <code>P1</code> and <code>P2</code> to adjust the
curve.
</p>
<div class="canvas">
<canvas id="canvas"></canvas>
</div>
<details>
<summary>How it works</summary>
<p>
A
<a
href="https://developer.mozilla.org/en-US/docs/Glossary/Bezier_curve"
target="_blank"
rel="noopener noreferrer"
>Cubic Bézier Curve</a
>
is a smooth curve defined by four points. The animation begins at the
start point (0,0) and ends at the end point (1,1). The first control
point (P1) influences the curve's initial direction and speed, while
the second control point (P2) influences its ending direction and
speed.
</p>
<br />
<p>
To generate the curve, you can drag P1 and P2 within the graph. The
X-axis represents time, ranging from 0 to 1, and the Y-axis represents
the animation progress, also ranging from 0 to 1.
</p>
<br />
<p>
The curve is calculated using a mathematical formula that determines
the animation's progress at any given time. P1 significantly impacts
the beginning of the animation. If P1 is positioned above the diagonal
line, the animation will start slowly. Conversely, if P1 is below the
diagonal line, the animation will begin quickly. Similarly, P2
influences the animation's end. An above-diagonal P2 position results
in a slow ending, while a below-diagonal position leads to a quick
finish.
</p>
<br />
<p>
To use the curve in your CSS, simply copy the generated
<code>cubic-bezier(...)</code> value and paste it into the
<code>animation-timing-function</code> property.
</p>
</details>
</div>
<section class="preview">
<h2>Output & Preview</h2>
<output class="output">
<code id="output"></code>
<button id="copy-btn">Copy</button>
</output>
<div class="box" id="box"></div>
</section>
<script type="module" src="/src/main.ts"></script>
</body>
</html>