zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added crocodile demo-2

master
Yohei Shimomae 2013-10-17 16:05:54 -07:00
parent 0168ffde32
commit a1906ac8e5
6 changed files with 594 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
demos/animated-crocodile/index.html
View File

@ -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>

164
demos/snap-mascot/crocodile-1.html Normal file
View File

@ -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>

343
demos/snap-mascot/crocodile-2.html Normal file
View File

@ -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>

36
demos/snap-mascot/index.html Normal file
View File

@ -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>

56
demos/animated-snap-logo/index.html → demos/snap-mascot/snap-logo.html
View File

@ -15,10 +15,10 @@
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 Logo</title>
<title>Snap</title>
<script src="../../dist/snap.svg-min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
window.onload = function () {
var logo = Snap.select("#snap-logo"),
@ -54,55 +54,61 @@
setTimeout(function () {
logo.attr({
display: "block"
display: "inline"
});
animateEach();
}, 500);
};
</script>
</head>
<body>
<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="250px" height="250px" style="display:none">
width="250px" height="250px">
<defs>
<linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse"
x1="196" y1="485.6281" x2="196" y2="732.5812"
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
<stop offset="0" stop-color="#002E3B"/>
<stop offset="1" stop-color="#002639"/>
<stop offset="0" stop-color="#002E3B"/>
<stop offset="1" stop-color="#002639"/>
</linearGradient>
<radialGradient id="right_2_" cx="146.3819" cy="449.8799"
r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#00BC85"/>
<stop offset="1" stop-color="#149D91"/>
<stop offset="0" stop-color="#00BC85"/>
<stop offset="1" stop-color="#149D91"/>
</radialGradient>
<radialGradient id="left_1_" cx="139.0562" cy="454.2622"
r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#004473"/>
<stop offset="1" stop-color="#00345F"/>
<stop offset="0" stop-color="#004473"/>
<stop offset="1" stop-color="#00345F"/>
</radialGradient>
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse"
x1="195.922" y1="486.8864" x2="195.922" y2="732.5903"
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
<stop offset="0" stop-color="#002E3B"/>
<stop offset="1" stop-color="#002639"/>
<stop offset="0" stop-color="#002E3B"/>
<stop offset="1" stop-color="#002639"/>
</linearGradient>
</defs>
<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
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_)"
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 "/>
<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
51.096,38.088 51.096,138.597 "/>
<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
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
</defs>
<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
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_)"
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 "/>
<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
51.096,38.088 51.096,138.597 "/>
<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
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
</svg>
</body>
</html>

20
demos/snap-mascot/style.css Normal file
View File

@ -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;
}