お疲れさまです-icon
お疲れさまです
[https://scrapbox.io/api/pages/suto3/お疲れさまです-icon/icon#.svg]
[https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/お疲れさまです-icon/o01.svg]
code:o01.svg
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
#tx01{
font-weight:800;
fill: white;
stroke: gray;
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
animation: scrollAnime 7s linear infinite;
}
/* @media (prefers-color-scheme: light) { /* */
@media (prefers-color-scheme: dark) { /* */
#tx01{
fill:black;
stroke:gray;
}
}
@keyframes scrollAnime{
0% { transform: translateX(100%)}
100% { transform: translateX(-720%)}
}
</style>
<text id="tx01" x="10" y="90" font-size="90" letter-spacing="10" word-spacing="10" >
お疲れさまです
</text>
</svg>
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/お疲れさまです-icon/o02.svg
code:o02.svg
<svg width="400" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="5" y="5" width="390" height="90" rx="45" ry="45"
fill-opacity="0" stroke="#ff4400" stroke-width="3" />
<text x="45" y="70" font-size="45" fill="#ff4400"
font-weight="400" letter-spacing="-1" word-spacing="-1" >
お疲れさまです
</text>
</g>
</svg>