SVGスパークルジェネレーター | 好きな見た目のスパークルを作成

プレビュー

背景色

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" overflow="visible">
  <path
    d="M 50 0 C 50 25, 75 50, 100 50 C 75 50, 50 75, 50 100 C 50 75, 25 50, 0 50 C 25 50, 50 25, 50 0 Z"
    fill="#ffffff"
    fill-opacity="1"
    stroke="#f59e0b"
    stroke-opacity="0.5"
    stroke-width="4"
    stroke-linejoin="round"
    stroke-miterlimit="4"
  />
</svg>

SVGスパークルジェネレーターについて

スパークル（キラキラマーク）のSVGを、その場で見た目を確認しながら調整できるジェネレーターです。

作成したSVGは、商用・非商用問わず、無制限に利用可能です。クレジット表記も必要ありません。

使い方

形状、塗りつぶし、ストロークの設定を変更すると、プレビューとSVGコードに反映されます。

プレビューの背景色はSVGコードには含まれません。スパークルの見え方の確認に利用してください。

ストロークの接続部など、SVGサイズ外に飛び出す部分を表示させるため、overflowはデフォルトでvisibleになっています。「全体をSVGサイズ内に収める」をONにすると、これがhiddenになる代わりに、viewBoxが調整され、全体がSVGサイズ内に収まるようになります。

お問い合わせ

ご意見・ご要望は管理者X( @ankyo_gh )までご連絡ください。