Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 786301263f
Fetching contributors…

Cannot retrieve contributors at this time

82 lines (70 sloc) 3.18 kb
<!DOCTYPE html>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="about:blank" />
<a href=""><code>cubic-bezier(<span id="values"><span
id="P1x" class="param">0</span>,<span
id="P1y" class="param">0</span>,<span
id="P2x" class="param">.25</span>,<span
id="P2y" class="param">1</span></span>)</code></a>
<button id="save">Save</button>
<p><strong>This curve contains values out of range.</strong> But fear not young padawan! Just use <code>another value</code> as well for Webkit the <a href="">bug #45761</a> fix propagates to most used versions.</p>
<div class="coordinate-plane">
<span class="control-point" id="P0"></span>
<button class="control-point" id="P1" style="left:50px; top: 250px;"></button>
<button class="control-point" id="P2" style="left:250px; top: 250px;"></button>
<span class="control-point" id="P3"></span>
<canvas height="600" width="300" id="curve"></canvas>
<section id="preview">
Preview &amp; compare
<button id="go">Go!</button>
<label for="duration">Duration:</label>
<input type="range" id="duration" value="1" min="0.1" max="10" step="0.1" pattern="\d*\.?\d+" size="3" />
<output for="duration">1 second</output>
<canvas id="current" width="60" height="60"></canvas>
<canvas id="compare" width="60" height="60"></canvas>
<section id="library">
<button id="import">Import</button>
<button id="export">Export</button>
<p>Click on a curve to compare it with the current one.</p>
<footer><strong>Tip:</strong> Right click on any library curve and select “Copy Link Address” to get a permalink to it which you can share with others</footer>
<form id="importexport">
<label for="json">To import curves, paste the code below and click “Import”</label>
<label for="json">Copy the code and save to a file to export</label>
<textarea id="json"></textarea>
Made by <a href="">Lea Verou</a> with care ✿ <a href="">About</a>
<a href="" class="button" rel="nofollow">Donate</a>
<script src="chainvas.min.js"></script>
<script src="environment.js"></script>
<script src="cubic-bezier.js"></script>
<script src="interaction.js"></script>
<a href="" class="twitter-share-button" data-count="vertical" data-via="LeaVerou" data-text="A better tool for generating cubic-bezier() easing functions!">Tweet</a>
<script src=""></script>
<script>_gaq = [['_setAccount', 'UA-25106441-3'], ['_trackPageview']];</script>
<script src="" async></script>
Jump to Line
Something went wrong with that request. Please try again.