Revised D3 Logo

An updated, more geometrically precise implementation of the D3 logo using strictly circular arcs and lines (rather than cubic Béziers). Some of the points are computed using circle-line and circle-circle intersection.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.fill {
  fill: #bbb;
}

.point {
  fill: #000;
}

.line,
.circle,
.point--intersection {
  fill: none;
  stroke: #000;
  stroke-width: .15px;
}

.line {
  stroke-opacity: .3;
}

.point--intersection {
  display: none;
}

</style>
<svg width="960" height="500" viewBox="-10 -10 116 111">
  <path class="fill" d="
    M0,0
    h7.75
    a45.5,45.5 0 1 1 0,91
    h-7.75
    v-20
    h7.75
    a25.5,25.5 0 1 0 0,-51
    h-7.75
    z
    m36.2510,0
    h32
    a27.75,27.75 0 0 1 21.331,45.5
    a27.75,27.75 0 0 1 -21.331,45.5
    h-32
    a53.6895,53.6895 0 0 0 18.7464,-20
    h13.2526
    a7.75,7.75 0 1 0 0,-15.5
    h-7.75
    a53.6895,53.6895 0 0 0 0,-20
    h7.75
    a7.75,7.75 0 1 0 0,-15.5
    h-13.2526
    a53.6895,53.6895 0 0 0 -18.7464,-20
    z"/>

<circle class="circle" cx="7.75" cy="45.5" r="53.6895"/>

<circle class="point point--intersection" cx="36.2510" cy="0" r=".5"/>
  <circle class="point point--intersection" cx="54.9974" cy="20" r=".5"/>
  <circle class="point point--intersection" cx="60.5" cy="35.5" r=".5"/>
  <circle class="point point--intersection" cx="60.5" cy="55.5" r=".5"/>
  <circle class="point point--intersection" cx="54.9974" cy="71" r=".5"/>
  <circle class="point point--intersection" cx="36.2510" cy="91" r=".5"/>

<circle class="point point--intersection" cx="89.5807" cy="45.5" r=".5"/>