はじめに 🎄

この記事でやること

AIでSVG形式のクリスマスツリーを生成する方法を体験。
JavaScriptで装飾をランダムに変化させ、動的な要素を追加。
SVGにCSSアニメーションを追加。

対象読者

Web開発初心者、SVG未経験者、AI活用や動的なデザインに興味のある方。

完成したもの

See the Pen クリスマスツリー by OS (@_os) on CodePen.

SVGとは？ ✍️

SVGの特徴

XMLベースのマークアップ言語でHTMLに似た構造。
ベクター形式で拡大しても画質が劣化しない。
JavaScriptやCSSで動的に操作可能。

JPEGやPNGとは違い、画素でデータを取り扱わないので、テキスト生成AIで生成可能です。

クリスマスツリーのSVGデザイン 🖌️

テキスト生成AIさんに
「svgでクリスマスツリーを書いて」
とお願いしました。

以下はSVGでクリスマスツリーを描画するコードの例です。このコードをHTMLファイルに埋め込むと、ブラウザで表示できます。

<svg width="200" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="100%" height="100%" fill="#87CEEB" />
  
  <!-- ツリーの幹 -->
  <rect x="90" y="200" width="20" height="50" fill="#8B4513" />
  
  <!-- ツリーの葉 -->
  <polygon points="50,200 100,100 150,200" fill="#228B22" />
  <polygon points="60,170 100,80 140,170" fill="#2E8B57" />
  <polygon points="70,140 100,60 130,140" fill="#32CD32" />
  
  <!-- 星 -->
  <polygon points="100,40 105,55 120,55 110,65 115,80 100,70 85,80 90,65 80,55 95,55"
           fill="#FFD700" />

  <!-- オーナメント -->
  <circle cx="85" cy="150" r="5" fill="#FF4500" />
  <circle cx="115" cy="150" r="5" fill="#1E90FF" />
  <circle cx="100" cy="120" r="5" fill="#FFD700" />
  <circle cx="90" cy="180" r="5" fill="#FF69B4" />
  <circle cx="110" cy="180" r="5" fill="#ADFF2F" />
</svg>

説明

幹: <rect>要素を使用して、ツリーの幹を作成しています。

葉: <polygon>要素で三角形の層を作成しています。

星: ツリーの頂点に星を描画。

オーナメント: <circle>で装飾を追加。

このコードをテキストエディタで保存し、.svgファイルとしてブラウザで開いてください。クリスマス気分を楽しんでください🎄✨

JavaScriptで装飾をランダムに変更 🎨

装飾を色の変化をJavaScriptで実現するようにAIさんにお願いしました。

ランダムな色変更を追加
JavaScriptを使って装飾の色を一定時間ごとにランダムに変更するコード：

const christmasColors = ["#FF0000", "#FFD700", "#1E90FF", "#FF69B4", "#FFA500"]; // 赤, 金, 青, ピンク, オレンジ
function getRandomChristmasColor() {
    const randomIndex = Math.floor(Math.random() * christmasColors.length);
    return christmasColors[randomIndex];
}

setInterval(() => {
    document.querySelectorAll('circle').forEach(circle => {
        circle.setAttribute('fill', getRandomChristmasColor());
    });
}, 1000); // 1秒ごとに色を変更

私が生成AI通りの黄緑色（#ADFF2F）が木の緑色と近い色で気になり、オレンジ色（#FF69B4）に変更しました。

アニメーション効果を追加 💡

AIさんに点滅する星をCSSの@keyframesでアニメーションを実現してもらいました。

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.blinking {
    animation: blink 1s infinite;
}

まとめ

画像生成AIといえば、JPEGやPNG形式を思い浮かべる方が多いかもしれません。しかし、プログラマーにとっては、JavaScriptで操作可能なSVG形式も魅力的です。

SVGの読み書きは、習得するのは難しいですが、AIさんにかかればお手のものです。

SVGファイルをテキストエディタで開けることをまだご存知ではなかった方も多いと思います。ちょっとした知識として覚えておくと、とても楽しくAIやWebブラウザで遊べますよ。

次のステップ

ぜひ、自分の好きなデザインをSVGで作成し、アニメーションやインタラクションを追加してみてください。AIやJavaScript、CSSアニメーションと組み合わせることで、より楽しいWebコンテンツを作ることができます！