歓迎
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/歓迎/k2.svg
やっつけ
歓迎している感を出すアイデアを求む suto3.icon
一般的なこと
派手な色使いは下品になりやすい
グラデーションやアニメーションは苦手な人もいる
個別のパーツの輪郭線が重なって見えて読みづらいが、おま環だろうかyosider.icon
https://gyazo.com/fe4db696077cde0c0179a48d9c1650ff
ちょっと調べてみます suto3.icon
原因がわかるまで、もとの版に戻します
code:k.svg
<g>
<style type="text/css">
.f01{
stroke-width: 4;
fill-opacity: 0;
}
.f02{
stroke-width: 1;
}
</style>
<ellipse class="f01" cx="50" cy="50" rx="46" ry="46" />
<text class="f02" x="10" y="65" font-size="40">歓迎</text>
</g>
</svg>
code:k2.svg
<g>
<style type="text/css">
.f01{
stroke-width: 4;
fill-opacity: 0;
}
.f02{
stroke-width: 0;
}
</style>
<ellipse class="f01" cx="50" cy="50" rx="46" ry="46">
<animate attributeName="stroke" values="red;yellow;green;cyan;blue;magenta;red" dur="300s" fill="freeze" />
</ellipse>
<text class="f02" x="10" y="65" font-size="40">
歓迎
<animate attributeName="fill" values="red;yellow;green;cyan;blue;magenta;red" dur="300s" fill="freeze" />
</text>
</g>
</svg>
code:k3.svg
<g>
<style type="text/css">
.f01{
stroke: black;
stroke-width: 2;
fill-opacity: 0;
}
.f02{
stroke-width: 2;
fill: black;
}
</style>
<ellipse class="f01" cx="50" cy="50" rx="48" ry="48">
<animate attributeName="stroke" values="red;yellow;green;cyan;blue;magenta;red" dur="300s" fill="freeze" />
</ellipse>
<ellipse class="f01" cx="50" cy="50" rx="46" ry="46"></ellipse>
<ellipse class="f01" cx="50" cy="50" rx="44" ry="44">
<animate attributeName="stroke" values="red;yellow;green;cyan;blue;magenta;red" dur="300s" fill="freeze" />
</ellipse>
<text class="f02" x="10" y="65" font-size="40" font-weight="bold">
歓迎
<animate attributeName="stroke" values="red;yellow;green;cyan;blue;magenta;red" dur="300s" fill="freeze" />
</text>
</g>
</svg>