/* # # Full height page, flexbox centers the SVG horizontally and vertically. # */ html, body { height: 100%; margin: 0; background: #fff; } body { display: flex; justify-content: center; align-items: center; } /* # # Force SVG to act as a block so flexbox can center it properly. # */ svg { display: block; } /* # # Text style for the arc labels. # */ svg text { font-family: Arial, sans-serif; font-size: 12px; fill: #d90000; letter-spacing: 1px; }