円に沿って回転するテキストアニメーション

円形にテキストを配置して回転させるアニメーションって、どうやって作るんですか？

SVGの<textPath>要素を使って、テキストを円形パスに沿って配置できるんだよ。今回は太陽のように回転する「NEW YEAR」のテキストアニメーションを作ってみたんだ。

作成したテキストアニメーション

SVGで円形パスを定義し、そのパスに沿ってテキストを配置。CSSアニメーションで無限回転させることで、太陽のように回転するテキストエフェクトを実現します。

HTML

<div class="container" role="main">
    <!-- SVG太陽テキスト -->
    <svg class="sun-svg" viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="回転するNEW YEARテキスト">
        <defs>
            <!-- 太陽のグラデーション -->
            <radialgradient id="sunGradient" cx="50%" cy="50%" r="50%">
                <stop offset="0%" style="stop-color:#FFEB3B;stop-opacity:1"></stop>
                <stop offset="50%" style="stop-color:#FFC107;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#FF9800;stop-opacity:0.9"></stop>
            </radialgradient>

            <!-- 円形のテキストパス -->
            <path id="circlePath" d="M 250,250 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" fill="none"></path>
        </defs>

        <!-- 回転するグループ -->
        <g class="rotating-group">
            <!-- 円形に配置されたテキスト -->
            <text class="sun-text">
                <textpath href="#circlePath" startoffset="0%" textlength="618" lengthadjust="spacingAndGlyphs">
                    NEW YEAR · NEW YEAR · NEW YEAR · NEW YEAR ·
                </textpath>
            </text>
        </g>

        <!-- 中心の太陽コア -->
        <circle class="sun-core" cx="250" cy="250" r="24"></circle>
    </svg>
</div>

CSS

/* ========================================
   リセット & 基本設定
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    padding: 20px;
    overflow: hidden;
    position: relative;
}

/* ========================================
   メインコンテナ
   ======================================== */
.container {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================
   SVG太陽テキスト
   ======================================== */
.sun-svg {
    width: 100%;
    height: 100%;
}

/* 回転アニメーション */
.rotating-group {
    animation: rotate 26s linear infinite;
    transform-origin: center;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 中心の太陽コア */
.sun-core {
    fill: url(#sunGradient);
    filter: drop-shadow(0 0 22px rgba(255, 180, 70, 0.5));
}

/* テキストスタイル */
.sun-text {
    fill: #ffffff;
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
    paint-order: fill;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

SVGを使って、円形に配置されたテキストが回転するアニメーションを作成してください。

### 全体構成
- 中心に太陽のような円形のコアを配置
- その周囲にテキストを円形に配置
- テキストが時計回りにゆっくり回転

### 中心のコア
- オレンジ系のグラデーション
- 柔らかい光のような影を追加

### テキスト
- 白色で読みやすく
- 円形パスに沿って配置
- 同じテキストを複数回繰り返して円を埋める

### アニメーション
- 全体がゆっくりと回転（約26秒で1周）
- 滑らかな無限ループ

### 背景
- ダークな背景で太陽とテキストが映える

このアニメーションの特徴

SVG textPath 円形パスに沿ってテキストを配置し、自然な円形配置を実現
transform-origin 回転の中心点を指定することで、正確な円運動を実現
radialGradient 放射状グラデーションで太陽のような質感を表現
無限回転 animation infiniteで途切れることなく回転し続ける

コードのポイント

SVGパスによるテキスト配置

<path id="circlePath" d="M 250,250 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" fill="none"></path>

<text class="sun-text">
    <textPath href="#circlePath" startOffset="0%" textLength="618">
        NEW YEAR · NEW YEAR · NEW YEAR · NEW YEAR ·
    </textPath>
</text>

<path>で円形のパスを定義し、idで識別
<textPath>のhref属性でパスを参照
textLengthとlengthAdjustで文字間隔を調整

回転アニメーションの実装

.rotating-group {
    animation: rotate 26s linear infinite;
    transform-origin: center;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

transform-origin: centerで中心を回転軸に指定
linearで一定速度の回転を実現
infiniteで無限ループ

グラデーションとシャドウ

.sun-core {
    fill: url(#sunGradient);
    filter: drop-shadow(0 0 22px rgba(255, 180, 70, 0.5));
}

radialGradientで放射状のグラデーション定義
drop-shadowで柔らかい光の表現

SVGでテキストを円形に配置できるんですね。これってロゴにも使えそう！

そうだね。textPathを使えば、直線だけでなく波形や曲線など、どんな形のパスにもテキストを沿わせることができるんだ。アイデア次第で色々な表現が可能だよ。

まとめ

SVGのパスに沿ってテキストを配置して、CSSで回転させるだけでこんなにかっこいいアニメーションができるんですね！

SVGとCSSアニメーションの組み合わせは本当に強力だよ。textPathは円だけでなく、波形や曲線など様々な形に対応できるから、色々なデザインに応用できるんだ。

SVG textPath 円形パスに沿ったテキスト配置で自然な円形レイアウト
transform-origin 中心軸を指定した正確な回転アニメーション
radialGradient 放射状グラデーションで立体感と光の表現
無限ループ animation infiniteで途切れないスムーズな回転

次回は、さらに複雑なテキストアニメーションやパーティクルエフェクトについて学びます。