<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
    <title id="title">shiitake256.net blog social image</title>
    <desc id="desc">Light technical blog featured image with geometric fractal pattern.</desc>

    <defs>
        <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#f8fbff"/>
            <stop offset="55%" stop-color="#eef6ff"/>
            <stop offset="100%" stop-color="#e7f1ff"/>
        </linearGradient>

        <radialGradient id="glowA" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#bfe3ff" stop-opacity="0.95"/>
            <stop offset="55%" stop-color="#9fd7ff" stop-opacity="0.28"/>
            <stop offset="100%" stop-color="#9fd7ff" stop-opacity="0"/>
        </radialGradient>

        <radialGradient id="glowB" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#d7c8ff" stop-opacity="0.65"/>
            <stop offset="60%" stop-color="#d7c8ff" stop-opacity="0.14"/>
            <stop offset="100%" stop-color="#d7c8ff" stop-opacity="0"/>
        </radialGradient>

        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#4ca5ff"/>
            <stop offset="50%" stop-color="#6ed6ff"/>
            <stop offset="100%" stop-color="#8a8cff"/>
        </linearGradient>

        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="#77a6ea" stroke-opacity="0.14" stroke-width="1"/>
            <circle cx="0" cy="0" r="1.5" fill="#77a6ea" fill-opacity="0.22"/>
        </pattern>

        <filter id="blur64" x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="32"/>
        </filter>

        <filter id="blur20" x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="10"/>
        </filter>

        <!-- level 1 -->
        <g id="hexL1">
            <polygon points="0,-56 48,-28 48,28 0,56 -48,28 -48,-28"
                     fill="none" stroke="url(#lineGrad)" stroke-width="2.4"/>
            <polygon points="0,-34 29,-17 29,17 0,34 -29,17 -29,-17"
                     fill="none" stroke="#9fd3ff" stroke-opacity="0.80" stroke-width="1.4"/>
            <path d="M0 0L0 -56M0 0L48 -28M0 0L48 28M0 0L0 56M0 0L-48 28M0 0L-48 -28"
                  fill="none" stroke="#8ac6ff" stroke-opacity="0.50" stroke-width="1.2"/>
            <circle cx="0" cy="0" r="6" fill="#ffffff" stroke="#67b7ff" stroke-width="2"/>
            <circle cx="0" cy="-56" r="4.2" fill="#ffffff" stroke="#67b7ff" stroke-width="1.6"/>
            <circle cx="48" cy="-28" r="4.2" fill="#ffffff" stroke="#67b7ff" stroke-width="1.6"/>
            <circle cx="48" cy="28" r="4.2" fill="#ffffff" stroke="#67b7ff" stroke-width="1.6"/>
            <circle cx="0" cy="56" r="4.2" fill="#ffffff" stroke="#67b7ff" stroke-width="1.6"/>
            <circle cx="-48" cy="28" r="4.2" fill="#ffffff" stroke="#67b7ff" stroke-width="1.6"/>
            <circle cx="-48" cy="-28" r="4.2" fill="#ffffff" stroke="#67b7ff" stroke-width="1.6"/>
        </g>

        <!-- level 2 -->
        <g id="hexL2">
            <use href="#hexL1"/>
            <g opacity="0.92">
                <use href="#hexL1" transform="translate(0,-92) scale(0.52)"/>
                <use href="#hexL1" transform="translate(79.7,-46) scale(0.52)"/>
                <use href="#hexL1" transform="translate(79.7,46) scale(0.52)"/>
                <use href="#hexL1" transform="translate(0,92) scale(0.52)"/>
                <use href="#hexL1" transform="translate(-79.7,46) scale(0.52)"/>
                <use href="#hexL1" transform="translate(-79.7,-46) scale(0.52)"/>
            </g>
            <circle r="86" fill="none" stroke="#8cbcff" stroke-opacity="0.28" stroke-width="1.5" stroke-dasharray="5 8"/>
        </g>

        <!-- level 3 -->
        <g id="hexL3">
            <use href="#hexL2"/>
            <g opacity="0.86">
                <use href="#hexL2" transform="translate(0,-150) scale(0.48)"/>
                <use href="#hexL2" transform="translate(129.9,-75) scale(0.48)"/>
                <use href="#hexL2" transform="translate(129.9,75) scale(0.48)"/>
                <use href="#hexL2" transform="translate(0,150) scale(0.48)"/>
                <use href="#hexL2" transform="translate(-129.9,75) scale(0.48)"/>
                <use href="#hexL2" transform="translate(-129.9,-75) scale(0.48)"/>
            </g>
            <circle r="150" fill="none" stroke="#77a8ff" stroke-opacity="0.22" stroke-width="1.5" stroke-dasharray="3 10"/>
        </g>

        <g id="spark">
            <circle r="3.5" fill="#ffffff" stroke="#79c0ff" stroke-width="1.4"/>
        </g>
    </defs>

    <!-- background -->
    <rect width="1200" height="630" fill="url(#bg)"/>
    <rect width="1200" height="630" fill="url(#grid)"/>

    <!-- soft ambient glows -->
    <circle cx="930" cy="290" r="250" fill="url(#glowA)" filter="url(#blur64)"/>
    <circle cx="1035" cy="160" r="120" fill="url(#glowB)" filter="url(#blur64)"/>
    <circle cx="880" cy="470" r="110" fill="url(#glowB)" filter="url(#blur64)"/>

    <!-- subtle left accent -->
    <g opacity="0.45" transform="translate(170 120) scale(0.55)">
        <use href="#hexL2"/>
    </g>

    <!-- main fractal geometry -->
    <g transform="translate(900 315)">
        <circle r="205" fill="none" stroke="#c7dcff" stroke-width="1.2" opacity="0.55"/>
        <circle r="245" fill="none" stroke="#d7e7ff" stroke-width="1" opacity="0.45"/>
        <use href="#hexL3"/>

        <!-- orbit points -->
        <g opacity="0.95">
            <use href="#spark" transform="translate(0,-205)"/>
            <use href="#spark" transform="translate(177,-102)"/>
            <use href="#spark" transform="translate(177,102)"/>
            <use href="#spark" transform="translate(0,205)"/>
            <use href="#spark" transform="translate(-177,102)"/>
            <use href="#spark" transform="translate(-177,-102)"/>
        </g>

        <!-- extra network links -->
        <path d="M0 -205L177 -102L177 102L0 205L-177 102L-177 -102Z"
              fill="none" stroke="#8ec9ff" stroke-opacity="0.35" stroke-width="1.4"/>
        <path d="M-177 -102L177 102M177 -102L-177 102M0 -205L0 205"
              fill="none" stroke="#8ec9ff" stroke-opacity="0.18" stroke-width="1.2"/>
        </g>

        <!-- decorative small nodes -->
        <g opacity="0.65">
            <use href="#spark" transform="translate(760 120)"/>
            <use href="#spark" transform="translate(1110 250)"/>
            <use href="#spark" transform="translate(1080 520)"/>
            <use href="#spark" transform="translate(690 430)"/>
            <path d="M760 120L900 315L1110 250" fill="none" stroke="#94caff" stroke-opacity="0.22" stroke-width="1.2"/>
            <path d="M690 430L900 315L1080 520" fill="none" stroke="#94caff" stroke-opacity="0.18" stroke-width="1.2"/>
        </g>

        <!-- title area -->
        <g transform="translate(88 0)">
            <text x="0" y="258"
                  fill="#10233d"
                  font-size="78"
                  font-weight="800"
                  font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
                shiitake256.net
            </text>

            <text x="4" y="316"
                  fill="#4a678d"
                  font-size="31"
                  font-weight="600"
                  font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
                blog
            </text>

            <line x1="0" y1="346" x2="128" y2="346"
                  stroke="url(#lineGrad)" stroke-width="4" stroke-linecap="round" opacity="0.85"/>
            </g>
        </svg>
