assets/conversion.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 550">
  <defs>
    <linearGradient id="class-paint" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="0%" style="stop-color: rgb(47, 143, 227);"/>
      <stop offset="100%" style="stop-color: rgb(74, 82, 202);"/>
    </linearGradient>

    <marker class="connecter-view" id="connector-start" markerHeight="20" markerUnits="userSpaceOnUse" markerWidth="16" orient="auto" refX="1" refY="10">
      <path class="connecter-marker" d="M 16 2 L 0 10 L 16 18"/>
    </marker>

    <marker class="connecter-view" id="connector-end" markerHeight="20" markerUnits="userSpaceOnUse" markerWidth="16" orient="auto" refX="15" refY="10">
      <path class="connecter-marker" d="M 0 2 L 16 10 L 0 18"/>
    </marker>

    <style><![CDATA[
*:root {
  --background-paint: #eee;
  font-family: "Arial", "Helvetica Neue", sans-serif;
  text-rendering: optimizelegibility;
  width: 800px;
}

@media (prefers-color-scheme: dark) {
  *:root {
    --background-paint: #eee;
  }
}

*.background {
  block-size: 100%;
  fill: var(--background-paint);
  inline-size: 100%;
}

*.class {
  color: #fff;
}

*.class-frame {
  fill: url(#class-paint);
  rx: 12px;
  ry: 12px;
  stroke: none;
}

*.class-label {
  dominant-baseline: central;
  fill: currentcolor;
  font-size: 18px;
  text-anchor: middle;
}

*.class-label.main {
  font-size: 24px;
}

*.class-label.start {
  text-anchor: end;
  transform: translate(-1ch, 0);
}

*.class-label.end {
  text-anchor: start;
  transform: translate(1ch, 0);
}

*.class-desc {
  dominant-baseline: central;
  fill: currentcolor;
  fill-opacity: 0.7;
  font-size: 15px;
  text-anchor: middle;
}

*:any-link {
  color: unset;
  fill: currentcolor;
  text-decoration: underline;
}

*.connecter-view {
  overflow: visible;
}

*.connecter-marker {
  fill: none;
  stroke: #0ecadd;
  stroke-linecap: round;
  stroke-width: 2px;
}

*.connecter {
  fill: none;
  marker-end: url(#connector-end);
  stroke: #0ecadd;
  stroke-linecap: round;
  stroke-width: 3px;
}

*.connecter.bidi {
  marker-start: url(#connector-start);
}

*.connecter-label {
  dominant-baseline: central;
  fill: #00b0b9;
  font-size: 16px;
  paint-order: stroke fill;
  stroke: var(--background-paint);
  stroke-width: 6px;
  text-anchor: middle;
}

    ]]></style>
  </defs>

  <rect class="background"/>

  <g class="class" style="transform: translate(430px, 240px);">
    <rect class="class-frame" height="80" width="260"/>
    <text class="class-label main" x="130" y="38">ByteSequence</text>
  </g>

  <g class="class" style="transform: translate(100px, 100px);">
    <rect class="class-frame" height="60" width="240"/>
    <text class="class-label" x="120" y="22">Base64 encoded</text>
    <text class="class-desc" x="120" y="44">string</text>
  </g>

  <path class="connecter bidi" d="M 324 163 L 462 237"/>

  <g class="class" style="transform: translate(60px, 200px);">
    <rect class="class-frame" height="60" width="240"/>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary" rel="noopener noreferrer">
      <text class="class-label" x="120" y="22">Binary string</text>
    </a>
    <text class="class-desc" x="120" y="44">string</text>
  </g>

  <path class="connecter bidi" d="M 304 244 L 428 262"/>

  <g class="class" style="transform: translate(60px, 300px);">
    <rect class="class-frame" height="60" width="240"/>
    <text class="class-label" x="120" y="22">Hexadecimal formatted</text>
    <text class="class-desc" x="120" y="44">string</text>
  </g>

  <path class="connecter bidi" d="M 304 316 L 428 294"/>

  <g class="class" style="transform: translate(80px, 400px);">
    <rect class="class-frame" height="60" width="240"/>
    <text class="class-label" x="120" y="22">Percent encoded</text>
    <text class="class-desc" x="120" y="44">string</text>
  </g>

  <path class="connecter bidi" d="M 296 396 L 448 323"/>

  <g class="class" style="transform: translate(420px, 40px);">
    <rect class="class-frame" height="60" width="240"/>
    <text class="class-label" x="120" y="22">Byte stream</text>
    <text class="class-desc" x="120" y="44">ReadableStream&#x3C;Uint8Array></text>
  </g>

  <path class="connecter" d="M 541 104 L 554 238"/>

  <g class="class" style="transform: translate(800px, 210px);">
    <rect class="class-frame" height="60" width="240"/>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" rel="noopener noreferrer">
      <text class="class-label" x="120" y="30">Blob</text>
    </a>
  </g>

  <path class="connecter bidi" d="M 796 250 L 692 265"/>

  <g class="class" style="transform: translate(794px, 310px);">
    <rect class="class-frame" height="60" width="240"/>
    <text class="class-label" x="120" y="22">Data URL</text>
    <text class="class-desc" x="120" y="44">string</text>
  </g>

  <path class="connecter bidi" d="M 790 320 L 692 299"/>

  <g class="class" style="transform: translate(740px, 100px);">
    <rect class="class-frame" height="60" width="240"/>
    <text class="class-label" x="120" y="22">Text</text>
    <text class="class-desc" x="120" y="44">string</text>
  </g>

  <path class="connecter" d="M 736 150 L 616 238"/>
  <text class="connecter-label" x="650" y="180">Text encode</text>
  <path class="connecter" d="M 646 238 L 749 164"/>
  <text class="connecter-label" x="710" y="220">Text decode</text>

  <path class="connecter" d="M 505 322 L 464 412 A 8 8 0 0 0 480 420 L 525 322"/>
  <text class="connecter-label" x="460" y="380">Digest</text>

  <g class="class" style="transform: translate(480px, 460px);">
    <rect class="class-frame" height="60" width="240"/>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/BufferSource" rel="noopener noreferrer">
      <text class="class-label" x="120" y="30">BufferSource</text>
    </a>
  </g>

  <path class="connecter bidi" d="M 572 322 L 598 456"/>

  <g class="class" style="transform: translate(770px, 420px);">
    <rect class="class-frame" height="60" width="240"/>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request" rel="noopener noreferrer">
      <text class="class-label start" x="115" y="30">Request</text>
    </a>
    <text class="class-label" x="115" y="30">/</text>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Response" rel="noopener noreferrer">
      <text class="class-label end" x="115" y="30">Response</text>
    </a>
  </g>

  <path class="connecter bidi" d="M 656 323 L 803 417"/>

</svg>