generated_images/overview.svg

<svg width="345" height="235" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345 235">
  <style>
    svg {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      font-size: 14px;
      line-height: 21px;
    }

    #background {
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      stroke: #b2cce5;
      rx: 6px;
      ry: 6px;
      stroke-width: 1px;
    }

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

    .container {
      display: flex;
    }

    .container svg {
      flex: 1 1 auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
    }

    th {
      padding: 0.5em;
      padding-top: 0;
      text-align: left;
      font-size: 16px;
      font-weight: 600;
      color: #538cc6;
    }

    td {
      margin-bottom: 16px;
      margin-top: 8px;
      padding: 0.25em;
      font-size: 12px;
      line-height: 18px;
    }

    tr {
      transform: translateX(-200%);
      animation-duration: 2.1s;
      animation-name: slideIn;
      animation-function: ease-in-out;
      animation-fill-mode: forwards;
    }

    span {
      white-space: pre-wrap;
    }

    .octicon {
      margin-right: 1ch;
      vertical-align: top;
    }

    @media (prefers-color-scheme: light) {
      #background {
        fill: #ffffff;
      }

      td {
        color: #586069;
      }

      .octicon {
        fill: #586069;
      }
    }

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

      td {
        color: #c9d1d9;
      }

      .octicon {
        fill: #8b949e;
      }
    }

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

          <table>
            <thead>
              <tr style="transform: translateX(0);">
                <th colspan="2">
                  Adam Ross' GitHub Statistics
                </th>
              </tr>
            </thead>
            <tbody>

            <tr>
              <td>
                <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" aria-hidden="true">
                  <path fill-rule="evenodd" d="M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z"></path>
                </svg>
                <span>All-time GitHub contributions</span>
              </td>
              <td>
                <span>3,064</span>
              </td>
            </tr>

            <tr style="animation-delay: 300ms">
              <td>
                <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                  <path fill-rule="evenodd" d="M8.75 1.75a.75.75 0 00-1.5 0V5H4a.75.75 0 000 1.5h3.25v3.25a.75.75 0 001.5 0V6.5H12A.75.75 0 0012 5H8.75V1.75zM4 13a.75.75 0 000 1.5h8a.75.75 0 100-1.5H4z"></path>
                </svg>
                <span>Lines of code changes</span>
              </td>
              <td>
                <span>3,361,250</span>
              </td>
            </tr>

            <tr style="animation-delay: 600ms">
              <td>
                <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                  <path fill-rule="evenodd" d="M1.5 1.75a.75.75 0 00-1.5 0v12.5c0 .414.336.75.75.75h14.5a.75.75 0 000-1.5H1.5V1.75zm14.28 2.53a.75.75 0 00-1.06-1.06L10 7.94 7.53 5.47a.75.75 0 00-1.06 0L3.22 8.72a.75.75 0 001.06 1.06L7 7.06l2.47 2.47a.75.75 0 001.06 0l5.25-5.25z"></path>
                </svg>
                <span>Avg contributions [weighted]</span>
              </td>
              <td>
                <span>85.62% [94.11%]</span>
              </td>
            </tr>

<!--            <tr style="animation-delay: 900ms">-->
<!--              <td>-->
<!--                <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16">-->
<!--                  <path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path>-->
<!--                </svg>-->
<!--                <span>Pull requests       |   </span>-->
<!--                <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16">-->
<!--                  <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>-->
<!--                </svg>-->
<!--                <span>Issues</span>-->
<!--              </td>-->
<!--              <td>-->
<!--                <span>{{ pull_requests_and_issues }}</span>-->
<!--              </td>-->
<!--            </tr>-->

            <tr style="animation-delay: 900ms">
              <td>
                <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" aria-hidden="true">
                  <path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path>
                </svg>
                <span>Repos contributed [% collab]</span>
              </td>
              <td>
                <span>164 [75%]</span>
              </td>
            </tr>

            <tr style="animation-delay: 1200ms">
              <td>
                <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                  <path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path>
                </svg>
                <span>Repo views (as of 2021-03-31)</span>
              </td>
              <td>
                <span>55,772</span>
              </td>
            </tr>

            <tr style="animation-delay: 1500ms">
              <td>
                <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" aria-hidden="true">
                  <path fill-rule="evenodd" d="M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"></path>
                </svg>
                <span>Repo collaborators</span>
              </td>
              <td>
                <span>2,860</span>
              </td>
            </tr>

            <tr style="animation-delay: 1800ms">
              <td>
                <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" role="img">
                  <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
                </svg>
                <span>Repo forks          |   </span>
                <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16">
                  <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
                </svg>
                <span>Stars</span>
              </td>
              <td>
                <span>561.8K  |   2.759M</span>
              </td>
            </tr>

            </tbody>
          </table>
        </div>
      </foreignObject>
    </g>
  </g>
</svg>