added crocodile demo-2
Yohei Shimomae
parent
0168ffde32
commit
a1906ac8e5
|
|
@ -1,197 +0,0 @@
|
||||||
<!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>
|
|
||||||
<script>
|
|
||||||
window.onload = function () {
|
|
||||||
|
|
||||||
var croc = Snap.select("#crocodile"),
|
|
||||||
head = croc.select("#upper-head"),
|
|
||||||
jaw = croc.select("#upper-jaw"),
|
|
||||||
symbol = croc.select("#symbol"),
|
|
||||||
timer;
|
|
||||||
|
|
||||||
var pivots = [
|
|
||||||
[44, 147],
|
|
||||||
[92, 126]
|
|
||||||
];
|
|
||||||
|
|
||||||
function close() {
|
|
||||||
clearTimeout(timer);
|
|
||||||
|
|
||||||
head.animate({
|
|
||||||
transform: "r" + [8, pivots[0]]
|
|
||||||
}, 500, mina.backin);
|
|
||||||
|
|
||||||
jaw.animate({
|
|
||||||
transform: "r" + [37, pivots[1]]
|
|
||||||
}, 500, mina.backin);
|
|
||||||
|
|
||||||
timer = setTimeout(function () {
|
|
||||||
symbol.animate({
|
|
||||||
transform: "t-70,40r40"
|
|
||||||
}, 100);
|
|
||||||
}, 400);
|
|
||||||
}
|
|
||||||
|
|
||||||
function open() {
|
|
||||||
clearTimeout(timer);
|
|
||||||
|
|
||||||
head.animate({
|
|
||||||
transform: "r" + [0, pivots[0]]
|
|
||||||
}, 700, mina.elastic);
|
|
||||||
|
|
||||||
jaw.animate({
|
|
||||||
transform: "r" + [0, pivots[1]]
|
|
||||||
}, 700, mina.elastic);
|
|
||||||
|
|
||||||
symbol.animate({
|
|
||||||
transform: "t0,0r0"
|
|
||||||
}, 500, mina.elastic);
|
|
||||||
}
|
|
||||||
|
|
||||||
timer = setTimeout(close, 500);
|
|
||||||
|
|
||||||
croc.hover(open,
|
|
||||||
function () {
|
|
||||||
timer = setTimeout(close, 200);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<svg version="1.1" id="crocodile" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
width="260px" height="250px">
|
|
||||||
<g>
|
|
||||||
<path id="symbol" opacity="0.2" fill="#848383" d="M185.631,140.915
|
|
||||||
l5.02,10.86l8.145-3.765l-5.02-10.86L185.631,140.915zM246.828,109.341
|
|
||||||
l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
|
|
||||||
<g id="head">
|
|
||||||
<polygon fill="#09B39C" points="44.613,146.703 26.665,140.721
|
|
||||||
8.718,146.703 -0.252,146.703 -0.252,206.523 44.613,206.523
|
|
||||||
119.387,206.523 119.387,167.64"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="-0.252,146.703
|
|
||||||
11.712,170.631 26.667,140.721 8.721,146.703"/>
|
|
||||||
<polyline opacity="0.2" fill="#FFFFFF" points="8.718,146.703
|
|
||||||
20.685,152.685 26.665,140.721"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703
|
|
||||||
53.613,163.667 17.694,143.712 26.667,140.721"/>
|
|
||||||
</g>
|
|
||||||
<g id="upper-head">
|
|
||||||
<g id="upper-jaw">
|
|
||||||
<g>
|
|
||||||
<path id="upper-teeth" fill="#E0CAB1" d="M151.174,
|
|
||||||
129.382l14.913,6.086l-6.602-14.691L151.174,129.382z
|
|
||||||
M138.707,142.292l14.914,6.086l-6.603-14.692
|
|
||||||
L138.707,142.292zM126.241,155.201l14.913,6.086l-6.602
|
|
||||||
-14.692L126.241,155.201zM163.64,116.474l14.913,6.085
|
|
||||||
l-6.603-14.692L163.64,116.474zM176.106,103.564
|
|
||||||
l14.913,6.086l-6.602-14.692L176.106,103.564z
|
|
||||||
M188.572,90.655l14.914,6.085l-6.602-14.691
|
|
||||||
L188.572,90.655zM201.039,77.746l14.913,6.085
|
|
||||||
L209.35,69.14L201.039,77.746z M221.816,56.23
|
|
||||||
l-8.311,8.607l14.913,6.085L221.816,56.23z"/>
|
|
||||||
<path opacity="0.4" fill="#FFFFFF" d="M155.329,125.08
|
|
||||||
l10.758,10.388l-6.602-14.691L155.329,125.08z
|
|
||||||
M142.863,137.989l10.758,10.389l-6.603-14.692L142.863,
|
|
||||||
137.989zM130.396,150.898l10.758,10.389l-6.602-14.692
|
|
||||||
L130.396,150.898zM167.796,112.171l10.757,10.388
|
|
||||||
l-6.603-14.692L167.796,112.171zM180.261,99.261
|
|
||||||
l10.758,10.389l-6.602-14.692L180.261,99.261zM192.728,
|
|
||||||
86.352l10.758,10.388l-6.602-14.691L192.728,86.352z
|
|
||||||
M205.195,73.443l10.757,10.388L209.35,69.14L205.195,
|
|
||||||
73.443zM221.816,56.23l-4.156,4.303l10.758,10.389
|
|
||||||
L221.816,56.23z"/>
|
|
||||||
</g>
|
|
||||||
<polygon fill="#09B39C" points="215.135,33 200.18,33
|
|
||||||
197.189,46.955 92,125 88.355,171.706 106.387,180.64
|
|
||||||
236.072,47.955"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="92,125
|
|
||||||
97.423,150.703 197.189,46.955"/>
|
|
||||||
<polyline opacity="0.2" fill="#FFFFFF" points="197.189,
|
|
||||||
46.955185.207,76.892 92,125"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="200.18,33
|
|
||||||
236.072,47.955 215.135,33"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="197.189,
|
|
||||||
46.955 215.135,33 200.18,33"/>
|
|
||||||
</g>
|
|
||||||
<polygon fill="#09B39C" points="92,125 65.55,126.757
|
|
||||||
44.613,146.703 44.613,176.523 119.387,176.523 119.387,167.64
|
|
||||||
107.897,156.377"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="92,125
|
|
||||||
102.423,145.703 65.55,126.757"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703
|
|
||||||
102.423,145.703 92,125 65.55,126.757"/>
|
|
||||||
<polygon id="eye_1_" fill="#FFFFFF" points="71.532,145.703
|
|
||||||
83.495,139.721 95.459,145.703 80.505,154.676"/>
|
|
||||||
<polygon opacity="0.2" fill="#FFFFFF" points="44.613,146.703
|
|
||||||
44.613,158.667 92,125 65.55,126.757"/>
|
|
||||||
</g>
|
|
||||||
<g id="bottom-jaw">
|
|
||||||
<g>
|
|
||||||
<polygon fill="#E0CAB1" points="152.531,185.586
|
|
||||||
158.513,170.631 164.495,185.586"/>
|
|
||||||
<polygon opacity="0.4" fill="#FFFFFF" points="164.495,
|
|
||||||
185.586 158.513,170.631 158.513,185.586"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<polygon fill="#E0CAB1" points="170.477,185.586
|
|
||||||
176.459,170.631 182.441,185.586"/>
|
|
||||||
<polygon opacity="0.4" fill="#FFFFFF" points="182.441,
|
|
||||||
185.586 176.459,170.631 176.459,185.586"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<polygon fill="#E0CAB1" points="188.423,185.586
|
|
||||||
194.405,170.631 200.387,185.586"/>
|
|
||||||
<polygon opacity="0.4" fill="#FFFFFF" points="200.387,
|
|
||||||
185.586 194.405,170.631 194.405,185.586"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<polygon fill="#E0CAB1" points="206.369,185.586
|
|
||||||
212.351,170.631 218.333,185.586"/>
|
|
||||||
<polygon opacity="0.4" fill="#FFFFFF" points="218.333,
|
|
||||||
185.586 212.351,170.631 212.351,185.586"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<polygon fill="#E0CAB1" points="224.315,185.586
|
|
||||||
230.297,170.631 236.279,185.586"/>
|
|
||||||
<polygon opacity="0.4" fill="#FFFFFF" points="236.279,
|
|
||||||
185.586 230.297,170.631 230.297,185.586"/>
|
|
||||||
</g>
|
|
||||||
<polygon fill="#E0CAB1" points="148.54,179.604 119.596,167.64
|
|
||||||
109.657,167.64 103.675,167.64 91.711,167.64 79.747,179.604
|
|
||||||
-4,200.541 -4,206.523 79.747,206.523 156.522,206.523
|
|
||||||
187.432,198.55 235.288,189.577 244.252,179.604"/>
|
|
||||||
<polygon opacity="0.3" fill="#FFFFFF" points="119.594,167.64
|
|
||||||
91.711,167.64 79.747,179.604"/>
|
|
||||||
<polygon opacity="0.3" fill="#FFFFFF" points="91.711,167.64
|
|
||||||
79.747,206.523 79.747,179.604"/>
|
|
||||||
<polygon opacity="0.1" fill="#534741" points="235.288,189.577
|
|
||||||
160.513,195.559 115.639,206.523 156.522,206.523
|
|
||||||
187.432,198.55"/>
|
|
||||||
<polygon opacity="0.1" fill="#534741" points="187.432,198.55
|
|
||||||
160.513,195.559 156.522,206.523 156.522,206.523"/>
|
|
||||||
<polygon opacity="0.3" fill="#FFFFFF" points="-4,200.541
|
|
||||||
46.847,194.559 79.747,179.604"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
<!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>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="../../dist/snap.svg-min.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function () {
|
||||||
|
|
||||||
|
var croc = Snap.select("#crocodile"),
|
||||||
|
head = croc.select("#upper-head"),
|
||||||
|
jaw = croc.select("#upper-jaw"),
|
||||||
|
symbol = croc.select("#symbol"),
|
||||||
|
timer;
|
||||||
|
|
||||||
|
var pivots = [
|
||||||
|
[44, 147],
|
||||||
|
[92, 126]
|
||||||
|
];
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
clearTimeout(timer);
|
||||||
|
|
||||||
|
head.animate({
|
||||||
|
transform: "r" + [8, pivots[0]]
|
||||||
|
}, 500, mina.backin);
|
||||||
|
|
||||||
|
jaw.animate({
|
||||||
|
transform: "r" + [37, pivots[1]]
|
||||||
|
}, 500, mina.backin);
|
||||||
|
|
||||||
|
timer = setTimeout(function () {
|
||||||
|
symbol.animate({
|
||||||
|
transform: "t-70,40r40"
|
||||||
|
}, 100);
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
function open() {
|
||||||
|
clearTimeout(timer);
|
||||||
|
|
||||||
|
head.animate({
|
||||||
|
transform: "r" + [0, pivots[0]]
|
||||||
|
}, 700, mina.elastic);
|
||||||
|
|
||||||
|
jaw.animate({
|
||||||
|
transform: "r" + [0, pivots[1]]
|
||||||
|
}, 700, mina.elastic);
|
||||||
|
|
||||||
|
symbol.animate({
|
||||||
|
transform: "t0,0r0"
|
||||||
|
}, 500, mina.elastic);
|
||||||
|
}
|
||||||
|
|
||||||
|
timer = setTimeout(close, 50);
|
||||||
|
|
||||||
|
croc.hover(open,
|
||||||
|
function () {
|
||||||
|
timer = setTimeout(close, 200);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<svg version="1.1" id="crocodile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="312px" height="300px" viewBox="0 0 260 250" enable-background="new 0 0 260 250" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path id="symbol" opacity="0.2" fill="#848383" enable-background="new " d="M185.631,140.915l5.02,10.86l8.145-3.765
|
||||||
|
l-5.02-10.86L185.631,140.915z M246.828,109.341l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
|
||||||
|
<g id="head">
|
||||||
|
<polygon fill="#09B39C" points="44.613,146.703 26.665,140.721 8.718,146.703 -0.252,146.703 -0.252,206.523 44.613,206.523
|
||||||
|
119.387,206.523 119.387,167.64 "/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="-0.252,146.703 11.712,170.631 26.667,140.721
|
||||||
|
8.721,146.703 "/>
|
||||||
|
<polyline opacity="0.2" fill="#FFFFFF" enable-background="new " points="8.718,146.703 20.685,152.685 26.665,140.721 "/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="44.613,146.703 53.613,163.667 17.694,143.712
|
||||||
|
26.667,140.721 "/>
|
||||||
|
</g>
|
||||||
|
<g id="upper-head">
|
||||||
|
<g id="upper-jaw">
|
||||||
|
<g>
|
||||||
|
<path id="upper-teeth" fill="#E0CAB1" d="M151.174,129.382l14.913,6.086l-6.602-14.691L151.174,129.382z M138.707,142.292
|
||||||
|
l14.914,6.086l-6.603-14.692L138.707,142.292z M126.241,155.201l14.913,6.086l-6.602-14.692L126.241,155.201z M163.64,116.474
|
||||||
|
l14.913,6.085l-6.603-14.692L163.64,116.474z M176.106,103.564l14.913,6.086l-6.602-14.692L176.106,103.564z M188.572,90.655
|
||||||
|
l14.914,6.085l-6.602-14.691L188.572,90.655z M201.039,77.746l14.913,6.085L209.35,69.14L201.039,77.746z M221.816,56.23
|
||||||
|
l-8.311,8.607l14.913,6.085L221.816,56.23z"/>
|
||||||
|
<path opacity="0.4" fill="#FFFFFF" enable-background="new " d="M155.329,125.08l10.758,10.388l-6.602-14.691L155.329,125.08
|
||||||
|
z M142.863,137.989l10.758,10.389l-6.603-14.692L142.863,137.989z M130.396,150.898l10.758,10.389l-6.602-14.692
|
||||||
|
L130.396,150.898z M167.796,112.171l10.757,10.388l-6.603-14.692L167.796,112.171z M180.261,99.261l10.758,10.389l-6.602-14.692
|
||||||
|
L180.261,99.261z M192.728,86.352l10.758,10.388l-6.602-14.691L192.728,86.352z M205.195,73.443l10.757,10.388L209.35,69.14
|
||||||
|
L205.195,73.443z M221.816,56.23l-4.156,4.303l10.758,10.389L221.816,56.23z"/>
|
||||||
|
</g>
|
||||||
|
<polygon fill="#09B39C" points="215.135,33 200.18,33 197.189,46.955 92,125 88.355,171.706 106.387,180.64 236.072,47.955
|
||||||
|
"/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="92,125 97.423,150.703 197.189,46.955 "/>
|
||||||
|
<line opacity="0.2" fill="#FFFFFF" enable-background="new " x1="197.189" y1="46.955" x2="92" y2="125"/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="200.18,33 236.072,47.955 215.135,33 "/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="197.189,46.955 215.135,33 200.18,33 "/>
|
||||||
|
</g>
|
||||||
|
<polygon fill="#09B39C" points="92,125 65.55,126.757 44.613,146.703 44.613,176.523 119.387,176.523 119.387,167.64
|
||||||
|
107.897,156.377 "/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="92,125 102.423,145.703 65.55,126.757 "/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="44.613,146.703 102.423,145.703 92,125 65.55,126.757
|
||||||
|
"/>
|
||||||
|
<polygon id="eye_1_" fill="#FFFFFF" points="71.532,145.703 83.495,139.721 95.459,145.703 80.505,154.676 "/>
|
||||||
|
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="44.613,146.703 44.613,158.667 92,125 65.55,126.757
|
||||||
|
"/>
|
||||||
|
</g>
|
||||||
|
<g id="bottom-jaw">
|
||||||
|
<g>
|
||||||
|
<polygon fill="#E0CAB1" points="152.531,185.586 158.513,170.631 164.495,185.586 "/>
|
||||||
|
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="164.495,185.586 158.513,170.631 158.513,185.586
|
||||||
|
"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<polygon fill="#E0CAB1" points="170.477,185.586 176.459,170.631 182.441,185.586 "/>
|
||||||
|
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="182.441,185.586 176.459,170.631 176.459,185.586
|
||||||
|
"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<polygon fill="#E0CAB1" points="188.423,185.586 194.405,170.631 200.387,185.586 "/>
|
||||||
|
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="200.387,185.586 194.405,170.631 194.405,185.586
|
||||||
|
"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<polygon fill="#E0CAB1" points="206.369,185.586 212.351,170.631 218.333,185.586 "/>
|
||||||
|
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="218.333,185.586 212.351,170.631 212.351,185.586
|
||||||
|
"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<polygon fill="#E0CAB1" points="224.315,185.586 230.297,170.631 236.279,185.586 "/>
|
||||||
|
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="236.279,185.586 230.297,170.631 230.297,185.586
|
||||||
|
"/>
|
||||||
|
</g>
|
||||||
|
<polygon fill="#E0CAB1" points="148.54,179.604 119.596,167.64 109.657,167.64 103.675,167.64 91.711,167.64 79.747,179.604
|
||||||
|
0,200.541 0,206.523 79.747,206.523 156.522,206.523 187.432,198.55 235.288,189.577 244.252,179.604 "/>
|
||||||
|
<polygon opacity="0.3" fill="#FFFFFF" enable-background="new " points="119.594,167.64 91.711,167.64 79.747,179.604 "/>
|
||||||
|
<polygon opacity="0.3" fill="#FFFFFF" enable-background="new " points="91.711,167.64 79.747,206.523 79.747,179.604 "/>
|
||||||
|
<polygon opacity="0.1" fill="#534741" enable-background="new " points="235.288,189.577 160.513,195.559 115.639,206.523
|
||||||
|
156.522,206.523 187.432,198.55 "/>
|
||||||
|
<polygon opacity="0.1" fill="#534741" enable-background="new " points="187.432,198.55 160.513,195.559 156.522,206.523
|
||||||
|
156.522,206.523 "/>
|
||||||
|
<polygon opacity="0.3" fill="#FFFFFF" enable-background="new " points="0,200.541 46.847,194.559 79.747,179.604 "/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,343 @@
|
||||||
|
<!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;
|
||||||
|
var element = elements[key];
|
||||||
|
element[0].attr({
|
||||||
|
opacity: 0,
|
||||||
|
transform: "translate(50,50) scale(0.5, 0.5)"
|
||||||
|
});
|
||||||
|
setTimeout(function() {
|
||||||
|
element[0].animate({opacity:1,transform:""}, 500, mina.elastic);
|
||||||
|
}, 50);
|
||||||
|
element[1].animate({opacity:0.25}, 400);
|
||||||
|
setTimeout(function(){animating[key] = false}, 550);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showAll() {
|
||||||
|
j = 0;
|
||||||
|
function cycle() {
|
||||||
|
show(elementkeys[j]);
|
||||||
|
j++;
|
||||||
|
if (j < elementkeys.length) setTimeout(cycle, 300);
|
||||||
|
}
|
||||||
|
cycle();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide(key) {
|
||||||
|
if (animating[key]) return;
|
||||||
|
animating[key] = true;
|
||||||
|
var element = elements[key];
|
||||||
|
element[0].animate({opacity:0}, 200);
|
||||||
|
element[1].animate({opacity:0}, 200);
|
||||||
|
setTimeout(function(){animating[key] = false}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hoverIn() {
|
||||||
|
hide( this.node.id.replace('hit-', '') );
|
||||||
|
}
|
||||||
|
|
||||||
|
function hoverOut() {
|
||||||
|
var key = this.node.id.replace('hit-', '');
|
||||||
|
show(key);
|
||||||
|
cleartimers[key] = setTimeout(function() {
|
||||||
|
show( key );
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
||||||
|
hitarea.hover(hoverIn, hoverOut);
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!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">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<iframe src="crocodile-1.html" ></iframe>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<iframe src="snap-logo.html" ></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
<iframe src="crocodile-2.html" ></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -15,10 +15,10 @@
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.">
|
limitations under the License.">
|
||||||
<title>Snap Logo</title>
|
<title>Snap</title>
|
||||||
<script src="../../dist/snap.svg-min.js"></script>
|
<script src="../../dist/snap.svg-min.js"></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
|
|
||||||
var logo = Snap.select("#snap-logo"),
|
var logo = Snap.select("#snap-logo"),
|
||||||
|
|
@ -54,55 +54,61 @@
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
logo.attr({
|
logo.attr({
|
||||||
display: "block"
|
display: "inline"
|
||||||
});
|
});
|
||||||
animateEach();
|
animateEach();
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg"
|
<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
width="250px" height="250px" style="display:none">
|
width="250px" height="250px">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse"
|
<linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse"
|
||||||
x1="196" y1="485.6281" x2="196" y2="732.5812"
|
x1="196" y1="485.6281" x2="196" y2="732.5812"
|
||||||
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
||||||
<stop offset="0" stop-color="#002E3B"/>
|
<stop offset="0" stop-color="#002E3B"/>
|
||||||
<stop offset="1" stop-color="#002639"/>
|
<stop offset="1" stop-color="#002639"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<radialGradient id="right_2_" cx="146.3819" cy="449.8799"
|
<radialGradient id="right_2_" cx="146.3819" cy="449.8799"
|
||||||
r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
||||||
gradientUnits="userSpaceOnUse">
|
gradientUnits="userSpaceOnUse">
|
||||||
<stop offset="0" stop-color="#00BC85"/>
|
<stop offset="0" stop-color="#00BC85"/>
|
||||||
<stop offset="1" stop-color="#149D91"/>
|
<stop offset="1" stop-color="#149D91"/>
|
||||||
</radialGradient>
|
</radialGradient>
|
||||||
<radialGradient id="left_1_" cx="139.0562" cy="454.2622"
|
<radialGradient id="left_1_" cx="139.0562" cy="454.2622"
|
||||||
r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
||||||
gradientUnits="userSpaceOnUse">
|
gradientUnits="userSpaceOnUse">
|
||||||
<stop offset="0" stop-color="#004473"/>
|
<stop offset="0" stop-color="#004473"/>
|
||||||
<stop offset="1" stop-color="#00345F"/>
|
<stop offset="1" stop-color="#00345F"/>
|
||||||
</radialGradient>
|
</radialGradient>
|
||||||
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse"
|
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse"
|
||||||
x1="195.922" y1="486.8864" x2="195.922" y2="732.5903"
|
x1="195.922" y1="486.8864" x2="195.922" y2="732.5903"
|
||||||
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
||||||
<stop offset="0" stop-color="#002E3B"/>
|
<stop offset="0" stop-color="#002E3B"/>
|
||||||
<stop offset="1" stop-color="#002639"/>
|
<stop offset="1" stop-color="#002639"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)"
|
<polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)"
|
||||||
points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24
|
points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24
|
||||||
51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
|
51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
|
||||||
<polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)"
|
<polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)"
|
||||||
points="198.996,138.632 198.996,38.123 165.596,58.995 165.596,117.758
|
points="198.996,138.632 198.996,38.123 165.596,58.995 165.596,117.758
|
||||||
165.596,117.758 165.596,117.758 51.091,174.781 51.091,211.945 "/>
|
165.596,117.758 165.596,117.758 51.091,174.781 51.091,211.945 "/>
|
||||||
<polygon id="left" fill="url(#left_1_)" stroke="url(#left_1_)"
|
<polygon id="left" fill="url(#left_1_)" stroke="url(#left_1_)"
|
||||||
points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96
|
points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96
|
||||||
51.096,38.088 51.096,138.597 "/>
|
51.096,38.088 51.096,138.597 "/>
|
||||||
<polygon id="top" fill="url(#top_1_)" stroke="url(#top_1_)"
|
<polygon id="top" fill="url(#top_1_)" stroke="url(#top_1_)"
|
||||||
points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892
|
points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892
|
||||||
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
|
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
html {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #eee;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
|
height: 300px;
|
||||||
|
width: 400px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue