snap.js/demos/snap-mascot/crocodile-2.html

327 lines
27 KiB
HTML
Raw Normal View History

2013-10-17 23:05:54 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="copyright" content="Copyright © 2013 Adobe Systems Incorporated. All rights reserved.
Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.">
<title>Snap</title>
<script src="../../dist/snap.svg-min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
window.onload = function () {
var diagramgroup = Snap.select("#crocodile-2"),
elements = {},
elementkeys = ['map', 'pie', 'eye'],
diagramtimer = [],
animating = {},
cleartimers = {},
i = 0, j = 0;
function show(key) {
if (animating[key]) return;
clearTimeout(cleartimers[key]);
animating[key] = true;
2013-10-18 02:51:49 +00:00
var element = elements[key],
x = element[0].getBBox().x,
offset = x/2 + 25;
2013-10-17 23:05:54 +00:00
element[0].attr({
2013-10-22 18:00:42 +00:00
transform: "t"+offset+",80s0.5,0.5,0,0"
2013-10-17 23:05:54 +00:00
});
setTimeout(function() {
2013-10-22 18:00:42 +00:00
element[0].animate({opacity:1,transform:"t0,0s1,1,0,0"}, 500, mina.elastic);
2013-10-17 23:05:54 +00:00
}, 50);
element[1].animate({opacity:0.25}, 400);
setTimeout(function(){animating[key] = false}, 550);
}
function showAll() {
j = 0;
function cycle() {
show(elementkeys[j]);
j++;
2013-10-18 02:51:49 +00:00
if (j < elementkeys.length) setTimeout(cycle, 200);
2013-10-17 23:05:54 +00:00
}
cycle();
}
function hoverIn() {
2013-10-18 02:51:49 +00:00
show( this.node.id.replace('hit-', '') );
2013-10-17 23:05:54 +00:00
}
for (i = 0; i < elementkeys.length; i++) {
var key = elementkeys[i],
diagram = diagramgroup.select("#diagram-" + key).attr({opacity:0}),
path = diagramgroup.select("#path-" + key).attr({opacity:0}),
hitarea = diagramgroup.select("#hit-" + key);
2013-10-18 02:51:49 +00:00
hitarea.hover(hoverIn);
2013-10-17 23:05:54 +00:00
elements[key] = [diagram, path];
}
diagramtimer = setTimeout(showAll, 250);
};
</script>
</head>
<body>
<svg version="1.1" id="crocodile-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="300px" viewBox="0 0 500 400" enable-background="new 0 0 500 400" xml:space="preserve">
<g id="croc">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-352.022" y1="820.576" x2="-352.022" y2="919.5" gradientTransform="matrix(-1 0 0 1 79 -537.5)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
<stop offset="0.7074" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="828.78,382 766.953,320.172 424.839,283.076 33.264,309.868 105.396,382 "/>
<polygon fill="#00A99D" points="717.49,299.563 639.175,287.198 597.957,274.832 581.47,274.832 527.886,258.345 499.033,250.101
424.839,237.735 363.012,237.735 330.037,245.979 272.331,250.101 255.844,245.979 218.747,254.223 198.138,254.223
169.285,262.466 169.02,262.528 168.718,262.466 150.365,258.345 132.031,258.345 120.695,270.535 49.639,291.805 39.562,289.472
33.264,295.441 33.264,309.413 37.204,309.346 43.291,316.495 72.885,318.333 91.381,320.172 137.62,319.364 153.768,319.364
161.041,320.172 210.503,320.172 198.138,332.538 239.356,332.538 247.6,328.416 251.722,320.172 276.453,320.172 325.915,324.294
381.312,320.337 375.377,324.294 363.012,332.538 416.596,332.538 424.839,328.416 430.335,320.172 441.327,320.172
503.154,316.05 532.007,320.172 614.437,324.294 635.066,324.294 672.15,320.172 766.953,320.172 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="346.524,258.345 330.037,245.979 363.012,237.735 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="717.49,299.563 721.612,311.929 655.663,303.685
597.957,291.319 569.104,295.441 494.911,274.832 499.033,250.101 527.886,258.345 581.47,274.832 597.957,274.832
639.175,287.198 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="499.033,250.101 433.083,250.101 424.839,237.735 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="527.885,258.345 494.911,274.832 433.083,250.101
363.012,237.735 424.839,237.735 499.033,250.101 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="597.957,274.832 597.957,291.319 581.47,274.832 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="527.885,258.345 569.104,295.441 581.47,274.832 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="527.885,258.345 494.911,274.832 437.205,262.466
420.718,274.832 346.524,258.345 272.331,250.101 330.037,245.979 363.012,237.735 424.839,237.735 499.033,250.101 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="433.083,250.101 420.718,274.832 346.524,258.345
309.428,278.954 272.331,262.466 255.844,245.979 272.331,250.101 330.037,245.979 363.012,237.735 424.839,237.735
499.033,250.101 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="272.331,250.101 272.331,262.466 218.747,254.223
255.844,245.979 "/>
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="120.695,270.534 123.127,285.425 49.638,291.805 "/>
<polyline opacity="0.2" fill="#FFFFFF" enable-background="new " points="49.638,291.805 62.343,298.568 120.695,270.534 "/>
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="120.695,270.534 120.695,270.534 123.127,285.425
132.031,258.345 "/>
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="150.365,258.345 123.127,285.425 120.695,270.534
132.031,258.345 "/>
<polygon fill="#FFFFFF" points="141.617,267.138 137.495,271.26 145.739,271.26 149.861,268.676 "/>
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="150.365,258.345 168.718,262.642 119.911,270.71
132.031,258.345 "/>
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="49.638,291.805 33.264,295.441 39.562,289.472 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="161.041,311.929 140.432,299.563 107.457,299.563
123.945,295.441 144.554,295.441 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="144.554,295.441 123.945,295.441 140.432,299.563 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="255.844,245.979 218.747,254.223 218.747,262.466
198.138,254.223 218.747,254.223 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="218.747,254.223 218.747,262.466 169.285,270.71
132.598,258.345 152.798,258.345 169.285,262.466 198.138,254.223 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="330.037,245.979 272.331,262.466 247.6,278.954
218.747,262.466 169.285,283.076 169.285,262.466 198.138,254.223 218.747,254.223 255.844,245.979 272.331,250.101 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="259.966,278.954 247.6,291.319 235.235,287.198 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="280.575,287.198 247.6,291.319 226.991,316.05
235.235,287.198 259.966,278.954 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="210.503,320.172 206.382,332.538 198.138,332.538 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="226.991,316.05 235.235,320.172 210.503,320.172 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="288.819,299.563 280.575,287.198 259.966,278.954
235.235,287.198 247.6,291.319 259.966,278.954 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="235.235,287.198 235.235,320.172 218.747,332.538
206.382,332.538 198.138,332.538 210.503,320.172 226.991,316.05 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="466.058,270.71 445.449,287.198 433.083,278.954 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="420.718,287.198 445.449,287.198 486.667,287.198
466.058,270.71 433.083,278.954 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="404.23,311.929 445.449,287.198 466.058,270.71
433.083,278.954 420.718,287.198 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="387.743,316.05 416.596,320.172 404.23,311.929 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="379.499,332.538 375.377,324.294 363.012,332.538 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="387.743,316.05 379.499,332.538 363.012,332.538
375.377,324.294 "/>
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="416.596,320.172 379.499,332.538 363.012,332.538
375.377,324.294 387.743,316.05 404.23,311.929 420.718,287.198 "/>
</g>
<polyline id="path-eye" opacity="0.25" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" enable-background="new " points="
121.714,247.568 66.427,193.472 66.427,149.497 "/>
<polyline id="path-pie" opacity="0.25" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" enable-background="new " points="
272.069,237.568 226.782,193.472 226.782,155.497 "/>
<polyline id="path-map" opacity="0.25" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" enable-background="new " points="
412.069,227.568 376.782,193.472 376.782,145.497 "/>
<g id="diagram-eye">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="238.8165" y1="619.2575" x2="320.3815" y2="700.8225" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.15"/>
<stop offset="0.9331" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_2_)" points="91.848,220.855 10.283,139.291 125.35,24.224 206.915,105.789 "/>
<rect x="10" y="24.507" fill="#00A99D" width="115.35" height="115.35"/>
<g>
<g>
<g>
<g>
<g>
<defs>
<rect id="SVGID_3_" x="10" y="24.507" width="115.35" height="115.35"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-288.3424" y1="535.6428" x2="-205.4552" y2="618.5298" gradientTransform="matrix(0.5689 0.1954 0.1954 0.5689 124.387 -168.8858)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
<stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<polygon clip-path="url(#SVGID_4_)" fill="url(#SVGID_5_)" points="106.408,162.927 44.068,100.445 96.512,68.965
149.381,121.833 "/>
</g>
</g>
</g>
</g>
</g>
<path fill="#60C6BA" d="M28.023,82.182c0,0,18.023-28.837,39.652-28.837s39.652,28.837,39.652,28.837s-18.023,28.837-39.652,28.837
S28.023,82.182,28.023,82.182z"/>
<g>
<circle fill="#9BEADF" cx="67.675" cy="82.182" r="24.031"/>
</g>
<path fill="#00A99D" d="M67.675,65.017c0,0,3.433,6.866,3.433,17.165s-3.433,17.165-3.433,17.165s-3.433-6.866-3.433-17.165
S67.675,65.017,67.675,65.017z"/>
<circle opacity="0.5" fill="#FFFFFF" enable-background="new " cx="57.921" cy="67.48" r="4.806"/>
<circle opacity="0.5" fill="#FFFFFF" enable-background="new " cx="50.712" cy="74.689" r="2.403"/>
</g>
<g id="diagram-pie">
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="400.0527" y1="624.0652" x2="473.0262" y2="697.0389" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
<stop offset="0.9" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_6_)" d="M272.351,43.267l-86.596,86.597l72.973,72.973l86.596-86.596L272.351,43.267z"/>
<circle fill="#60C6BA" cx="226.973" cy="83.304" r="61.828"/>
<path fill="#00A99D" d="M197.727,137.784c8.708,4.684,18.665,7.347,29.246,7.347c34.146,0,61.828-27.681,61.828-61.828
s-27.681-61.828-61.828-61.828v59.767L197.727,137.784z"/>
<g>
<g>
<g>
<g>
<g>
<defs>
<circle id="SVGID_7_" cx="226.973" cy="83.304" r="61.828"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="397.6839" y1="619.334" x2="444.7831" y2="666.433" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
<stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<path clip-path="url(#SVGID_8_)" fill="url(#SVGID_9_)" d="M258.189,50.329l-4.726,4.726
c6.853,6.853,11.092,16.321,11.092,26.779c0,20.916-16.955,37.871-37.871,37.871c-10.458,0-19.926-4.239-26.779-11.092
l-4.726,4.726l47.099,47.099l63.009-63.009L258.189,50.329z"/>
</g>
</g>
</g>
</g>
</g>
<path fill="#9BEADF" d="M226.973,83.304V21.476c-9.586,0-18.663,2.183-26.76,6.077L226.973,83.304z"/>
<circle fill="#60C6BA" cx="226.973" cy="83.304" r="45.34"/>
<path fill="#00A99D" d="M272.313,83.304c0-25.041-20.3-45.34-45.34-45.34v90.681C252.013,128.644,272.313,108.345,272.313,83.304z"
/>
<path fill="#9BEADF" d="M184.162,68.37l42.811,14.934v-45.34C207.166,37.963,190.337,50.669,184.162,68.37z"/>
</g>
<g id="diagram-map">
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="505.6437" y1="570.8013" x2="608.6902" y2="673.8477" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
<stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_10_)" points="387.104,186.934 330.897,130.727 334.644,33.301 432.069,29.554 488.276,85.761 "/>
<path fill="#60C6BA" d="M435.816,117.612c0,9.313-7.549,16.862-16.862,16.862h-78.69c-9.313,0-16.862-7.549-16.862-16.862v-78.69
c0-9.313,7.549-16.862,16.862-16.862h78.69c9.313,0,16.862,7.549,16.862,16.862V117.612z"/>
<g>
<path fill="#00A99D" d="M412.875,101.541c-0.173,1.625-0.483,1.955,1.618,1.847C414.559,102.355,414.023,101.464,412.875,101.541
C412.822,102.037,414.083,101.46,412.875,101.541z M425.12,118.865c0.869-1.597-3.166-1.674-3.927-1.848
c0.801-2.307-0.758-1.445-2.301-1.944c-0.981-0.317-2.751-2.095-3.72-2.83c-1.12-0.849-2.495-0.625-3.695-1.162
c-1.639-0.734-1.6-2.245-3.661-2.818c-1.15-0.319-4.17,0.105-4.623-0.454c-0.808-0.996-2.685-0.572-3.697-0.255
c-1.204,0.376-2.472,1.029-3.236,2.068c-0.416,0.566-1.26,2.358-1.168,2.545c0.776-0.172,8.085-5.264,8.085-2.542
c0,1.436,4.053,1.143,4.328,2.108c0.547,1.92,3.575,1.939,5.144,1.819c-0.561,2.424,2.1,3.612,3.927,4.158
c-0.159,0.952-1.499,1.761-1.156,2.771C417.782,120.22,423.477,120.739,425.12,118.865
C425.957,117.328,424.645,119.407,425.12,118.865z M395.784,80.974c2.509,0.069,1.327,2.668,3.205,3.107
c1.935,0.453-0.559,5.006,0.952,6.131c0.372-0.824,0.346-1.347,1.385-1.155c-0.047,1.523-1.881,2.833-0.23,4.158
c0.298,0.492,1.155,0.373,1.155,1.155c0,1.539,2.068,4.913,3.927,5.543c0.575-2.302,1.155-4.685,1.155-6.365
c0-1.209-0.534-4.18-1.617-4.722c0.234-1.168,0.235-0.913,0-1.617c-1.028-0.69-0.525-1.354-0.692-2.311
c-0.154-0.88-0.925-2.092-0.925-3.601c0-0.721-1.258-1.364-0.991-2.097c0.381-1.047,0.734-0.752,0.53-2.386
c-0.003,0.008,1.055-2.113,1.155-2.31c-0.512-1.531,2.031-2.269,2.31-3.927c1.698,0.566,1.654-1.618,2.541-1.618
c0.788,0,0.751-1.144,0.924-1.848c1.387,0.347,1.32-0.378,2.541-0.924c1.275-0.651,2.202-2.903,3.696-3.234
c-0.136-0.579-0.367-1.118-0.692-1.617c0.854,0.015,1.187-0.092,1.617-0.462c-0.15-0.595-0.834-1.288-1.155-1.617
c0.57,0.157,1.109,0.08,1.617-0.231c0.407,1.22,1.495,0.917,2.079,0.001c-0.588-0.451-0.413-0.236-0.923-0.924
c-2.706-0.516-1.321-0.662,0.231-1.616c-0.508-1.524-0.092-1.592-1.791-2.426c-0.48-0.236-0.99-1.303-1.212-1.731
c0.616-0.077,1.232-0.154,1.848-0.231c-0.155-0.74-0.927-1.502-1.387-1.848c0.231,0,0.463,0,0.694,0
c-0.272-0.855-1.376-1.159-1.617-2.079c0.231,0,0.461,0,0.692,0c-0.252-1.762,0.278-1.826,0.693-3.696
c0.709,0.076,0.709-0.463,0-1.617c1.639-0.328,0.885-0.792,2.541-0.462c0.214-0.626-0.062-0.534,0.463-0.923
c0.867,1.135-1.279,2.217-1.617,3.232c0.154,0,0.308,0,0.462,0c-1.142,0.548-1.308,3.691-0.692,4.158
c0.473,0.359,2.247-1.061,1.616,1.155c1.652-0.881,1.439-0.474,1.848-1.848c0.158-0.533,0.368-0.674,0.462-1.387
c0.103-0.818-1.031-2.294-0.924-3.927c0.761,0.339,1.825,1.343,2.773,0.923c1.198-0.58,0.322-2.588,1.848-2.079
c0.399-1.329,0.309-4.388-0.001-4.388c0.589,0,1.487-2.163,2.078-2.541c0.9-0.576,2.577-0.124,3.003-1.387
c1.198-0.054,2.052,0.555,2.54,0.231h0.231c0.197-0.515-0.382-0.574-0.462-0.924h0.231c0.151-0.347,0.186-0.377,0.231-0.923
c0.028,0.006,0.057,0.011,0.085,0.017c-2.69-5.74-8.502-9.725-15.261-9.725h-78.69c-9.313,0-16.862,7.549-16.862,16.862v61.411
c0.458,0.918,1.198,2.159,1.477,2.364c1.681,0.128,2.141,3.274,3.465,4.157c0.577,1.067,0.775,2.05,1.617,3.233
c1.367,0.688,2.337,7.623,1.154,7.623c-1.059,0,1.12,6.006,3.004,6.006c0.52,0,2.246,1.595,2.77,2.077
c0.742,0.577,0.698,1.476,1.617,2.08c0.316,0.204,1.355,0.566,1.847,0.693c3.485,0.901,6.774,5.433,10.857,4.619
c0.077,0.231,0.154,0.462,0.231,0.693c0.995,0.053,0.783,0.142,1.386,0.462v0.134h29.595c0.209-0.462-0.014-0.922,0.199-1.524
c0.298-0.276,1.803-5.585-0.229-5.775c0.296-0.644,0.87-1.52,1.155-1.848c0.112,0.498,0.035,0.96-0.231,1.386
c2.802,0.691,0.126-0.015,0.924,0.692c0.154,0,0.307,0,0.461,0c-0.322-2.284,1.188-4.774,0.654-6.635
c-0.335-1.168,1.194-2.637,1.194-3.528c0-1.734,0.816-2.275-0.924-3.233c-0.694-0.382-1.948-0.727-3.234,0
c-2.284,3.036-5.775,0.71-5.775,6.072c0,1.772-2.141,5.815-3.927,6.167c-0.333-0.267-0.576-0.568-0.693-0.923
c-0.542,0.181-1.804,0.217-2.238,0.526c-0.244,0.173-0.924,1.288-0.996,1.321c-0.92-0.453-2.549,0.335-3.552,0.408
c-1.738,0.126-1.403-2.025-3.031-2.025c-2.078,0-1.885-0.493-2.893-2.494c-0.721-1.432-0.569-2.181-2.075-3.05
c-0.257-0.257-0.254-0.6-0.461-0.924c-0.567-0.888-1.997-2.877-2.079-4.156c-0.198,0.127-0.568,0.36-0.692,0.462
c0.316-1.902,0.693-4.139,0.692-5.775c0-0.996-0.947-2.768-0.678-3.571c0.325-0.972-0.078-2.736-0.015-3.357
c-0.317-1.908,0.494-1.278,0.692-3.004c0.212-0.369,1.095-0.273,1.467-1.403c0.323-0.98,0.135-0.973-0.544-1.138
c0.512-1.53-0.621-1.696-0.924-3.002c-0.274-1.181-0.879-3.683,0.461-3.234c0.399-1.043,0.425-3.002,1.849-3.002
c1.109,0,1.63-0.648,1.385-1.617c1.057-0.677,2.649-0.532,3.464-1.155c0.065-1.455,1.375-1.531,0.925-3.003
c0.285,0.095,1.319,0.703,1.385,0.693c0.705-0.106,2.3-0.59,2.079-1.617c0.962,0.485,1.113-0.14,1.848,0
c0.005,0,2.327,0.773,1.848,0.693c0.46,0.104,0.876-0.271,1.617-0.463c-0.211,1.814,1.416,1.576,2.541,0.923
c0,0.154,0,0.308,0,0.462c-2.585,1.273,2.05,1.263,2.54,1.385c-0.253-0.934-0.693-1.484,0.231-2.309
c0.628,0.173,3.465,2.134,3.465,2.308c0,0.726,0.493,0.553,0.924,0.232c-0.194-0.973-2.545-2.14-0.23-2.541
c-0.047-0.174-0.433-1.023-0.693-0.925c-1.103,0.498-0.558-0.805-2.079-0.231c-0.159-0.163-0.461-0.61-0.692-0.923
c0.769-0.104,1.539-0.104,2.31,0c-0.053-0.479,0.108-0.734,0.484-0.766c0.406-0.116,1.422-0.167,1.364-0.159
c0.818-0.111,2.554,1.765,2.309-0.462c0.154,0,0.308,0,0.462,0c0.353,2.143,1.659,1.379,2.078,0.001
c0.584,1.551,1.801,0.262,3.004,0.462c-0.496,1.646,1.971,1.348,2.541,2.772c0.799,0.348,1.109,0.703,2.078,0.461
c-0.381,0.052,2.847-1.321,2.667-0.991C396.719,81.347,395.595,81.32,395.784,80.974
C398.309,81.043,395.457,81.572,395.784,80.974z M428.351,115.631c0.024-0.304-0.19-0.311-0.461-0.231
C428.152,115.658,427.888,115.498,428.351,115.631z M399.478,112.396c0.78,0.312,0.3,1.138-0.462,1.618
C402.647,115.73,399.785,108.812,399.478,112.396z M434.824,120.714c-0.447-0.188-1.037,0.024-1.386,0.462
c-1.893,0.693-2.513-1.081-4.39-0.694c1.479,1.363,0.753,1.063,1.385,2.772c0.088,0.149,1.346,2.124,0.709,2.146
c-0.981,0.035-2.859-0.336-3.845-0.597c-1.739-0.46-3.358,1.223-1.391,1.38c2.47,0.198,4.858,0.304,7.367,0.304
c1.102-1.774,1.884-3.761,2.265-5.893C435.299,120.634,435.062,120.674,434.824,120.714
C434.377,120.526,435.062,120.674,434.824,120.714z M418.188,125.793c-0.611-1.214-4.706-1.446-5.446-0.186
c-0.362,0.616,5.189,3.353,6.758,1.667C419.879,126.867,418.13,125.748,418.188,125.793
C417.857,125.135,418.525,126.058,418.188,125.793z"/>
</g>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="548.6378" y1="585.9402" x2="596.8632" y2="634.1658" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
<stop offset="0.7305" style="stop-color:#000000;stop-opacity:0.0245"/>
<stop offset="0.9282" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<polygon fill="url(#SVGID_11_)" points="413.91,108.619 377.844,71.522 389.591,36.487 434.519,83.888 "/>
<path fill="#9BEADF" d="M391.297,48.623h-0.169c0.508-1.435,0.799-2.971,0.799-4.58c0-7.588-6.151-13.739-13.739-13.739
s-13.739,6.151-13.739,13.739c0,1.608,0.291,3.145,0.799,4.58h-0.169l0.504,0.88c0.395,0.911,0.892,1.764,1.466,2.56l11.14,19.459
l11.14-19.459c0.574-0.796,1.071-1.649,1.466-2.56L391.297,48.623z M373.607,44.043c0-2.529,2.051-4.58,4.58-4.58
s4.58,2.05,4.58,4.58c0,2.529-2.051,4.58-4.58,4.58S373.607,46.572,373.607,44.043z"/>
</g>
<rect id="hit-eye" x="6.5" y="22.061" opacity="0" fill="#FF0000" width="122.667" height="123.071"/>
<rect id="hit-pie" x="165.658" y="22.061" opacity="0" fill="#FF0000" width="122.667" height="123.071"/>
<rect id="hit-map" x="316.855" y="22.061" opacity="0" fill="#FF0000" width="122.667" height="123.071"/>
</svg>
</body>
</html>