svg.js playground

by Emily Humphrey

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: url(http://subtlepatterns.com/patterns/symphony.png);
}
#drawing{
    margin: 0px;
}
.bam{
    transition: transform .6s;
}

JavaScript

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

// draw shapes
var circle1 = draw.rect(size,size).fill('#FFE000').radius(100);
var cover1 = draw.rect(size,size).fill('#FFE000');
var rect1 = draw.rect(size/2,size/2).move(size/2,size/2).fill('#fff');
var rectOver1 = draw.rect(size/2,size/2).move(size/2,0).fill('#fff');
var circle2 = draw.rect(size,size).fill('#FFE000').radius(100);
var cover2 = draw.rect(size,size).fill('#FFE000');
var rect2 = draw.rect(size/2,size/2).move(size/2,0).fill('#fff');
var rectOver2 = draw.rect(size/2,size/2).move(size/2,size/2).fill('#fff');

cover1.maskWith(rect1);
circle1.maskWith(cover1);
circle1.clipWith(rectOver1);
cover2.maskWith(rect2);
circle2.maskWith(cover2);
circle2.clipWith(rectOver2);

cover1.node.classList.add("bam");
cover1.node.style.transform = "rotate(0deg)";
cover1.node.style.webkitTransform = "rotate(0deg)";
cover1.node.style.MozTransform = "rotate(0deg)";
cover1.node.style.transformOrigin = "center";
cover1.node.style.MozTransformOrigin = "center";
setTimeout(function(){
    cover1.node.style.transform = "rotate(-90deg)";
    cover1.node.style.webkitTransform = "rotate(-90deg)";
    cover1.node.style.MozTransform = "rotate(-90deg)";
},500);
console.log(cover1.node);cover2.animate(4000).rotate(90);