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

JavaScript

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

// draw shapes
var circle2 = draw.rect(size,size).fill('#FFE000').radius(100);
var circle = draw.rect(size,size).fill('#FFF').radius(100);
var topRect = draw.rect(size,size).fill('#FFF');
var botRect = draw.rect(size,size).fill('#FFF');
var rightRect = draw.rect(size/2,size).move(size/2,0).fill('#FFF');
var rightRect2 = draw.rect(size/2,size).move(size/2,0).fill('#FFF');

// masks shapes

var topRectMask = draw.rect(size,size/2).move(0,0).rotate(0,0,0).fill('#FFF');
var botRectMask = draw.rect(size,size/2).move(0,size/2).rotate(0,0,0).fill('#FFF');

// applying mask shapes
topRect.maskWith(topRectMask);
botRect.maskWith(botRectMask);
var mask = draw.mask().add(botRect).add(topRect);
circle.maskWith(mask);
circle.clipWith(rightRect);
circle2.clipWith(rightRect2);

// open shell animation
function openClamShell(){
    topRect.animate(4000).rotate(-90);
    botRect.animate(4000).rotate(90);
}

// reset shell
function resetClamShell(){
    topRect.stop().rotate(0);
    botRect.stop().rotate(0);
}

// events
circle.on("mouseenter", function(){
    openClamShell();
});
circle.on("mouseleave", function(){
    resetClamShell();
});