svg_searchlights-v5-raphael

by Tristan Rentz

HTML

<script src="https://github.com/poilu/raphael-boolean/blob/master/raphael-min.js"></script>
<script src="https://github.com/poilu/raphael-boolean/blob/master/raphael.boolean.js"></script>
<div id="canvas" ></div>

JavaScript

var paper = Raphael("canvas", 250, 250);
var path = paper.path("M 43,53 183,85 C 194,113 179,136 167,161 122,159 98,195 70,188 z");
path.attr({fill: "#a00", stroke: "none"});

var ellipse = paper.ellipse(170, 160, 40, 35);
ellipse.attr({fill: "#0a0", stroke: "none"});
var newPathStr = paper.union(path, ellipse);

//draw a new path element using that string
var newPath = paper.path(newPathStr);
newPath.attr({fill: "#666"});

// as they aren't needed anymore remove the other elements
path.remove();
ellipse.remove();