2012-11-07 13:31:36 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<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>
|
2012-11-07 13:31:36 -05:00
|
|
|
</head>
|
2014-04-06 07:44:19 -04:00
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<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>
|
2012-11-07 13:31:36 -05:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
