Rank Card

index.html

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins" rel="stylesheet">


<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="467px" height="141px">

    <!-- Background picture -->
        <rect id="rect" width="100%" height="100%" rx="3" ry="3" style="fill:#2196F3;"></rect>


    <!-- Rounded rectangle in the center -->
    <rect y="18" x="12" rx="3" ry="3" width="443" height="105" style="fill:black;opacity:0.75;"></rect>


    <!-- === Avatar. ===
         Radius of circle = rc = 40px
         Width of circle = height of circle = rc * 2 = 80px
         margin left of avatar = mla = 21px
         margin top of avatar = mta = 31px -->
    <!-- Border of avatar.
         This border is made by a frame that is bigger than the avatar and behind it
         centered at the same point.

         Width of border = wb = 4px
         Radius of border = rb = rc + wb/2 = 42px
          -->
    <circle r="42" cx="61" cy="71" style="fill: black;"></circle>
    <clipPath id="clipCircle">
        <!-- cx = mla + r = 21 + 40 = 61
             cy = mta + r = 31 + 40 = 71 -->
        <circle r="40" cx="61" cy="71"></circle>
    </clipPath>
    <image x="21" y="31" width="80" height="80" clip-path="url(#clipCircle)" xlink:href="https://cdn.discordapp.com/avatars/127563346944851969/4793d22e3e53f6c8a239da7bc6b42fa6.png"></image>

    <!-- Activity status -->
    <circle r="12" cx="92" cy="97" style="fill: black;"></circle>
    <circle r="10" cx="92" cy="97" style="fill: #44b37f;"></circle>

    <!-- Rank and level -->
    <text x="441" y="50" font-family="Poppins" font-size="12" text-anchor="end" style="stroke: black; stroke-width: 0.2px">
        <tspan fill="white">
            RANK
            <tspan font-size="30">
                #44
            </tspan>
        </tspan>
        <tspan fill="#FF9800">
            LEVEL
            <tspan font-size="30">12</tspan>
        </tspan>
    </text>


    <!-- Username + tag -->
    <text x="137" y="83" font-family="Open Sans" font-size="" fill="white">
        Torbjörn
        <tspan style="fill: #7F8384" font-size="12">#3787</tspan>
    </text>

    <!-- Exp points -->
    <text x="441" y="83" font-family="Poppins" font-size="12" fill="white" text-anchor="end">
      <tspan id="xp">429</tspan>
        <tspan style="fill: #7F8384"> / 1337 XP</tspan>
    </text>

    <!-- === Progress bar === -->
    <!-- simulate an outer stroke -->
    <rect x="128" y="91" rx="12" ry="12" width="318" height="20" style="fill:black;"></rect>
    <!-- background color of progress bar-->
    <rect x="129" y="92" rx="9" ry="9" width="316" height="18" style="fill:#484B4E;"></rect>
    <!-- actual progress bar.
         be careful when computing width: full width is 316px.
         Minimum width should be either 0px or 18px for better looking because of border radius -->
    <rect id="bar" x="129" y="92" rx="9" ry="9" width="0" height="18" fill="url(#grad3)"></rect>
  <!--<rect id="bar" x="129" y="92" rx="9" ry="9" width="0" height="18" style="fill:#62d3f5;"></rect>-->
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,87,34);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,152,0);stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

rank-card.markdown

Rank Card

A Pen by Ryan on CodePen.

License.

script.js

window.onload = barAnimation;

function barAnimation() {
  var n = 1;
  function runBarAnimation() {
  n++;
  if(n < 316) {
    setTimeout(runBarAnimation, 10);
    document.getElementById('bar').setAttribute("width", n);
    document.getElementById('xp').textContent = Math.floor(n*1337/315);
  }}
  runBarAnimation();
}