source: main/trunk/model-sites-dev/von-sparql/js/paper/examples/SVG Import/MoreGradients.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface
File size: 5.6 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>Gradients</title>
6 <script type="text/javascript" src="../../dist/paper.js"></script>
7 <script type="text/paperscript" canvas="canvas">
8 project.importSVG(document.getElementById('Layer_1'));
9 </script>
10</head>
11<body>
12<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
13 width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
14<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
15 <stop offset="0" style="stop-color:#231F20"/>
16 <stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
17 <stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
18</linearGradient>
19<rect x="69" y="210" fill="url(#SVGID_1_)" width="461" height="59"/>
20<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="69" y1="162.5" x2="530" y2="162.5">
21 <stop offset="0" style="stop-color:#00A14B"/>
22 <stop offset="0.0031" style="stop-color:#0BA449"/>
23 <stop offset="0.0203" style="stop-color:#43B13D"/>
24 <stop offset="0.038" style="stop-color:#75BD33"/>
25 <stop offset="0.0559" style="stop-color:#A0C72A"/>
26 <stop offset="0.074" style="stop-color:#C2CF23"/>
27 <stop offset="0.0922" style="stop-color:#DDD61E"/>
28 <stop offset="0.1107" style="stop-color:#F0DA1A"/>
29 <stop offset="0.1298" style="stop-color:#FBDD18"/>
30 <stop offset="0.15" style="stop-color:#FFDE17"/>
31 <stop offset="0.3" style="stop-color:#F26522"/>
32 <stop offset="0.47" style="stop-color:#00A14B"/>
33 <stop offset="0.64" style="stop-color:#FFDE17"/>
34 <stop offset="0.8012" style="stop-color:#F26522"/>
35 <stop offset="1" style="stop-color:#00A14B"/>
36</linearGradient>
37<rect x="69" y="133" fill="url(#SVGID_2_)" width="461" height="59"/>
38<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="69" y1="91.5" x2="530" y2="91.5">
39 <stop offset="0%" style="stop-color:#00A14B"/>
40 <stop offset="0.31%" style="stop-color:#0BA449"/>
41 <stop offset="2%" style="stop-color:#43B13D"/>
42 <stop offset="3.8%" style="stop-color:#75BD33"/>
43 <stop offset="5.59%" style="stop-color:#A0C72A"/>
44 <stop offset="7.4%" style="stop-color:#C2CF23"/>
45 <stop offset="9.22%" style="stop-color:#DDD61E"/>
46 <stop offset="11.07%" style="stop-color:#F0DA1A"/>
47 <stop offset="12.98%" style="stop-color:#FBDD18"/>
48 <stop offset="15%" style="stop-color:#FFDE17"/>
49 <stop offset="30%" style="stop-color:#F26522"/>
50 <stop offset="47%" style="stop-color:#00A14B"/>
51 <stop offset="64%" style="stop-color:#FFDE17"/>
52 <stop offset="80.12%" style="stop-color:#F26522"/>
53 <stop offset="100%" style="stop-color:#00A14B"/>
54</linearGradient>
55<rect x="69" y="62" fill="url(#SVGID_3_)" width="461" height="59"/>
56<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="760.1406" x2="485.6914" y2="760.1406" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
57 <stop offset="0" style="stop-color:#231F20"/>
58 <stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
59 <stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
60</linearGradient>
61<rect x="70" y="289.051" fill="url(#SVGID_4_)" width="59" height="461"/>
62<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="683.1396" x2="485.6914" y2="683.1396" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
63 <stop offset="0" style="stop-color:#00A14B"/>
64 <stop offset="0.0031" style="stop-color:#0BA449"/>
65 <stop offset="0.0203" style="stop-color:#43B13D"/>
66 <stop offset="0.038" style="stop-color:#75BD33"/>
67 <stop offset="0.0559" style="stop-color:#A0C72A"/>
68 <stop offset="0.074" style="stop-color:#C2CF23"/>
69 <stop offset="0.0922" style="stop-color:#DDD61E"/>
70 <stop offset="0.1107" style="stop-color:#F0DA1A"/>
71 <stop offset="0.1298" style="stop-color:#FBDD18"/>
72 <stop offset="0.15" style="stop-color:#FFDE17"/>
73 <stop offset="0.3" style="stop-color:#F26522"/>
74 <stop offset="0.47" style="stop-color:#00A14B"/>
75 <stop offset="0.64" style="stop-color:#FFDE17"/>
76 <stop offset="0.8012" style="stop-color:#F26522"/>
77 <stop offset="1" style="stop-color:#00A14B"/>
78</linearGradient>
79<rect x="147.001" y="289.051" fill="url(#SVGID_5_)" width="59" height="461"/>
80<radialGradient id="SVGID_6_" cx="368.75" cy="409.5503" r="92.1995" gradientUnits="userSpaceOnUse">
81 <stop offset="0.1656" style="stop-color:#FFFFFF"/>
82 <stop offset="0.2576" style="stop-color:#CBCBCB"/>
83 <stop offset="0.3651" style="stop-color:#969696"/>
84 <stop offset="0.474" style="stop-color:#686868"/>
85 <stop offset="0.5821" style="stop-color:#434343"/>
86 <stop offset="0.6893" style="stop-color:#252525"/>
87 <stop offset="0.7953" style="stop-color:#111111"/>
88 <stop offset="0.8995" style="stop-color:#040404"/>
89 <stop offset="1" style="stop-color:#000000"/>
90</radialGradient>
91<circle fill="url(#SVGID_6_)" cx="368.75" cy="409.55" r="92.2"/>
92<radialGradient id="SVGID_7_" cx="368.75" cy="619.5508" r="92.1997" fx="323.3488" fy="618.7006" gradientUnits="userSpaceOnUse">
93 <stop offset="0.1656" style="stop-color:#FFFFFF"/>
94 <stop offset="0.2576" style="stop-color:#CBCBCB"/>
95 <stop offset="0.3651" style="stop-color:#969696"/>
96 <stop offset="0.474" style="stop-color:#686868"/>
97 <stop offset="0.5821" style="stop-color:#434343"/>
98 <stop offset="0.6893" style="stop-color:#252525"/>
99 <stop offset="0.7953" style="stop-color:#111111"/>
100 <stop offset="0.8995" style="stop-color:#040404"/>
101 <stop offset="1" style="stop-color:#000000"/>
102</radialGradient>
103<circle fill="url(#SVGID_7_)" cx="368.75" cy="619.551" r="92.2"/>
104</svg>
105 <canvas id="canvas" width="500" height="1000"></canvas>
106</body>
107</html>
Note: See TracBrowser for help on using the repository browser.