sass-site/source/assets/img/illustrations/identifier-diagram.html

<figure>
  <!-- From https://drafts.csswg.org/css-syntax-3/#ident-token-diagram -->
  <svg height="130" viewBox="0 0 768 130" width="768">
   <g transform="translate(.5 .5)">
    <path d="M 20 51 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path>
    <g>
     <path d="M40 61h0"></path>
     <path d="M384 61h0"></path>
     <path d="M40 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path>
     <g class="terminal">
      <path d="M60 31h134"></path>
      <path d="M230 31h134"></path>
      <rect height="22" rx="10" ry="10" width="36" x="194" y="20"></rect>
      <a href>
       <text x="212" y="35">--</text>
       <text x="212" y="35">--</text>
      </a>
     </g>
     <path d="M364 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path>
     <path d="M40 61h20"></path>
     <g>
      <path d="M60 61h0"></path>
      <path d="M364 61h0"></path>
      <g>
       <path d="M60 61h0"></path>
       <path d="M128 61h0"></path>
       <path d="M60 61h20"></path>
       <g>
        <path d="M80 61h28"></path>
       </g>
       <path d="M108 61h20"></path>
       <path d="M60 61a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path>
       <g class="terminal">
        <path d="M80 81h0"></path>
        <path d="M108 81h0"></path>
        <rect height="22" rx="10" ry="10" width="28" x="80" y="70"></rect>
        <a href>
         <text x="94" y="85">-</text>
         <text x="94" y="85">-</text>
        </a>
       </g>
       <path d="M108 81a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path>
      </g>
      <g>
       <path d="M128 61h0"></path>
       <path d="M364 61h0"></path>
       <path d="M128 61h20"></path>
       <g class="non-terminal">
        <path d="M148 61h0"></path>
        <path d="M344 61h0"></path>
        <rect height="22" width="196" x="148" y="50"></rect>
        <a href>
         <text x="246" y="65">a-z A-Z _ or non-ASCII</text>
         <text x="246" y="65">a-z A-Z _ or non-ASCII</text>
        </a>
       </g>
       <path d="M344 61h20"></path>
       <path d="M128 61a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path>
       <g class="non-terminal">
        <path d="M148 91h64"></path>
        <path d="M280 91h64"></path>
        <rect height="22" width="68" x="212" y="80"></rect>
        <a href>
         <text x="246" y="95">escape</text>
         <text x="246" y="95">escape</text>
        </a>
       </g>
       <path d="M344 91a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path>
      </g>
     </g>
     <path d="M364 61h20"></path>
    </g>
    <g>
     <path d="M384 61h0"></path>
     <path d="M728 61h0"></path>
     <path d="M384 61a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path>
     <g>
      <path d="M404 41h304"></path>
     </g>
     <path d="M708 41a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path>
     <path d="M384 61h20"></path>
     <g>
      <path d="M404 61h0"></path>
      <path d="M708 61h0"></path>
      <path d="M404 61h10"></path>
      <g>
       <path d="M414 61h0"></path>
       <path d="M698 61h0"></path>
       <path d="M414 61h20"></path>
       <g class="non-terminal">
        <path d="M434 61h0"></path>
        <path d="M678 61h0"></path>
        <rect height="22" width="244" x="434" y="50"></rect>
        <a href>
         <text x="556" y="65">a-z A-Z 0-9 _ - or non-ASCII</text>
         <text x="556" y="65">a-z A-Z 0-9 _ - or non-ASCII</text>
        </a>
       </g>
       <path d="M678 61h20"></path>
       <path d="M414 61a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path>
       <g class="non-terminal">
        <path d="M434 91h88"></path>
        <path d="M590 91h88"></path>
        <rect height="22" width="68" x="522" y="80"></rect>
        <a href>
         <text x="556" y="95">escape</text>
         <text x="556" y="95">escape</text>
        </a>
       </g>
       <path d="M678 91a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path>
      </g>
      <path d="M698 61h10"></path>
      <path d="M414 61a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10"></path>
      <g>
       <path d="M414 110h284"></path>
      </g>
      <path d="M698 110a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10"></path>
     </g>
     <path d="M708 61h20"></path>
    </g>
    <path d="M 728 61 h 20 m -10 -10 v 20 m 10 -20 v 20"></path>
   </g>
  </svg>
  <figcaption class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2018 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply.
</figcaption>