svg.js playground

by schrodingers

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%;
}

JavaScript

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

/* draw rectangle */
var rect = draw.rect(50, 50).move(100, 100).fill('#f09')

/* make rectangle jump and change color on mouse over */
rect.mouseover(function () {
    this.animate(1000, SVG.easing.elastic)
        .move(400 * Math.random(), 400 * Math.random())
        .rotate(-45 + 90 * Math.random())
        .fill({
        r: ~~ (Math.random() * 255),
        g: ~~ (Math.random() * 255),
        b: ~~ (Math.random() * 255)
    })
})

/* write text at the back */
draw.text('svg.js playground\ntry to grab the rectangle!')
    .back()
    .fill('#ccc')
    .move('50%', '40%')
    .font({
    family: 'Source Sans Pro',
    size: 18,
    anchor: 'middle'
})

/* create clock */
draw.clock('15%').back().start().move('80%', '80%')