paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
31 lines (30 loc) • 1.56 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">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg id="svg" x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</linearGradient>
<radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</radialGradient>
<g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
<circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
<rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
</g>
</svg>
<canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>