简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

青灯夜游
リリース： 2021-08-31 13:19:08
オリジナル
2762 人が閲覧しました

前回の記事では、HTML5 CSS3を使ってスマイリーフェイスを動的に描画する方法を紹介しました。興味のある方はリンクをクリックしてご覧ください→「HTML5 CSS3を使ってスマイリーフェイスを動的に描画する方法」笑顔＃＃＃"。今回は引き続き、HTML5 SVG を使用してパターンを描画する方法について説明します。

今日の記事の主な内容は、HTML5 svg を使用してさまざまな雪の結晶のパターンを描画することです。

まず、svg とは何かを理解しましょう。

SVG は Scalable Vector Graphics の略称です。 XMLで形状を指定するグラフィックフォーマットです。次に、XML は SVG ビューアによってレンダリングされます。現在、ほとんどの Web ブラウザーは、PNG、GIF、JPG を表示できるのと同じように、SVG を表示できます。 SVG は 2 次元のベクター グラフィックスに使用されます。

SVG 画像は、ベクター画像の構造、描画、レイアウトに適用されるさまざまな要素を使用して作成されます。 svg がルート要素でない場合、svg 要素を使用して、現在のドキュメント (HTML ドキュメントなど) 内に別の svg フラグメントをネストできます。この独立したフラグメントには、独自のビューポートと座標系があります。

HTML5 SVG を使用してさまざまな雪の結晶のパターンを描画する方法を見てみましょう。

まず、ページ全体の背景色、SVG キャンバスのサイズ、線の色を設定します。

