Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <meta charset=utf-8 />
    <title>JSBin 5th bday!</title>
    <style>
      body {
        text-align: center;
        padding: 0;
        margin: 0;
      }
      canvas {
        position: absolute;
        top: 100px;
        left: 0;
        top: 0;
        transition: 1s ease;
      }
      .hide {
        opacity: 0;
      }
      #ellipse {
        position: absolute;
        top: 136px;
        left: 300px;
        width: 288px;
        height: 142px;
        margin-left: -145px;
        border: 1px solid red;
        border-radius: 50%;
        transition: 1s ease;
      }
    </style>
  </head>
  
  <body>
    <div id="ellipse" class=" hide "></div>
    <canvas id="c2" width="600" height="300"></canvas>
    <canvas id="c" width="600" height="300"></canvas>
  </body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chinchangpro
0viewers