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