body {
  background: #222;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
svg {
  width: 25vmin;
  height: 25vmin;
}
.stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
ログイン後にコピー

次に、SVG を使用して、さまざまな雪の結晶パターンを描画します

  • svg タグを定義し、SVG 画像のルート要素を作成し、現在のドキュメント内に独立した svg フラグメントをネストして、複数の

  • 最初のスノーフレーク パターン

    ##
    <svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(315)"></path>
</svg>
    ログイン後にコピー

パターンが複雑になると、必要な タグの数が多いほど、HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

#2 番目の雪の結晶パターン

  • <svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(22.5)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(67.5)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(112.5)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(157.5)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(202.5)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(247.5)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(292.5)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(315)"></path>
  <path class="stroke" d="M0 0L1.6634497752687372 20L0 40L-1.6634497752687372 20Z" transform="rotate(337.5)"></path>
</svg>
    ログイン後にコピー

##3 番目のスノーフレーク パターンHTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

    <svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(22.5)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(67.5)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(112.5)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(157.5)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(202.5)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(247.5)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(292.5)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(315)"></path>
  <path class="stroke" d="M0 0L2.645725030881371 13.333333333333332L3.728798894927402 26.666666666666664L0 40L-3.728798894927402 26.666666666666664,-2.645725030881371 13.333333333333332Z" transform="rotate(337.5)"></path>
</svg>
    ログイン後にコピー

4 番目のスノーフレーク パターンHTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

    <svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L3.9069046308621145 8L0.2803462755249264 16L1.3426140019106725 24L3.2113372873289494 32L0 40L-3.2113372873289494 32,-1.3426140019106725 24,-0.2803462755249264 16,-3.9069046308621145 8Z" transform="rotate(315)"></path>
</svg>
    ログイン後にコピー

雪の結晶模様の 5 種類目HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

##
<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L3.500500045242144 10L2.1870956887049573 20L2.8219653962792055 30L0 40L-2.8219653962792055 30,-2.1870956887049573 20,-3.500500045242144 10Z" transform="rotate(315)"></path>
</svg>
ログイン後にコピー

    • #6 種類目の雪の結晶パターン

HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(30)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(60)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(120)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(150)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(210)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(240)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(300)"></path>
  <path class="stroke" d="M0 0L2.7808588336228137 6.666666666666666L2.1342725907455398 13.333333333333332L4.592686910201785 20L4.580044998117561 26.666666666666664L0.49595540446043196 33.333333333333336L0 40L-0.49595540446043196 33.333333333333336,-4.580044998117561 26.666666666666664,-4.592686910201785 20,-2.1342725907455398 13.333333333333332,-2.7808588336228137 6.666666666666666Z" transform="rotate(330)"></path>
</svg>
ログイン後にコピー

    • 7 番目の雪の結晶パターン

HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(30)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(60)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(120)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(150)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(210)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(240)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(300)"></path>
  <path class="stroke" d="M0 0L0.07872251235261918 6.666666666666666L0.9389959879037879 13.333333333333332L4.796525690483721 20L3.2752975128007487 26.666666666666664L1.0716345277156836 33.333333333333336L0 40L-1.0716345277156836 33.333333333333336,-3.2752975128007487 26.666666666666664,-4.796525690483721 20,-0.9389959879037879 13.333333333333332,-0.07872251235261918 6.666666666666666Z" transform="rotate(330)"></path>
</svg>
ログイン後にコピー

    • 8 番目の雪の結晶パターン

HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L4.448487496776621 20L0 40L-4.448487496776621 20Z" transform="rotate(315)"></path>
</svg>
ログイン後にコピー

    • 9 番目の雪の結晶パターン

HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(22.5)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(67.5)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(112.5)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(157.5)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(202.5)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(247.5)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(292.5)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(315)"></path>
  <path class="stroke" d="M0 0L0.0822926876233343 8L2.817490322698305 16L3.2030333381527045 24L4.224773598701253 32L0 40L-4.224773598701253 32,-3.2030333381527045 24,-2.817490322698305 16,-0.0822926876233343 8Z" transform="rotate(337.5)"></path>
</svg>
ログイン後にコピー

    • 10 番目の雪の結晶パターン

HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(22.5)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(67.5)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(112.5)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(157.5)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(202.5)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(247.5)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(292.5)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(315)"></path>
  <path class="stroke" d="M0 0L2.2598393302591613 6.666666666666666L1.487386694358931 13.333333333333332L1.103090066254735 20L0.7179917782191259 26.666666666666664L1.0827470846512688 33.333333333333336L0 40L-1.0827470846512688 33.333333333333336,-0.7179917782191259 26.666666666666664,-1.103090066254735 20,-1.487386694358931 13.333333333333332,-2.2598393302591613 6.666666666666666Z" transform="rotate(337.5)"></path>
</svg>
ログイン後にコピー

    • 雪の結晶模様の11種類目

HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(30)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(60)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(120)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(150)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(210)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(240)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(300)"></path>
  <path class="stroke" d="M0 0L3.988325457231092 8L4.502930409213891 16L0.8211565034076007 24L3.4517589123912815 32L0 40L-3.4517589123912815 32,-0.8211565034076007 24,-4.502930409213891 16,-3.988325457231092 8Z" transform="rotate(330)"></path>
</svg>
ログイン後にコピー

    • 12種類目雪の結晶パターンの種類

1HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(30)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(60)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(120)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(150)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(210)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(240)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(300)"></path>
  <path class="stroke" d="M0 0L4.435296980906328 6.666666666666666L4.050728537406023 13.333333333333332L3.727317197820017 20L3.28459194301963 26.666666666666664L1.8434186480542292 33.333333333333336L0 40L-1.8434186480542292 33.333333333333336,-3.28459194301963 26.666666666666664,-3.727317197820017 20,-4.050728537406023 13.333333333333332,-4.435296980906328 6.666666666666666Z" transform="rotate(330)"></path>
</svg>
ログイン後にコピー

    • 13 番目の雪の結晶パターン

1HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(22.5)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(67.5)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(112.5)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(157.5)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(202.5)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(247.5)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(292.5)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(315)"></path>
  <path class="stroke" d="M0 0L4.058411276665962 10L4.606955843743698 20L4.430194364333656 30L0 40L-4.430194364333656 30,-4.606955843743698 20,-4.058411276665962 10Z" transform="rotate(337.5)"></path>
</svg>
ログイン後にコピー

    • 14 番目の雪の結晶パターン

1HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L2.7099091820333676 6.666666666666666L0.78001276802663 13.333333333333332L3.1239933954385215 20L0.2293465743723866 26.666666666666664L2.3642420332182104 33.333333333333336L0 40L-2.3642420332182104 33.333333333333336,-0.2293465743723866 26.666666666666664,-3.1239933954385215 20,-0.78001276802663 13.333333333333332,-2.7099091820333676 6.666666666666666Z" transform="rotate(315)"></path>
</svg>
ログイン後にコピー

    • 15 種類の雪の結晶パターン

1HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(30)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(60)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(120)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(150)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(210)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(240)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(300)"></path>
  <path class="stroke" d="M0 0L1.6476592555957326 13.333333333333332L4.081294420859312 26.666666666666664L0 40L-4.081294420859312 26.666666666666664,-1.6476592555957326 13.333333333333332Z" transform="rotate(330)"></path>
</svg>
ログイン後にコピー

    • 雪の結晶パターンの 16 種類目

1HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L1.4887909575585645 8L1.457441298678528 16L4.112324612597892 24L1.4648800042392651 32L0 40L-1.4648800042392651 32,-4.112324612597892 24,-1.457441298678528 16,-1.4887909575585645 8Z" transform="rotate(315)"></path>
</svg>
ログイン後にコピー

    • 17 番目の雪の結晶パターン 
<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(22.5)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(67.5)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(112.5)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(157.5)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(202.5)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(247.5)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(292.5)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(315)"></path>
  <path class="stroke" d="M0 0L4.706649031921112 8L2.1058912110452246 16L4.796543379176457 24L2.1485703817497095 32L0 40L-2.1485703817497095 32,-4.796543379176457 24,-2.1058912110452246 16,-4.706649031921112 8Z" transform="rotate(337.5)"></path>
</svg>
ログイン後にコピー

1HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

  • 第十八种雪花图案

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(22.5)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(67.5)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(112.5)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(157.5)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(202.5)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(247.5)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(292.5)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(315)"></path>
  <path class="stroke" d="M0 0L0.27198677565056895 8L0.5201952685092193 16L0.7545603484012364 24L2.9753027212210457 32L0 40L-2.9753027212210457 32,-0.7545603484012364 24,-0.5201952685092193 16,-0.27198677565056895 8Z" transform="rotate(337.5)"></path>
</svg>
ログイン後にコピー

1HTML5 SVG を使用してさまざまな雪の結晶パターンを描画する

大家可以直接复制以上代码，在本地进行运行演示。

这里给大家介绍几个关键的标签和属性：

  • <svg> 元素

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。

所有SVG图像的根元素都是 <svg>元素。

<svg viewBox="-50 -50 100 100">
  
</svg>
ログイン後にコピー

  • <path></path> 路径

path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG 元素用于绘制由直线，圆弧，曲线等组合而成的高级形状，带或不带填充。该 元素可能是所有元素中最先进，最通用的SVG形状。它可能也是最难掌握的元素。

所有带有元素的绘图都在d属性中指定。 d属性包含绘图命令。

d属性中的第一个绘图命令应该始终是move命令。在你可以画任何东西之前，你应该把虚拟笔移到某个地方。这是使用M命令完成的。

PHP中文网平台有非常多的视频教学资源，欢迎大家学习《HTML视频教程》！

以上がHTML5 SVG を使用してさまざまな雪の結晶パターンを描画するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html5 svg
ソース：php.cn
前の記事：HTML5+CSS3を使って動的にスマイリーフェイスを描画する方法 次の記事：サイトで https と http2 を有効にする方法を段階的に説明します (コード付き)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！