Skip to content

Instantly share code, notes, and snippets.

@Torbikini
Created January 14, 2020 21:24
Show Gist options
  • Save Torbikini/3ffd840b21490fd63b5b9def237d42e5 to your computer and use it in GitHub Desktop.
Save Torbikini/3ffd840b21490fd63b5b9def237d42e5 to your computer and use it in GitHub Desktop.
Rank Card
<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>
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment