twreporter-react
Version:
React-Redux site for The Reporter Foundation in Taiwan
69 lines (61 loc) • 7.44 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Pattern</title>
<script src="dist/snap.svg-min.js"></script>
<style>
html, body {
height: 100%;
}
input {
width: 40px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu">
<style>
/* You can change these default styles any way you want */
#menu { display: block; margin: 0 auto; }
.item .sector { transition: all .1s linear; fill: #fff; stroke: #111; }
.item:hover .sector { fill: #eee; }
.menu-trigger { fill: #FF668A; }
.menu-trigger:hover { cursor: pointer; }
</style>
<g id="symbolsContainer"> <symbol class="icon icon-" id="icon-1" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text></symbol>
<symbol class="icon icon-" id="icon-2" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text></symbol>
<symbol class="icon icon-" id="icon-3" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">3</text></symbol>
<symbol class="icon icon-" id="icon-4" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">4</text></symbol>
<symbol class="icon icon-" id="icon-5" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">5</text></symbol>
<symbol class="icon icon-" id="icon-6" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">6</text></symbol>
<symbol class="icon icon-" id="icon-7" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">7</text></symbol>
<symbol class="icon icon-" id="icon-8" viewBox="0 0 35 35"><!--Replace the contents of this symbol with the content of your icon--><rect fill="transparent" stroke="#111" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">8</text></symbol>
</g>
<g id="itemsContainer" style="transform-origin: 0px 0px 0px; touch-action: none; -webkit-user-select: none;" transform="matrix(1,0,0,1,0,0)"> <a class="item" id="item-1" xlink:href="" xlink:title="" transform="rotate(0 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-1" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
<a class="item" id="item-2" xlink:href="" xlink:title="" transform="rotate(-45 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-2" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
<a class="item" id="item-3" xlink:href="" xlink:title="" transform="rotate(-90 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-3" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
<a class="item" id="item-4" xlink:href="" xlink:title="" transform="rotate(-135 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-4" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
<a class="item" id="item-5" xlink:href="" xlink:title="" transform="rotate(-180 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-5" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
<a class="item" id="item-6" xlink:href="" xlink:title="" transform="rotate(-225 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-6" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
<a class="item" id="item-7" xlink:href="" xlink:title="" transform="rotate(-270 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-7" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
<a class="item" id="item-8" xlink:href="" xlink:title="" transform="rotate(-315 250 250)"><path fill="transparent" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 z"></path><use xlink:href="#icon-8" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a>
</g>
<g id="trigger" class="trigger menu-trigger">
<circle cx="250" cy="250" r="30"></circle>
<!-- menu button label or icon goes here -->
</g>
</svg>
<script>
var seg = Snap("#item-2"),
originalTransform = seg.attr("transform").local;
seg.animate({
transform: originalTransform + "s.5,.5,250,250"
}, 1000, function () {
seg.animate({
transform: originalTransform
}, 1000);
});
</script>
</body>
</html>