<html lang="en">
<head>
<title>Spin</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/two.js/0.3.0/two.js">
</script>
</head>
<body>
<div id="draw">
<div class="two-container"></div>
</div>
<script>
var elem = document.getElementById('draw').children[0];
var two = new Two({ width: 350, height: 350 }).appendTo(elem);
var circle = two.makeCircle(10, 66, 65);
var rect = two.makeCircle(70, 0, 100, 150)
var circle1 = two.makeCircle(100, 77, 78)
var circle2 = two.makeCircle(90, 4, 68)
var circle3 = two.makeCircle(90, 4, 68)
var circle4 = two.makeCircle(10, 66, 65);
var circle5 = two.makeCircle(56, 100, 12, 562)
var circle6 = two.makeCircle(100, 77, 78)
var circle7 = two.makeCircle(100, 872, 90)
var circle8 = two.makeCircle(67, 457, 6)
circle.fill = '#60FD6A';
circle1.fill = '#2B00FF';
rect.fill = 'rgba(0, 200, 255, 0.75)';
circle2.fill = '#FF1A00';
circle3.fill = '#33FF33'
circle4.fill = '#1';
circle5.fill = '#663300';
circle6.fill = '#44DC0C';
circle7.fill = '#3399FF';
circle8.fill = '#99CCFF'
var group = two.makeGroup(circle, rect, circle1, circle2, circle3, circle4,circle5, circle6, circle7,circle8);
group.translation.set(two.width / 2, two.height / 2);
group.scale = 0;
group.noStroke();
two.bind('update', function(frameCount) {
if (group.scale > 0.95) {
group.scale = group.rotation = .012;
}
var t = (1 - group.scale) * .11;
group.scale += t;
group.rotation += t * 4 * Math.PI;
}).play();
</script>
</body>
</html>
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |