Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 17, 2015 09:12
Show Gist options
  • Save anonymous/78ad0a7db822a757e70e to your computer and use it in GitHub Desktop.
Save anonymous/78ad0a7db822a757e70e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/mexikayize
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<script>
function quadraticBzier(p, p0, p1, p2){
return Math.pow(1-p,2)*p0 +2*p*(1-p)*p1+Math.pow(p,2)*p2;
}
jQuery(function(){
var $c = $('#canvas');
var c = $c.get(0).getContext('2d');
c.fillStyle = '#CC0065';
c.beginPath();
c.arc(100, 200, 5, 0, Math.PI * 2, true);
c.fill();
c.beginPath();
c.arc(300, 10, 5, 0, Math.PI * 2, true);
c.fill();
c.beginPath();
c.arc(500, 200, 5, 0, Math.PI * 2, true);
c.fill();
c.fillStyle = 'white';
for(var i=0.05;i<=1;i+=0.05){
c.beginPath();
c.arc(quadraticBzier(i, 100,300,500), quadraticBzier(i, 200,10,200), 5, 0, Math.PI * 2, true);
c.fill();
}
});
</script>
<body style="background-color:gray;">
<canvas id='canvas' width="800" height="600" style="border:1px solid red;"></canvas>
<!--
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment