images/wakatime_weekly_language_stats.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="540" height="175" viewBox="0 0 540 175"><defs><linearGradient id="overflowGradient"><stop stop-color="rgba(254, 254, 254, 0)" offset="0"></stop><stop stop-color="rgba(255, 254, 254, 1)" offset="1"></stop></linearGradient></defs><rect width="538" height="173" x="1" y="1" rx="4.5" stroke="rgb(228,226,226)" fill="rgb(255,254,254)" stroke-opacity="1"></rect><text transform="translate(20 20)" class="titleText" dominant-baseline="hanging">Weekly Language Stats</text><clipPath id="nameClip"><rect x="0" y="0" width="100" height="107"></rect></clipPath><g transform="translate(20, 48)" width="100" clip-path="url(#nameClip)"></g><rect transform="translate(110, 48)" width="10" height="107" fill="url(#overflowGradient)"></rect><clipPath id="durationClip"><rect x="0" y="0" width="110" height="107"></rect></clipPath><g transform="translate(130, 48)" width="110" clip-path="url(#durationClip)"></g><rect transform="translate(230, 48)" width="10" height="107" fill="url(#overflowGradient)"></rect><g transform="translate(250, 48)"></g><style>
    text { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333333 }
    .nameText, .durationText { opacity: 0; animation: fadeInAnimation 0.5s ease-in-out forwards; }
    .durationBar { transform: scaleX(0); animation: scaleXInAnimation 0.5s ease-in-out forwards; }
    .titleText { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2f80ed; animation: fadeInAnimation 0.8s ease-in-out forwards; }
    @keyframes fadeInAnimation {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes scaleXInAnimation {
      0%   { transform: scaleX(0); }
      100% { transform: scaleX(1); }
    }
</style></svg>