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>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <svg width="480" height="480">
        <defs>
            <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="1"/>
                <stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0"/>
            </linearGradient>              
        </defs>          
    <circle class="circleStage" r="15" cx="0" cy="0" style="fill: rgb(102, 153, 153);"/>   
    <path
      transform="matrix(1,0,0,1,200,200)"
      d="M0 0M 120 0 A 120 120 0 0 0 -120 0 A 120 120 0 0 0 120 0"
      fill="url(#gradient)" />
  </svg>
  
    <svg width="1024" height="678">
      <defs>
        <linearGradient id="gradient30" x1="0%" y1="0%" x2="0%" y2="85%">
          <stop offset="0%" stop-color="rgb(255,255,255)" stop-opacity="0.8" />
          <stop offset="100%" stop-color="rgb(255,255,255)" stop-opacity="0.1"/></linearGradient>
      </defs>
      
      <g class="stage3" transform="translate(72,374)">
        <g>
          
          <circle class="circleStage" r="15" cx="0" cy="0" style="fill: rgb(102, 153, 153);"/>           
          <path d="M-13 5 C-17 -17 7, -17 10 -9 M10 -9 C 7 7, -7 7, -13 5" fill="url(#gradient30)"/>
        </g>
      </g>
    </svg>
  
  <svg>
    <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="85%">
    <stop offset="0%" style="stop-color:rgb(255,255,255);  stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0.1" />
    </linearGradient>
    </defs>
     <circle cx="100" cy="50" r="30"  fill="#0000FF" />
 <path d="M72 55 C 70 17, 113 15, 123 35 M123 35 C 118 70, 70 60, 72 55" fill="url(#grad2)"/>
  </svg>
  
  
  <svg xmlns="http://www.w3.org/2000/svg" height="300" width="85" version="1.1">
 <defs>
  <linearGradient id="fill_bg" x2="0.5">
   <stop stop-color="#8e8e8e" offset="0"/>
   <stop stop-color="#d6d6d6" offset="0.59766"/>
  </linearGradient>
 </defs>
 <g>
  <path d="m3.5,16.5c12.5,6.6507,21,6.6507,33,0v271.47c-12.5,7.1172-22,7.1172-33,0v-135.74-135.73,0.00002,0.00001,0.00002,0.00001z" stroke="#352c2c" fill="url(#fill_bg)"/>
 </g>
</svg>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers