Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="svg: animated wobbling key (css)">
  <meta charset="utf-8">
</head>
<body>
  <svg viewbox="0 0 100 100">
    <g transform="translate(40, 30)">
      <g class="key" transform-origin="10 5">
        <circle r="10" cx="10" cy="10"></circle>
        <circle r="2" cx="10" cy="5" class="knockout"></circle>
        <path d="M6,15
                 l0,30
                 l4,3
                 l4,-3
                 l0,-2
                 l-2,-2
                 l2,-2
                 l-2,-2
                 l2,-2
                 l-2,-2
                 l2,-2
                 l0,-15
                 z"></path>
        <path d="M10,20 l0,27" stroke-width="1" class="knockout"></path>
      </g>
    </g>
  </svg>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
dbazilepro
0viewers