demo/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hammerhead Example page</title>
<link rel="stylesheet" href="hammerhead2.css">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="the-pear" viewBox="0 0 110.39 160.75" version="1.1" style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -ms-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">
<defs id="defs3">
<filter id="filter3955" y="-.181" width="1.5466" x="-.27331" height="1.362">
<feGaussianBlur id="feGaussianBlur3957" stdDeviation="2.6773389"/>
</filter>
<clipPath id="clipPath3970" clipPathUnits="userSpaceOnUse">
<path id="path3972" fill-rule="evenodd" fill="#2b512c" d="m326.44 292.81c0.38 1.74 0.71 3.41 0.75 5.35 0.1 5.13 1.69 27.46 1.69 27.46s-2.11 0.22-3.16-17.71c-0.44-7.55-1-12.13-1.53-15.44-2.86-0.58-10.43-1.79-10.85 12.62-0.48 16.97 14.87 23.98 24.54 23.69 7.69-0.23 7.45-6.53 7.78-14.16 0.63-14.82-14.91-20.51-19.22-21.81z"/>
</clipPath>
<filter id="filter3844" y="-.25518" width="1.4375" x="-.21874" height="1.5104">
<feGaussianBlur id="feGaussianBlur3846" stdDeviation="5.7709407"/>
</filter>
<clipPath id="clipPath3961" clipPathUnits="userSpaceOnUse">
<path id="path3963" fill-rule="evenodd" fill="#2b512c" d="m234.23 322.86c17.58-37.6 20.82-48.15 36.78-49.5s34.08 7.57 23.26 16.23c-10.82 8.65-16.23 15.42-21.64 22.72s-8.92 22.99-38.4 10.55z"/>
</clipPath>
<filter id="filter4048" y="-.11752" width="1.2452" x="-.12259" height="1.235">
<feGaussianBlur id="feGaussianBlur4050" stdDeviation="1.455279"/>
</filter>
<clipPath id="clipPath4054" clipPathUnits="userSpaceOnUse">
<path id="path4056" fill-rule="evenodd" fill="#2b512c" d="m287.39 236.53c14.76-11.64 42.31 6.06 23.25 28.57 0 0-14.86 11.73-19.27 3.4-4.4-8.34-4.29-13.48-3.34-14.88 3.06-4.48 0.57-19.53-0.64-17.09z"/>
</clipPath>
<filter id="filter3444" y="-.20899" width="1.5397" x="-.26986" height="1.418">
<feGaussianBlur id="feGaussianBlur3446" stdDeviation="3.1463175"/>
</filter>
<linearGradient id="linearGradient3258" x1="290.62" gradientUnits="userSpaceOnUse" y1="332.16" gradientTransform="translate(-14.426 9.3347)" x2="319.6" y2="332.16">
<stop id="stop3254" stop-color="#fff" stop-opacity=".51449" offset="0"/>
<stop id="stop3256" stop-color="#8f9965" stop-opacity="0" offset="1"/>
</linearGradient>
<filter id="filter3680">
<feGaussianBlur id="feGaussianBlur3682" stdDeviation="0.45525265"/>
</filter>
<clipPath id="clipPath3460" clipPathUnits="userSpaceOnUse">
<path id="path3462" fill-rule="evenodd" fill="#62423c" d="m306.06 304.9c1.42-17.53 13.3-33.66 19.52-32.53 6.22 1.14 2.55 7.08-0.28 9.9-2.83 2.83-6.79 1.14-9.05 5.1-2.27 3.96-6.23 11.88-6.79 17.82-0.57 5.94-3.4 0.28-3.4-0.29z"/>
</clipPath>
</defs>
<g id="layer1" transform="translate(-439.09 -97.702)">
<g id="g4058" transform="translate(203.81 -135.14)" fill-rule="evenodd">
<path id="path3686" fill="#2b512c" d="m287.25 236.53c17.64-11.64 50.58 6.06 27.8 28.57 0 0-17.77 11.73-23.04 3.4-5.27-8.34-5.14-13.48-4-14.88 3.65-4.48 0.68-19.53-0.76-17.09z"/>
<path id="path3692" fill="#8f975c" d="m322.89 282.22c-0.11 6.19 1.78 7.76 2.83 25.69s3.15 17.72 3.15 17.72-1.58-22.33-1.68-27.47c-0.11-5.14-2.2-8.18-2.1-16.46l-2.2 0.52z"/>
<path id="path2456" fill="#62423c" d="m306.06 304.9c1.42-17.53 13.3-33.66 19.52-32.53 6.22 1.14 2.55 7.08-0.28 9.9-2.83 2.83-6.79 1.14-9.05 5.1-2.27 3.96-6.23 11.88-6.79 17.82-0.57 5.94-3.4 0.28-3.4-0.29z"/>
<path id="path3456" filter="url(#filter3680)" clip-path="url(#clipPath3460)" fill="#895c54" d="m306.97 305.85c2.64-14.79 9.53-26.21 20.19-32.99l-17.96-6.01-5.15 38.83 2.92 0.17z"/>
<path id="path3713" fill="#2b512c" d="m235.28 322.67c17.58-37.59 20.83-48.14 36.79-49.49 15.95-1.35 34.08 7.57 23.26 16.23-10.82 8.65-16.23 15.41-21.64 22.72-5.41 7.3-8.93 22.99-38.41 10.54z"/>
<path id="path2454" fill="#7c8947" d="m307.98 305.76c-12.446 0.56574-38.68 20.358-41.226 42.704-2.5458 22.347 16.67 39.304 25.156 40.719 8.486 1.4143 15.587-1.1169 27.75-2.5312s25.663-25.684 22.231-41.084c-3.4318-15.4-8.8376-38.259-33.911-39.808z"/>
<path id="path3689" fill="#2b512c" d="m326.44 292.81c0.38 1.74 0.71 3.41 0.75 5.35 0.1 5.13 1.69 27.46 1.69 27.46s-2.11 0.22-3.16-17.71c-0.44-7.55-1-12.13-1.53-15.44-2.86-0.58-10.43-1.79-10.85 12.62-0.48 16.97 14.87 23.98 24.54 23.69 7.69-0.23 7.45-6.53 7.78-14.16 0.63-14.82-14.91-20.51-19.22-21.81z"/>
<path id="path2459" filter="url(#filter3444)" transform="matrix(1.3437 0 0 1.6655 -95.099 -227.39)" fill="url(#linearGradient3258)" d="m281.45 359.5c-14.99-14.71 10.19-34.51 10.19-34.51s12.16-8.49 13.01 14.14-23.2 20.37-23.2 20.37z"/>
<path id="path3448" d="m303.09 389.41c0.42 0.04 0.38 0.4 0.98 1.2 0.66 0.88 0.64 2.63 1.72 2.85 1.14 0.23 1.71 0.14 2.19-0.03-0.19-0.44-0.43-0.87-0.57-1.29-0.28-0.87-0.41-1.63-0.37-2.03 0.02-0.19 0.1-0.27 0.22-0.25 0.11 0.03 0.27 0.17 0.5 0.47 0.19-0.47 0.75-1.88 0.56-1.4-0.5 1.25-0.53 1.28-0.31 1.12 0.1-0.08 0.26-0.2 0.47-0.25 0.2-0.04 0.44 0 0.68 0.25 0.32 0.32 0.75 0.71 1.13 1.19 0.12 0.15 0.17 0.36 0.28 0.53 0.02-0.01 0.01-0.02 0.03-0.03 0.69-0.35 3.92-3.51 2.71-4.11-4.95-2.46-14 1.46-10.22 1.78z"/>
<path id="path3974" opacity=".1015" d="m309.79 241.03c-1.53 4.63-23.94 12.84-21.47 12.16 10.94-3.01 6.37 10.93 11.74 11.64 7.13 0.95 21.69-10.01 15.19-3.72-6.36 6.15 4.74 0.6 6.12-4.74 1.39-5.35-0.53-12.36-7.04-17.18s-21.88-5.06-19.47-3.14c2.4 1.93 15.25 5.3 14.93 4.98z" clip-path="url(#clipPath4054)" transform="matrix(1.1956 0 0 1 -56.35 0)" filter="url(#filter4048)" fill="#fff"/>
<path id="path3684" fill="#8f975c" d="m320.48 273.96c-4.91-6.14-4.36-3.54-7.6-9.33-5.94-10.6-23.94-27.63-23.79-27.28-0.18-0.91 19.22 14.22 23.53 24.35 2.01 4.7 10.78 10.91 10.78 10.91l-2.92 1.35z"/>
<path id="path3715" fill="#8f975c" d="m306.65 274.78c-3.96-0.21-8.25 0.7-11.5 3.5l-59.75 44.15-0.12 0.24 61.31-42.7c2.7-2.33 6.4-3.19 9.94-3s6.87 1.48 8.62 3l1.44-1.69c-2.31-1.99-5.97-3.28-9.94-3.5z"/>
<path id="path3722" opacity=".21429" d="m234.23 322.86c15.98-11.91 32.03-23.84 37.26-34.84 3.32-6.98 4.57-11.04 10.71-11.56 15.96-1.36 22.89 4.47 12.07 13.13-10.82 8.65-18.87 1.05-24.28 8.36-5.41 7.3-6.28 37.35-35.76 24.91z" clip-path="url(#clipPath3961)" transform="translate(1.0571 -.18384)" filter="url(#filter3844)" fill="#fff"/>
<path id="path3848" opacity=".11278" d="m326.96 295.53c-4.35-23.49 26.31 15.22 22.74 27.12s-19.77 5.47-16.36 2.52c4.77-4.12 4.12-28.34-6.38-29.64z" clip-path="url(#clipPath3970)" filter="url(#filter3955)" fill="#fff"/>
</g>
</g>
<metadata>
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/>
<dc:publisher>
<cc:Agent rdf:about="http://openclipart.org/">
<dc:title>Openclipart</dc:title>
</cc:Agent>
</dc:publisher>
<dc:title>Stew pear with leafs</dc:title>
<dc:date>2013-08-10T13:57:37</dc:date>
<dc:description>An image of one stew pear with two leafs.</dc:description>
<dc:source>http://openclipart.org/detail/181747/stew-pear-with-leafs-by-rdevries-181747</dc:source>
<dc:creator>
<cc:Agent>
<dc:title>rdevries</dc:title>
</cc:Agent>
</dc:creator>
<dc:subject>
<rdf:Bag>
<rdf:li>enviroment</rdf:li>
<rdf:li>food</rdf:li>
<rdf:li>fruit</rdf:li>
<rdf:li>nature</rdf:li>
<rdf:li>pear</rdf:li>
<rdf:li>stew</rdf:li>
<rdf:li>stew pear</rdf:li>
<rdf:li>tree</rdf:li>
<rdf:li>vegatable</rdf:li>
</rdf:Bag>
</dc:subject>
</cc:Work>
<cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
</cc:License>
</rdf:RDF>
</metadata>
</svg>
<script type="text/javascript" src="zepto/zepto.js"></script>
<script type="text/javascript" src="hammerjs/hammer.min.js"></script>
<script type="text/javascript" src="hammerjs/plugins/hammer.fakemultitouch.js"></script>
<script type="text/javascript" src="bean/bean.min.js"></script>
<script src="/cumin/dist/cumin.js"></script>
<script src="/cumin/dist/math.min.js"></script>
<script src="/SoVeryGroovy/dist/SoVeryGroovy.js"></script>
<script type="text/javascript" src="hammerhead2.min.js"></script>
<script>
var id = 'the-pear';
var active = Hammerhead.create(id, {
// overflowSurplus: 0.8,
// resizeDelay: 200,
// maxZoom: 4,
// minZoom: 1,
// mousewheelSensitivity: 0.2,
mousewheelDelay: 100,
});
////////////////////////////////////////////
// DEBUG
////////////////////////////////////////////
Hammer.plugins.fakeMultitouch();
</script>
</body>
</html>