generated/languages.svg

<svg width="360" height="210" xmlns="http:https://www.w3.org/2000/svg">
  <style>
    svg {
      font-family: Segoe UI, sans-serif;
      font-size: 14px;
      line-height: 21px;
    }

    #background {
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      fill: white;
      rx: 6px;
      ry: 6px;
    }

    foreignObject {
      width: calc(100% - 10px - 32px);
      height: calc(100% - 10px - 24px);
    }

    h2 {
      margin-top: 0;
      margin-bottom: 0.75em;
      line-height: 24px;
      font-size: 16px;
      font-weight: 600;
      color: rgb(36, 41, 46);
      fill: rgb(36, 41, 46);
    }

    ul {
      list-style: none;
      padding-left: 0;
      margin-top: 0;
      margin-bottom: 0;
    }

    li {
      display: inline-flex;
      font-size: 12px;
      margin-right: 2ch;
      align-items: center;
      flex-wrap: nowrap;
    }

    div.ellipsis {
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .octicon {
      fill: rgb(88, 96, 105);
      margin-right: 0.5ch;
      vertical-align: top;
    }

    .progress {
      display: flex;
      height: 8px;
      overflow: hidden;
      background-color: rgb(225, 228, 232);
      border-radius: 6px;
      outline: 1px solid transparent;
      margin-bottom: 1em;
    }

    .progress-item {
      outline: 2px solid rgb(225, 228, 232);
      border-collapse: collapse;
    }

    .lang {
      font-weight: 600;
      margin-right: 4px;
      color: rgb(36, 41, 46);
    }

    .percent {
      color: rgb(88, 96, 105)
    }

    @media (prefers-color-scheme: dark) {
      #background {
        fill: #0d1117;
      }

      h2 {
        color: #c9d1d9;
        fill: #c9d1d9;
      }

      .octicon {
        color: #8b949e;
        fill: #8b949e;
      }

      .progress {
        background-color: rgba(110, 118, 129, 0.4);
      }

      .progress-item {
        outline: 2px solid #393f47;
      }

      .lang {
        color: #c9d1d9;
      }

      .percent {
        color: #8b949e;
      }
    }

    @keyframes slideIn {
      to {
        transform: translateX(0);
      }
    }
  </style>
  <g>
    <rect x="5" y="5" id="background" />
    <g>
      <foreignObject x="21" y="17" width="318" height="176">
        <div xmlns="http:https://www.w3.org/1999/xhtml" class="ellipsis">

          <h2>Languages Used (By File Size)</h2>

          <div>
            <span class="progress">
              <span style="background-color: #555555;width: 48.137%;" class="progress-item"></span><span style="background-color: #f34b7d;width: 46.216%;" class="progress-item"></span><span style="background-color: #3178c6;width: 2.054%;" class="progress-item"></span><span style="background-color: #b07219;width: 0.960%;" class="progress-item"></span><span style="background-color: #e34c26;width: 0.733%;" class="progress-item"></span><span style="background-color: #563d7c;width: 0.656%;" class="progress-item"></span><span style="background-color: #f1e05a;width: 0.571%;" class="progress-item"></span><span style="background-color: #3572A5;width: 0.403%;" class="progress-item"></span><span style="background-color: #438eff;width: 0.269%;" class="progress-item"></span>
            </span>
          </div>

          <ul>
            
<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#555555;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">C</span>
<span class="percent">48.14%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#f34b7d;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">C++</span>
<span class="percent">46.22%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#3178c6;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">TypeScript</span>
<span class="percent">2.05%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#b07219;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">Java</span>
<span class="percent">0.96%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#e34c26;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">HTML</span>
<span class="percent">0.73%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#563d7c;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">CSS</span>
<span class="percent">0.66%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#f1e05a;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">JavaScript</span>
<span class="percent">0.57%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#3572A5;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">Python</span>
<span class="percent">0.40%</span>
</li>


<li>
<svg xmlns="http:https://www.w3.org/2000/svg" class="octicon" style="fill:#438eff;"
viewBox="0 0 16 16" version="1.1" width="16" height="16"><path
fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<span class="lang">Objective-C</span>
<span class="percent">0.27%</span>
</li>


          </ul>

        </div>
      </foreignObject>
    </g>
  </g>
</svg>