RaphaelJS Halo

Like "glow" but elliptical

by Stéphane Cabaret

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
<div id="canvas"></div>

JavaScript

var paper = Raphael("canvas", 500, 300);

Raphael.el.halo = function(properties) {
    properties = properties || {};
    var color = properties.color || "yellow";
    var padding = properties.padding || 0;

		var bbox = this.getBBox();
    var cx = bbox.x + bbox.width / 2;
    var cy = bbox.y + bbox.height / 2;
		var rx = bbox.width / 2;
    var ry = bbox.height / 2;
    var outer_rx = Math.round(rx * Math.sqrt(2));
    var outer_ry = Math.round(ry * Math.sqrt(2));
    var radius = Math.max(outer_rx - rx, outer_ry - ry);
		var set = this.paper.set();
    radius += padding;
		for(var c = 0; c <= radius; c += 1) {
    	var ring = this.paper.ellipse(cx, cy, rx + c, ry + c)
      	.attr("stroke", color)
        .attr("stroke-opacity", (radius - c) / radius);
      set.push(ring);
    }

    this.toFront();
    return set;
}

var background = paper.rect(0, 0, paper.width, paper.height).attr("fill", "skyblue");
paper.print(0, 0, "Test string", paper.getFont("Times", 800), 30);
var rect = paper.rect(50, 50, 100, 30).attr("fill", "red");
var halo = rect.halo({ padding: 5 });
console.log(halo);