Halos

A comparison between two common techniques for drawing halos to make labels readable regardless of the background color.

The first technique creates two SVG <text> elements one upon each other. The one in the background has a white stroke, while the one in the foreground has a black fill.

The second technique declares a combination of CSS text-shadows on a single text.

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Halos</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <svg></svg>
    <script src="index.js"></script>
  </body>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js