表記ゆれ
自分が使いたくない書き方には❌をつける。
なるほど.iconなるほど - と思ったが、自分的には刺激が強すぎた ? (表記揺れ|表記のゆれ|表記の揺れ|表記のゆらぎ|表記のバラツキ|言葉の揺れ)
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/表記ゆれ/h02.svg
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/表記ゆれ/hy1.svg
code:hy1.svg
<text x="10" y="90" font-size="90" fill="white" stroke="gray" 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/表記ゆれ/h02.svg
code:h02.svg
<style type="text/css">
:root {
--col-1:black;
--col-2:white;
--col-3:gray;
}
font-weight:800;
fill: var(--col-2);
stroke: var(--col-1);
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
animation: textAnime 12s linear infinite;
}
/* @media (prefers-color-scheme: light) { /* */
@media (prefers-color-scheme: dark) { /* */
--col-1:white;
--col-2:black;
--col-3:blue;
}
}
@keyframes textAnime {
0% {
fill: var(--col-2);
stroke: var(--col-1);
}
10% {
fill: var(--col-2);
stroke: var(--col-1);
}
20% {
fill: var(--col-1);
stroke: var(--col-3);
}
40% {
fill: var(--col-2);
stroke: var(--col-3);
}
60% {
fill: var(--col-2);
stroke: var(--col-3);
}
80% {
fill: var(--col-1);
stroke: var(--col-3);
}
90% {
fill: var(--col-2);
stroke: var(--col-1);
100% {
fill: var(--col-2);
stroke: var(--col-1);
}
}
</style>
<text id="tx01" x="10" y="90" font-size="90" letter-spacing="10" word-spacing="10" >
表記ゆれ
</text>
</svg>