Magnifying Glass as Path

by Nivaldo

HTML

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="600px" height="600px">

      <!--<circle cx="100" cy="100" r="75" />-->
      <!--
      <path 
            d="
            M 100, 100
            m -75, 0
            a 75,75 0 1,0 150,0
            a 75,75 0 1,0 -150,0
            "
      />
      -->

</svg>

CSS

circle, path {
    fill: none;
    stroke-width: 5;
    stroke-opacity: .5;
}

circle {
    stroke: red;
}
path {
    stroke: purple;
}

JavaScript

var svg = d3.select("body").append("svg");

var cx = 120;
var cy = 150;
var r = 100;

var thepath = "M 250, 250 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 M 100,100 L 100,150"

var omega = 0.75;
var x1 = cx + r * Math.sin(omega);
var y1 = cy + r * Math.cos(omega);

var mag = "M " + cx + "," + cy + " m -" + r + ", 0 a " + r + "," + r + " 0 1,0 " + r * 2 + ",0 a " + r + "," + r + " 0 1,0 -" + r * 2 + ",0" + " M " + x1 + "," + y1 + " L" + (cx + r * 1.7) + "," + (cy + r * 1.7)

//console.log(mag);

var path = d3.select("svg")
    .append("path")
    .attr("stroke", "blue")
    .attr("d", mag)
    .style("opacity",0.5);