svg.js playground

HTML

<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.draggable.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.clock.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.import.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.filter.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.export.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.easing.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.shapes.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.topath.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.parser.js"></script>
<div id="drawing"></div>

CSS

html, body, #drawing {
    margin: 0;
    height: 100%;
    background: #eee;
}
#drawing{
  background:red;
  border:1px solid blue;
    margin: 50px;
}

JavaScript

/* create an svg drawing */
var draw = SVG('drawing');

/* draw rectangle */
var rect = draw.rect(200,200).fill('#f09').radius(100);
var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })

rect.maskWith(ellipse)

/* make rectangle jump and change color on mouse over */
rect.mouseover(function() {
    this.animate(600, SVG.easing.elastic);
})