Snap.js Lab

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.js/1.9.2/snap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/snap.js/1.9.2/snap.css">
<script src="http://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 98 97" version="1.1" x="0px" y="0px" id="papper"><title>Fog</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g sketch:type="MSArtboardGroup" transform="translate(-60.000000, -222.000000)" stroke="#646262" stroke-width="2"><g sketch:type="MSLayerGroup" transform="translate(61.000000, 223.000000)"><path d="M16.3784128,56.4920014 C16.2126237,56.4973203 16.0461721,56.5 15.8790984,56.5 C7.38545687,56.5 0.5,49.5745026 0.5,41.0314685 C0.5,33.8268507 5.39700322,27.7726404 12.0257748,26.0524792 C11.1326377,24.46198 10.6229508,22.6247741 10.6229508,20.6678322 C10.6229508,14.6120106 15.503781,9.7027972 21.5245902,9.7027972 C23.3330619,9.7027972 25.0386822,10.1457176 26.5400736,10.9295914 L26.5400736,10.9295914 C31.3823758,4.61261652 39.27745,0.5 48.1946721,0.5 C58.8752765,0.5 68.0895019,6.39998226 72.348129,14.9209886 L72.348129,14.9209886 C76.743623,16.3345941 79.9262295,20.4770333 79.9262295,25.3671329 C79.9262295,26.3881912 79.7874745,27.3766532 79.5278954,28.3144835 C79.7246402,28.3076456 79.9223314,28.3041958 80.1209016,28.3041958 C88.6145431,28.3041958 95.5,34.6160416 95.5,42.4020979 C95.5,50.1881542 88.6145431,56.5 80.1209016,56.5 C80.1151424,56.5 80.1093839,56.4999971 80.1036261,56.4999913 C80.0978761,56.499992 80.0921165,56.5 80.086355,56.5 L16.6923335,56.5 C16.5870456,56.5 16.4823838,56.4973121 16.3784128,56.4920014 Z" sketch:type="MSShapeGroup"></path></g></g></g></svg>

CSS

.padded {
    padding-top: 60px;
}
/* From snap.css */
 .snap-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 2;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.snap-drawers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
}
.snap-drawer {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: auto;
    width: 265px;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
.snap-drawer-left {
    left: 0;
    z-index: 1;
}
.snap-drawer-right {
    right: 0;
    z-index: 1;
}
.snapjs-left .snap-drawer-right, .snapjs-right .snap-drawer-left {
    display: none;
}
.snapjs-expand-left .snap-drawer-left, .snapjs-expand-right .snap-drawer-right {
    width: 100%;
}
#content {
    background: white;
}

JavaScript

var paper = Snap('#paper');
console.log(paper);