paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
139 lines (138 loc) • 5.08 kB
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">
var item = project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="500px"
height="500px"
id="svg">
<defs
id="defs1903">
<linearGradient
id="linearGradient3794">
<stop
id="stop3796"
style="stop-color:#ff5555;stop-opacity:1"
offset="0" />
<stop
id="stop3808"
style="stop-color:#522ba8;stop-opacity:1"
offset="0.18868095" />
<stop
id="stop3802"
style="stop-color:#ff00ff;stop-opacity:1"
offset="0.38376093" />
<stop
id="stop3804"
style="stop-color:#ff6600;stop-opacity:1"
offset="0.57983696" />
<stop
id="stop3806"
style="stop-color:#28170b;stop-opacity:1"
offset="0.80833077" />
<stop
id="stop3798"
style="stop-color:#ff5555;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3770">
<stop
id="stop3772"
style="stop-color:#d1ab00;stop-opacity:1"
offset="0" />
<stop
id="stop3788"
style="stop-color:#502d16;stop-opacity:1"
offset="0.0625" />
<stop
id="stop3786"
style="stop-color:#ff5555;stop-opacity:1"
offset="0.125" />
<stop
id="stop3784"
style="stop-color:#00ff00;stop-opacity:1"
offset="0.54704088" />
<stop
id="stop3782"
style="stop-color:#ffff00;stop-opacity:1"
offset="0.79772007" />
<stop
id="stop3774"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3760">
<stop
id="stop3762"
style="stop-color:#ff6600;stop-opacity:1"
offset="0" />
<stop
id="stop3764"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3768"
xlink:href="#linearGradient3760"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3776"
xlink:href="#linearGradient3770"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="454.28571"
y1="-7.6378121"
x2="591.42859"
y2="480.93362"
id="linearGradient3800"
xlink:href="#linearGradient3794"
gradientUnits="userSpaceOnUse" />
</defs>
<metadata
id="metadata1906">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 325.71425,440.93359 -24.52516,-67.66103 -63.02035,-34.75536 5.11537,-71.78671 -43.43569,-57.38329 33.87141,-63.49982 -16.34058,-70.089121 56.77078,-44.233226 13.57994,-70.675915 69.85396,-17.318309 41.15239,-59.042199 70.85875,12.5911 61.6092,-37.19955 59.61144,40.3234 71.41322,-8.92476 38.05675,61.08341 68.86926,20.893202 9.92171,71.281547 54.41716,47.098539 -19.92888,69.154452 30.55585,65.16011 -46.33359,55.06994 1.41115,71.9549 -64.7268,31.46332 -27.97755,66.30805 -71.92816,2.4164 -52.52867,49.19593 -66.69248,-27.04832 -67.99711,23.57737 -49.92508,-51.83614 z"
transform="translate(-125.71429,194.28571) scale(0.5, 0.5)"
id="path3792"
style="fill:url(#linearGradient3800);fill-opacity:1;stroke;stroke:black;stroke-width:2px;" />
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>