header.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 170">
    <defs>
        <style>
            <![CDATA[
                @import url("https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@700&display=swap");
                @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");
                .title-text {
                    font-family: 'Kaisei Decol', serif;
                    font-weight: 750;
                    stroke: #a50000;
                    stroke-width: 0.5px;
                }
            ]]>
        </style>

        <!-- 背景グラデーション -->
        <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#ffefd5;">
                <animate attributeName="stop-color" 
                         values="#ffefd5;#fae5b3;#ffe4c4;#ffefd5" 
                         dur="8s" 
                         repeatCount="indefinite" />
            </stop>
            <stop offset="100%" style="stop-color:#f5deb3;">
                <animate attributeName="stop-color" 
                         values="#f5deb3;#ffedd5;#ffdab9;#f5deb3" 
                         dur="8s" 
                         repeatCount="indefinite" />
            </stop>
        </linearGradient>

        <!-- テキストグラデーション -->
        <linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#b91c1c">
                <animate attributeName="stop-color" 
                         values="#b91c1c;#dc2626;#b91c1c" 
                         dur="4s" 
                         repeatCount="indefinite" />
            </stop>
            <stop offset="100%" style="stop-color:#e11d48">
                <animate attributeName="stop-color" 
                         values="#e11d48;#be123c;#e11d48" 
                         dur="4s" 
                         repeatCount="indefinite" />
            </stop>
        </linearGradient>

        <!-- 猫アイコンのグラデーション -->
        <linearGradient id="catGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#ffb347">
                <animate attributeName="stop-color" 
                         values="#ffb347;#ffcc33;#ffb347" 
                         dur="3s" 
                         repeatCount="indefinite" />
            </stop>
            <stop offset="100%" style="stop-color:#ffa500">
                <animate attributeName="stop-color" 
                         values="#ffa500;#ff8c00;#ffa500" 
                         dur="3s" 
                         repeatCount="indefinite" />
            </stop>
        </linearGradient>

        <filter id="dropShadow" x="-10%" y="-10%" width="120%" height="130%">
            <feDropShadow dx="1" dy="1" stdDeviation="0.5" flood-color="rgba(0, 0, 0, 0.3)" flood-opacity="1"/>
        </filter>

        <!-- 光沢効果 -->
        <linearGradient id="shineGradient">
            <stop offset="0%" stop-color="rgba(255,255,255,0)"/>
            <stop offset="50%" stop-color="rgba(255,255,255,0.3)"/>
            <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
            <animateTransform attributeName="gradientTransform"
                              type="translate"
                              from="-1"
                              to="1"
                              dur="3s"
                              repeatCount="indefinite"/>
        </linearGradient>
    </defs>

    <!-- 背景 -->
    <rect width="900" height="170" rx="10" ry="10" fill="url(#bgGradient)">
        <animate attributeName="opacity"
                 values="0.95;1;0.95"
                 dur="4s"
                 repeatCount="indefinite"/>
    </rect>

    <!-- 装飾的な円 -->
    <circle cx="200" cy="60" r="35" fill="#ffd4b3" opacity="0.8">
        <animate attributeName="r"
                 values="35;38;35"
                 dur="4s"
                 repeatCount="indefinite"/>
    </circle>
    <circle cx="600" cy="60" r="25" fill="#ffe0b3" opacity="0.6">
        <animate attributeName="r"
                 values="25;28;25"
                 dur="3s"
                 repeatCount="indefinite"/>
    </circle>

    <!-- 新しい猫アイコン -->
    <g fill="url(#catGradient)" transform="scale(0.08)">
        <path d="M320 192l17.1 0c22.1 38.3 63.5 64 110.9 64c11 0 21.8-1.4 32-4l0 4 0 32 0 192c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-140.8L280 448l56 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-144 0c-53 0-96-43-96-96l0-223.5c0-16.1-12-29.8-28-31.8l-7.9-1c-17.5-2.2-30-18.2-27.8-35.7s18.2-30 35.7-27.8l7.9 1c48 6 84.1 46.8 84.1 95.3l0 85.3c34.4-51.7 93.2-85.8 160-85.8zm160 26.5s0 0 0 0c-10 3.5-20.8 5.5-32 5.5c-28.4 0-54-12.4-71.6-32c0 0 0 0 0 0c-3.7-4.1-7-8.5-9.9-13.2C357.3 164 352 146.6 352 128c0 0 0 0 0 0l0-96 0-20 0-1.3C352 4.8 356.7 .1 362.6 0l.2 0c3.3 0 6.4 1.6 8.4 4.2c0 0 0 0 0 .1L384 21.3l27.2 36.3L416 64l64 0 4.8-6.4L512 21.3 524.8 4.3c0 0 0 0 0-.1c2-2.6 5.1-4.2 8.4-4.2l.2 0C539.3 .1 544 4.8 544 10.7l0 1.3 0 20 0 96c0 17.3-4.6 33.6-12.6 47.6c-11.3 19.8-29.6 35.2-51.4 42.9zM432 128a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z">
            <!-- アニメーション -->
            <animateMotion 
                path="M0,0 H9000 Z M9000,0 H0 Z"
                dur="100s"
                repeatCount="indefinite">
            </animateMotion>
            <!-- 上下の揺れアニメーション -->
            <animate attributeName="y"
                     values="0;3;0;-3;0"
                     dur="10s"
                     repeatCount="indefinite"/>
            <!-- スケールアニメーション -->
            <animateTransform
                attributeName="transform"
                type="scale"
                values="1;1.1;1"
                dur="5.5s"
                repeatCount="indefinite"
                additive="sum"/>
        </path>
    </g>

    <!-- メインテキスト -->
    <text x="440" y="120"
          font-size="38"
          fill="url(#textGradient)"
          text-anchor="middle"
          class="title-text"
          filter="url(#dropShadow)">
        Llama3.2-11B-Radiography-v0-float16
        <animate attributeName="opacity"
                 values="0.95;1;0.95"
                 dur="3s"
                 repeatCount="indefinite"/>
    </text>

    <!-- 光沢オーバーレイ -->
    <rect width="900" height="170" rx="10" ry="10" 
          fill="url(#shineGradient)"
          opacity="0.3">
    </rect>
</svg>