73 lines
No EOL
3.6 KiB
XML
73 lines
No EOL
3.6 KiB
XML
<svg width="495" height="120" viewBox="0 0 495 120" fill="none" xmlns="http://www.w3.org/2000/svg"><style>
|
|
.header {
|
|
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
|
|
fill: #ffffff;
|
|
animation: fadeInAnimation 0.8s ease-in-out forwards;
|
|
}
|
|
|
|
.rank-text {
|
|
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #ffffff;
|
|
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
|
}
|
|
|
|
.rank-circle-rim {
|
|
stroke: #ffffff;
|
|
fill: none;
|
|
stroke-width: 6;
|
|
opacity: 0.2;
|
|
}
|
|
.rank-circle {
|
|
stroke: #ffffff;
|
|
stroke-dasharray: 250;
|
|
fill: none;
|
|
stroke-width: 6;
|
|
stroke-linecap: round;
|
|
opacity: 0.8;
|
|
transform-origin: -10px 8px;
|
|
transform: rotate(-90deg);
|
|
animation: rankAnimation 1s forwards ease-in-out;
|
|
}
|
|
|
|
@keyframes rankAnimation {
|
|
from {
|
|
stroke-dashoffset: 251.32741228718345;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 111.2375126783074;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
fill: #ffffff;
|
|
// display: block;
|
|
}
|
|
.stagger {
|
|
opacity: 0;
|
|
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
|
}
|
|
.stat {
|
|
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #ffffff;
|
|
}
|
|
.bold {
|
|
font-weight: 700
|
|
}
|
|
|
|
|
|
/* Animations */
|
|
@keyframes scaleInAnimation {
|
|
from {
|
|
transform: translate(-5px, 5px) scale(0);
|
|
}
|
|
to {
|
|
transform: translate(-5px, 5px) scale(1);
|
|
}
|
|
}
|
|
@keyframes fadeInAnimation {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style><rect x="0.5" y="0.5" rx="4.5" height="99%" stroke="#E4E2E2" width="494" fill="#000000a0" stroke-opacity="0"></rect><g transform="translate(25, 35)"><g transform="translate(0, 0)"><text x="0" y="0" class="header">:Domai's Code::Stats</text></g></g><g transform="translate(0, 55)"><g data-testid="rank-circle" transform="translate(400, 0)"><circle class="rank-circle-rim" cx="-10" cy="8" r="40"></circle><circle class="rank-circle" cx="-10" cy="8" r="40"></circle><g class="rank-text"><text x="-4" y="0" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">lv 18</text></g></g><svg x="0" y="0"><g transform="translate(0, 0)"><g class="stagger" style="animation-delay:450ms" transform="translate(25, 0)"><svg data-testid="icon" class="icon" viewBox="0 0 16 16" 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><text class="stat bold" x="25" y="12.5">XP:</text><text class="stat" x="120" y="12.5">551k</text></g></g><g transform="translate(0, 25)"><g class="stagger" style="animation-delay:451ms" transform="translate(25, 0)"><svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16"><path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"></path></svg><text class="stat bold" x="25" y="12.5">Recent xp:</text><text class="stat" x="120" y="12.5">3k</text></g></g></svg></g></svg> |