なんですかそれは

なんですかそれは

何だすかそれは

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/なんですかそれは/nss01.svg

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/なんですかそれは/x010.svg

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/なんですかそれは/t4.svg

code:t4.svg

<text x="10" y="90" font-size="90" fill="white" stroke="black" stroke-width="4"

font-weight="800" letter-spacing="10" word-spacing="10" >

なんですかそれは

</text>

</svg>

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/なんですかそれは/t05.svg

code:t05.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="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/なんですかそれは/x010.svg

code:x010.svg

<style type="text/css">

:root {

--nandesuka-col-1:black;

--nandesuka-col-2:white;

}

font-weight:800;

fill: none;

stroke: var(--nandesuka-col-1);

stroke-width:4;

stroke-linecap:round;

stroke-linejoin:round;

stroke-dasharray: 600;

stroke-dashoffset: 600;

animation: textAnime 12s linear infinite;

}

/* @media (prefers-color-scheme: light) { /* */

@media (prefers-color-scheme: dark) { /* */

--nandesuka-col-1:white;

--nandesuka-col-2:black;

}

}

@keyframes textAnime {

0% {

stroke-dashoffset: 600;

}

40% {

stroke-dashoffset: 0;

stroke: var(--nandesuka-col-2);

}

80% {

stroke-dashoffset: 0;

}

100% {

stroke-dashoffset: 0;

}

}

</style>

<text id="tx01" x="10" y="90" font-size="90" letter-spacing="10" word-spacing="10" >

なんですかそれは!

</text>

</svg>

code:nss01.svg

<style type="text/css">

font-weight:800;

fill: white;

stroke: black;

stroke-width:4;

stroke-linecap:round;

stroke-linejoin:round;

animation: scrollAnime 10s linear infinite;

}

/* @media (prefers-color-scheme: light) { /* */

@media (prefers-color-scheme: dark) { /* */

fill:black;

stroke:white;

}

}

@keyframes scrollAnime{

0% { transform: translateX(100%)}

100% { transform: translateX(-420%)}

}

</style>

<text id="tx01" x="10" y="90" font-size="90" letter-spacing="10" word-spacing="10" >

なんですかそれは

</text>

</svg>