Why
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/Why/w01.svg
code:w02.svg
<rect x="5" y="5" width="180" height="90" rx="40" ry="40"
fill="#DDD" fill-opacity="1" stroke="#DDD" stroke-width="4" />
<text x="20" y="80" font-size="70" stroke-width="4" stroke="white" fill="white"
font-weight="700" letter-spacing="5" word-spacing="5" >
why
</text>
</svg>
code:w01.svg
<style type="text/css">
font-weight:800;
fill: white;
stroke: black;
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: textAnime 5s linear infinite;
}
/* @media (prefers-color-scheme: light) { /* */
@media (prefers-color-scheme: dark) { /* */
fill:black;
stroke:white;
}
}
@keyframes textAnime {
0% {
stroke-dashoffset: 600;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
<text id="tx01" x="10" y="80" font-size="90" letter-spacing="10" word-spacing="10" >
why
</text>
</svg>