final.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460 165">
    <defs><style>/* https://zhih.me/website-darkmode-on-macos/ */

/* Tomorrow by Chris Kempson (http://chriskempson.com) */

:root {
  --base00: #ffffff;
  --base01: #e0e0e0;
  --base02: #d6d6d6;
  --base03: #8e908c;
  --base04: #969896;
  --base05: #4d4d4c;
  --base06: #282a2e;
  --base07: #1d1f21;
  --base08: #c82829;
  --base09: #f5871f;
  --base0A: #eab700;
  --base0B: #718c00;
  --base0C: #3e999f;
  --base0D: #4271ae;
  --base0E: #8959a8;
  --base0F: #a3685a;
}
@media (prefers-color-scheme: dark) {
/* Tomorrow Night by Chris Kempson (http://chriskempson.com) */

:root {
  --base00: #1d1f21;
  --base01: #282a2e;
  --base02: #373b41;
  --base03: #969896;
  --base04: #b4b7b4;
  --base05: #c5c8c6;
  --base06: #e0e0e0;
  --base07: #ffffff;
  --base08: #cc6666;
  --base09: #de935f;
  --base0A: #f0c674;
  --base0B: #b5bd68;
  --base0C: #8abeb7;
  --base0D: #81a2be;
  --base0E: #b294bb;
  --base0F: #a3685a;
}}

svg {
    background-color: var(--base00);
}

#line line {
    fill: none;
    stroke: var(--base02);
    stroke-miterlimit: 10;
    stroke-width: 0.5;
    stroke-linecap: round;
    animation: fadeIn 0.8s ease-in-out both;
    stroke-dasharray: 125, 125;
    animation: fadeInLine 0.6s ease-in-out both;
}

.text {
    font-weight: lighter;
    fill: var(--base05);
}

#detail .text {
    font-size: 12px;
    animation: fadeIn 0.8s ease-in-out both;
}

#contact g.item {
    animation: fadeIn 0.8s ease-in-out both;
}

#contact g.item svg {
    /* 在这里写 transform, width, height 实际上无效 */
    display: contents;
}

#contact g.item .text {
    font-size: 12px;
}

#quote .text {
    font-size: 10px;
    animation: fadeIn 0.8s ease-in-out both;
}

