Async/defer SVG

asyncdefer.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 690 115" width="690" height="115">
  <style><![CDATA[
    .dividers {
      stroke: rgb(106, 148, 0);
      stroke-dasharray: 1, 1;
    }

    .tag {
      dominant-baseline: central;
      font-family: monospace;
      font-weight: bold;
      font-size: 13px;
    }

    .label {
      dominant-baseline: central;
      font-family: sans-serif;
      font-size: 10px;
    }

    .parser {
      stroke: rgb(110, 174, 0);
      fill: rgb(110, 174, 0);
    }

    .net {
      stroke: rgb(0, 53, 255);
      fill: rgb(0, 53, 255);
    }

    .execution {
      stroke: rgb(255, 0, 0);
      fill: rgb(255, 0, 0);
    }

    .progress {
      stroke-width: 2;
    }

    .progress.parser:not(.first) {
      marker-start: url(#parser-marker);
    }
    .progress.parser:not(.last) {
      marker-end: url(#parser-marker);
    }

    .progress.net:not(.first) {
      marker-start: url(#net-marker);
    }
    .progress.net:not(.last) {
      marker-end: url(#net-marker);
    }

    .progress.execution:not(.first) {
      marker-start: url(#execution-marker);
    }
    .progress.execution:not(.last) {
      marker-end: url(#execution-marker);
    }

    marker > circle {
      stroke-width: 0;
    }

    .connector {
      stroke: rgb(206, 206, 206);
      stroke-width: 1;
    }
  ]]></style>

  <g class="dividers">
    <line x1="0" x2="690" y1="33.5" y2="33.5" />
    <line x1="0" x2="690" y1="67.5" y2="67.5" />

    <line x1="135.5" x2="135.5" y1="1" y2="29" />
    <line x1="135.5" x2="135.5" y1="38" y2="63" />
    <line x1="135.5" x2="135.5" y1="71" y2="99" />
  </g>

  <defs>
    <marker id="parser-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
      <circle cx="1.5" cy="1.5" r="1.5" class="parser" />
    </marker>
    <marker id="net-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
      <circle cx="1.5" cy="1.5" r="1.5" class="net" />
    </marker>
    <marker id="execution-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
      <circle cx="1.5" cy="1.5" r="1.5" class="execution" />
    </marker>
  </defs>

  <text x="12" y="16.75" class="tag">&lt;script&gt;</text>
  <text x="142" y="9" class="label">Scripting</text>
  <text x="142" y="24" class="label">HTML Parser</text>
  <line x1="399" x2="399" y1="9" y2="24" class="connector" />
  <line x1="546" x2="546" y1="9" y2="24" class="connector" />
  <line x1="248" x2="399" y1="24" y2="24" class="parser progress first" />
  <line x1="399" x2="496" y1="9" y2="9" class="net progress" />
  <line x1="496" x2="546" y1="9" y2="9" class="execution progress" />
  <line x1="546" x2="674" y1="24" y2="24" class="parser progress last" />

  <text x="12" y="50.25" class="tag">&lt;script defer&gt;</text>
  <text x="142" y="42" class="label">Scripting</text>
  <text x="142" y="57" class="label">HTML Parser</text>
  <line x1="626" x2="626" y1="42" y2="57" class="connector" />
  <line x1="248" x2="626" y1="57" y2="57" class="parser progress first" />
  <line x1="399" x2="496" y1="42" y2="42" class="net progress" />
  <line x1="626" x2="674" y1="42" y2="42" class="execution progress last" />

  <text x="12" y="84.25" class="tag">&lt;script async&gt;</text>
  <text x="142" y="76" class="label">Scripting</text>
  <text x="142" y="91" class="label">HTML Parser</text>
  <line x1="496" x2="496" y1="76" y2="91" class="connector" />
  <line x1="546" x2="546" y1="76" y2="91" class="connector" />
  <line x1="248" x2="496" y1="91" y2="91" class="parser progress first" />
  <line x1="399" x2="496" y1="76" y2="76" class="net progress" />
  <line x1="496" x2="546" y1="76" y2="76" class="execution progress" />
  <line x1="546" x2="674" y1="91" y2="91" class="parser progress last" />

  <g class="legend" transform="translate(247.5,105.5)">
    <circle cx="3" cy="3" r="3" class="parser" />
    <text x="9" y="3" class="label">parser</text>

    <circle cx="50" cy="3" r="3" class="net" />
    <text x="56" y="3" class="label">net</text>

    <circle cx="83" cy="3" r="3" class="execution" />
    <text x="89" y="3" class="label">execution</text>
  </g>

  <text x="674" y="108.5" text-anchor="end" class="label">runtime →</text>
</svg>