わからん-icon
from わからん
idk1.svg<svg width="400" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/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>
idk03.svg<svg width="400" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
#tx01{
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) { /* */
#tx01{
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>
w01.svg<svg width="400" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
:root {
--nandesuka-col-1:black;
--nandesuka-col-2:white;
}
#tx01{
font-weight:800;
fill: none;
stroke: var(--nandesuka-col-1);
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation: textAnime 15s linear infinite;
}
/* @media (prefers-color-scheme: light) { /* */
@media (prefers-color-scheme: dark) { /* */
#tx01{
--nandesuka-col-1:white;
--nandesuka-col-2:black;
}
}
@keyframes textAnime {
0% {
stroke-dashoffset: 800;
}
20% {
stroke-dashoffset: 0;
stroke: var(--nandesuka-col-2);
}
60% {
stroke-dashoffset: 0;
}
80% {
stroke-dashoffset: 800;
/*stroke-dashoffset: 0;*/
stroke: var(--nandesuka-col-1);
}
100% {
stroke-dashoffset: 800;
stroke: var(--nandesuka-col-2);
}
}
</style>
<text id="tx01" x="10" y="90" font-size="90" letter-spacing="10" word-spacing="10" >
わからん
</text>
</svg>