.code {
    font-family: monospace;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInLine {
    from {
        stroke-dashoffset: 125;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.st0 {
    fill: var(--base07) !important
}</style></defs>
    <title>Postcard - Hash</title>
<g id="detail" transform="matrix(1 0 0 1 25 35)">
    <text class="text" transform="translate(0 0)" style="animation-delay: 100ms">欢迎您来自本地的朋友</text>
    <text class="text" transform="translate(0 25)" style="animation-delay: 200ms">今天是2021年5月9日星期日</text>
    <text class="text" transform="translate(0 50)" style="animation-delay: 300ms">您的 IP 是 <tspan class="code">::1</tspan></text>
    <text class="text" transform="translate(0 75)" style="animation-delay: 400ms">您使用的是 Windows 10 操作系统</text>
    <text class="text" transform="translate(0 100)" style="animation-delay: 500ms">您使用的是 Firefox 88.0 浏览器</text>
</g>        <g id="line" transform="matrix(1 0 0 1 0 0)"><line x1="285" y1="20" x2="285" y2="145" style="animation-delay: 1100ms"/></g>

<g id="contact" transform="matrix(1 0 0 1 300 15)">
    <g class="item" transform="translate(0 0)" style="animation-delay: 600ms">
        <g class="icon" transform="scale(1.2)"><svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#708A97;}
</style>
<path class="st0" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M12.5,5.3L8,9.7L3.5,5.3L12.5,5.3z M3.2,6l2.5,2.4  l-2.5,2.3L3.2,6z M3.5,11.3l2.7-2.6L8,10.5l1.8-1.8l2.7,2.6H3.5z M12.8,10.7l-2.6-2.3l2.6-2.4V10.7z"/>
</svg></g>
        <text class="text" transform="translate(25 14)">
                <a href="mailto:A137294381b@163.com">A137294381b@163.com</a>

        </text>
    </g>
    <g class="item" transform="translate(0 30)" style="animation-delay: 700ms">
        <g class="icon" transform="scale(1.2)"><svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#191717;}
</style>
<path class="st0" d="M8,0C3.6,0,0,3.7,0,8.2c0,3.6,2.3,6.7,5.5,7.8C5.9,16.1,6,15.8,6,15.6c0-0.2,0-0.7,0-1.4  c-2.2,0.5-2.7-1.1-2.7-1.1c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5c0.8,0.1,1.2,0.8,1.2,0.8c0.7,1.3,1.9,0.9,2.3,0.7  c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4.1c0-0.9,0.3-1.6,0.8-2.2c-0.1-0.2-0.4-1,0.1-2.2c0,0,0.7-0.2,2.2,0.8  C6.6,4.1,7.3,4,8,4c0.7,0,1.4,0.1,2,0.3c1.5-1.1,2.2-0.8,2.2-0.8c0.4,1.1,0.2,2,0.1,2.2c0.5,0.6,0.8,1.3,0.8,2.2  c0,3.2-1.9,3.8-3.7,4c0.3,0.3,0.5,0.8,0.5,1.5c0,1.1,0,2,0,2.3c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.2,5.5-7.8C16,3.7,12.4,0,8,0z"/>
</svg></g>
        <text class="text" transform="translate(25 14)">
                <a href="https://github.com/Master-Hash">Master-Hash</a>

        </text>
    </g>
    <g class="item" transform="translate(0 60)" style="animation-delay: 800ms">
        <g class="icon" transform="scale(1.2)"><svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#6D56F3;}
</style>
<circle class="st0" cx="8" cy="8" r="8"/>
<path class="st1" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M12.9,8.1h-1v3.6c0,0.3,0,0.5-0.4,0.5H9.2V8.6H6.8v3.6  H4.6c-0.5,0-0.5-0.2-0.5-0.5l0-3.6h-1c-0.3,0-0.4-0.2-0.2-0.4l4.6-4.6c0.2-0.2,0.6-0.2,0.9,0l4.6,4.6C13.3,7.9,13.2,8.1,12.9,8.1z"/>
</svg></g>
        <text class="text" transform="translate(25 14)">
                <a href="https://one.wh0th.ink/">https://one.wh0th.ink/</a>

        </text>
    </g>
    <g class="item" transform="translate(0 90)" style="animation-delay: 900ms">
        <g class="icon" transform="scale(1.2)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#5b9bd5;}.cls-2{fill:#fff;}</style></defs><title>luogu</title><g id="图层_2" data-name="图层 2"><circle class="cls-1" cx="8" cy="8" r="8"/></g><g id="图层_1" data-name="图层 1"><path class="cls-2" d="M8.9,10.3a1.9,1.9,0,0,1,1.8,1.1,5.8,5.8,0,0,0,1.1,1.5l.3.4c.1.4,0,.6-.4.7a1.7,1.7,0,0,1-1.9-.9,14.7,14.7,0,0,0-1-1.3l-.5-.6c-.1-.2-.2-.2-.3-.1a15,15,0,0,0-2,2.4,1,1,0,0,1-.8.5H4.3c-.4-.1-.5-.3-.3-.7s.5-.7.7-1.1a15.3,15.3,0,0,1,1.8-1.8L8.8,7.9,9,7.7c.3-.4.3-.4-.1-.6l-1-.7L7.6,6c-.1-.4.1-.6.5-.6H9.9a1.5,1.5,0,0,1,1,.6l.5.7a.7.7,0,0,1,0,.9l-.4.5L9.1,10C9,10.1,8.9,10.2,8.9,10.3Z"/><path class="cls-2" d="M8.9,2.9a2.8,2.8,0,0,1-.6,1.5A7.1,7.1,0,0,1,6.8,5.9H6.6c-.5.5-.5.8.1,1.1a1.7,1.7,0,0,1,1,1c.2.4,0,.8-.5,1a1.5,1.5,0,0,1-1.4-.4L4.7,7.6a1.3,1.3,0,0,1,0-2.1A9,9,0,0,0,6.3,3.7l.9-1.1a1.2,1.2,0,0,1,1-.6C8.7,2,9,2.2,8.9,2.9Z"/></g></svg></g>
        <text class="text" transform="translate(25 14)">
                Master_Hash

        </text>
    </g>
</g><g id="quote" transform="matrix(1 0 0 1 300 145)">
        <text class="text" transform="translate(0 0)" style="animation-delay: 1000ms">生无所息。</text>
</g></svg>