topTopics.svg

<svg  width="600" height="180" xmlns="http://www.w3.org/2000/svg">
<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);
  fill: white;
  stroke: rgb(225, 228, 232);
  stroke-width: 1px;
  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 #f0f0f0;
  border-collapse: collapse;
}

.topic {
  font-weight: 600;
  margin-right: 4px;
  color: #1f1f1f;
}

.count {
  color: #8c8c8c;
}

</style>
<g>
  <rect x="5" y="5" id="background" />
  <g>
    <foreignObject x="21" y="17" width="318" height="176">
      <div xmlns="http://www.w3.org/1999/xhtml" class="ellipsis">
        <h2>Repos Starred(By Topic)</h2>
        <div>
          <span class="progress">
          <span style="background-color: #73d13d; width: 20.61%;" class="progress-item"></span><span style="background-color: #ffc53d; width: 13.01%;" class="progress-item"></span><span style="background-color: #ffec3d; width: 7.77%;" class="progress-item"></span><span style="background-color: #bae637; width: 7.60%;" class="progress-item"></span><span style="background-color: #ff4d4f; width: 6.76%;" class="progress-item"></span><span style="background-color: #ff7a45; width: 5.57%;" class="progress-item"></span><span style="background-color: #9254de; width: 4.39%;" class="progress-item"></span><span style="background-color: #ffa940; width: 4.05%;" class="progress-item"></span><span style="background-color: #36cfc9; width: 3.38%;" class="progress-item"></span><span style="background-color: #40a9ff; width: 3.21%;" class="progress-item"></span><span style="background-color: #f759ab; width: 2.87%;" class="progress-item"></span><span style="background-color: #597ef7; width: 2.53%;" class="progress-item"></span><span style="background-color: #73d13d; width: 2.53%;" class="progress-item"></span><span style="background-color: #ffc53d; width: 2.53%;" class="progress-item"></span><span style="background-color: #ffec3d; width: 2.36%;" class="progress-item"></span><span style="background-color: #bae637; width: 2.36%;" class="progress-item"></span><span style="background-color: #ff4d4f; width: 2.36%;" class="progress-item"></span><span style="background-color: #ff7a45; width: 2.03%;" class="progress-item"></span><span style="background-color: #9254de; width: 2.03%;" class="progress-item"></span><span style="background-color: #ffa940; width: 2.03%;" class="progress-item"></span>
          </span>
        </div>
        <ul>
          
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #73d13d;" 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="topic">javascript</span>
  <span class="count">122</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ffc53d;" 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="topic">react</span>
  <span class="count">77</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ffec3d;" 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="topic">hacktoberfest</span>
  <span class="count">46</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #bae637;" 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="topic">typescript</span>
  <span class="count">45</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ff4d4f;" 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="topic">nodejs</span>
  <span class="count">40</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ff7a45;" 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="topic">react-native</span>
  <span class="count">33</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #9254de;" 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="topic">css</span>
  <span class="count">26</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ffa940;" 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="topic">vue</span>
  <span class="count">24</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #36cfc9;" 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="topic">android</span>
  <span class="count">20</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #40a9ff;" 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="topic">macos</span>
  <span class="count">19</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #f759ab;" 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="topic">redux</span>
  <span class="count">17</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #597ef7;" 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="topic">html</span>
  <span class="count">15</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #73d13d;" 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="topic">reactjs</span>
  <span class="count">15</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ffc53d;" 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="topic">ios</span>
  <span class="count">15</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ffec3d;" 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="topic">go</span>
  <span class="count">14</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #bae637;" 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="topic">cli</span>
  <span class="count">14</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ff4d4f;" 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="topic">shell</span>
  <span class="count">14</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ff7a45;" 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="topic">terminal</span>
  <span class="count">12</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #9254de;" 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="topic">git</span>
  <span class="count">12</span>
</li>
<li>
  <svg xmlns="http://www.w3.org/2000/svg" class="octicon" style="fill: #ffa940;" 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="topic">frontend</span>
  <span class="count">12</span>
</li>
        </ul>
      </div>
    </foreignObject>
  </g>
</g>
</svg>