cfc/web/images/hero-family.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900" width="1440" height="900">
  <defs>
    <!-- 暖色渐变 -->
    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FEF9F0"/>
      <stop offset="60%" stop-color="#FDF4E8"/>
      <stop offset="100%" stop-color="#F5EBD8"/>
    </linearGradient>
    <linearGradient id="groundGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#C4956A"/>
      <stop offset="100%" stop-color="#8DB48E"/>
    </linearGradient>
    <linearGradient id="sunGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#F5D89A"/>
      <stop offset="100%" stop-color="#F5B87A"/>
    </linearGradient>
    <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#F5D89A" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#F5D89A" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="treeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#8DB48E"/>
      <stop offset="100%" stop-color="#6B9B6F"/>
    </linearGradient>
    <linearGradient id="roofGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#C4956A"/>
      <stop offset="100%" stop-color="#A07850"/>
    </linearGradient>
    <linearGradient id="rainbowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#A8D4E6" stop-opacity="0.6"/>
      <stop offset="25%" stop-color="#8DB48E" stop-opacity="0.5"/>
      <stop offset="50%" stop-color="#F5D89A" stop-opacity="0.5"/>
      <stop offset="75%" stop-color="#F5B87A" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#A8D4E6" stop-opacity="0.3"/>
    </linearGradient>
    <!-- 柔和阴影 -->
    <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="softShadow" x="-10%" y="-10%" width="120%" height="130%">
      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#C4956A" flood-opacity="0.3"/>
    </filter>
  </defs>

  <!-- 天空背景 -->
  <rect width="1440" height="900" fill="url(#skyGrad)"/>

  <!-- 远山轮廓（增加层次） -->
  <ellipse cx="200" cy="750" rx="300" ry="120" fill="#E8D4B8" opacity="0.4"/>
  <ellipse cx="1300" cy="770" rx="280" ry="100" fill="#E8D4B8" opacity="0.35"/>

  <!-- 祥云点缀 -->
  <g opacity="0.25" fill="#C4956A">
    <ellipse cx="150" cy="200" rx="60" ry="22"/>
    <ellipse cx="190" cy="195" rx="40" ry="18"/>
    <ellipse cx="120" cy="205" rx="35" ry="15"/>
  </g>
  <g opacity="0.2" fill="#8DB48E">
    <ellipse cx="1280" cy="250" rx="70" ry="24"/>
    <ellipse cx="1320" cy="244" rx="45" ry="18"/>
    <ellipse cx="1250" cy="254" rx="38" ry="14"/>
  </g>
  <g opacity="0.18" fill="#F5D89A">
    <ellipse cx="600" cy="150" rx="55" ry="20"/>
    <ellipse cx="635" cy="146" rx="35" ry="15"/>
    <ellipse cx="570" cy="154" rx="30" ry="12"/>
  </g>

  <!-- 太阳 -->
  <circle cx="1100" cy="160" r="90" fill="url(#sunGlow)"/>
  <circle cx="1100" cy="160" r="55" fill="url(#sunGrad)" filter="url(#softGlow)"/>
  <g stroke="#F5D89A" stroke-width="2.5" stroke-linecap="round" opacity="0.5">
    <line x1="1100" y1="85" x2="1100" y2="65"/>
    <line x1="1100" y1="235" x2="1100" y2="255"/>
    <line x1="1025" y1="160" x2="1005" y2="160"/>
    <line x1="1175" y1="160" x2="1195" y2="160"/>
    <line x1="1047" y1="107" x2="1032" y2="92"/>
    <line x1="1153" y1="213" x2="1168" y2="228"/>
    <line x1="1047" y1="213" x2="1032" y2="228"/>
    <line x1="1153" y1="107" x2="1168" y2="92"/>
  </g>

  <!-- 彩虹弧线 -->
  <path d="M 180 620 Q 720 300 1260 620" stroke="url(#rainbowGrad)" stroke-width="18" fill="none" stroke-linecap="round" opacity="0.45"/>

  <!-- 成长之树（右侧） -->
  <g filter="url(#softShadow)">
    <!-- 树干 -->
    <rect x="1220" y="420" width="22" height="260" rx="6" fill="#A07850"/>
    <rect x="1215" y="430" width="8" height="200" rx="4" fill="#B88A60" opacity="0.4"/>
    <!-- 树冠（大圆形叠压） -->
    <circle cx="1180" cy="370" r="85" fill="url(#treeGrad)" opacity="0.85"/>
    <circle cx="1250" cy="340" r="75" fill="#7DAF7D" opacity="0.8"/>
    <circle cx="1210" cy="300" r="65" fill="#9DC89D" opacity="0.85"/>
    <circle cx="1270" cy="390" r="60" fill="#8DB48E" opacity="0.75"/>
    <!-- 树根 -->
    <path d="M 1220 680 Q 1190 690 1160 700" stroke="#A07850" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.6"/>
    <path d="M 1242 680 Q 1272 692 1295 700" stroke="#A07850" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.6"/>
    <path d="M 1222 680 Q 1220 710 1218 740" stroke="#A07850" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.5"/>
    <!-- 树上挂的心形 -->
    <g transform="translate(1205, 240)">
      <path d="M 0 8 C -4 -2 -12 -2 -12 5 C -12 12 0 22 0 22 C 0 22 12 12 12 5 C 12 -2 4 -2 0 8Z" fill="#FF8C8C" opacity="0.7"/>
    </g>
    <g transform="translate(1260, 280)">
      <path d="M 0 6 C -3 -1.5 -9 -1.5 -9 4 C -9 9 0 16 0 16 C 0 16 9 9 9 4 C 9 -1.5 3 -1.5 0 6Z" fill="#F5B87A" opacity="0.65"/>
    </g>
    <!-- 叶片点缀 -->
    <ellipse cx="1180" cy="370" rx="8" ry="4" fill="#6B9B6F" opacity="0.7" transform="rotate(-30 1180 370)"/>
    <ellipse cx="1230" cy="330" rx="7" ry="3.5" fill="#6B9B6F" opacity="0.7" transform="rotate(20 1230 330)"/>
    <ellipse cx="1200" cy="400" rx="6" ry="3" fill="#6B9B6F" opacity="0.6" transform="rotate(-15 1200 400)"/>
  </g>

  <!-- 房子（左侧） -->
  <g filter="url(#softShadow)" transform="translate(80, 360)">
    <!-- 墙体 -->
    <rect x="20" y="100" width="180" height="140" rx="6" fill="#F5EBD8"/>
    <rect x="20" y="100" width="60" height="140" rx="4" fill="#EDE4D0" opacity="0.6"/>
    <!-- 屋顶 -->
    <polygon points="110,20 0,100 220,100" fill="url(#roofGrad)"/>
    <!-- 屋顶瓦纹 -->
    <g stroke="#8B6340" stroke-width="1" opacity="0.25">
      <line x1="30" y1="95" x2="110" y2="25"/>
      <line x1="65" y1="95" x2="110" y2="45"/>
      <line x1="100" y1="95" x2="110" y2="65"/>
      <line x1="135" y1="95" x2="110" y2="45"/>
      <line x1="170" y1="95" x2="110" y2="25"/>
    </g>
    <!-- 门 -->
    <rect x="85" y="155" width="50" height="85" rx="6" fill="#C4956A"/>
    <circle cx="125" cy="200" r="4" fill="#F5D89A"/>
    <!-- 窗户 -->
    <rect x="35" y="125" width="38" height="45" rx="4" fill="#A8D4E6" opacity="0.7"/>
    <line x1="54" y1="125" x2="54" y2="170" stroke="#F5EBD8" stroke-width="2"/>
    <line x1="35" y1="147" x2="73" y2="147" stroke="#F5EBD8" stroke-width="2"/>
    <rect x="147" y="125" width="38" height="45" rx="4" fill="#A8D4E6" opacity="0.7"/>
    <line x1="166" y1="125" x2="166" y2="170" stroke="#F5EBD8" stroke-width="2"/>
    <line x1="147" y1="147" x2="185" y2="147" stroke="#F5EBD8" stroke-width="2"/>
    <!-- 烟囱 -->
    <rect x="145" y="15" width="22" height="40" rx="3" fill="#B88A60"/>
    <rect x="143" y="12" width="26" height="8" rx="3" fill="#A07850"/>
    <!-- 炊烟 -->
    <g stroke="#C4956A" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.3">
      <path d="M 156 -5 Q 162 -20 156 -30 Q 150 -40 156 -55"/>
      <path d="M 165 -5 Q 171 -18 165 -28"/>
    </g>
  </g>

  <!-- 地面 / 草地 -->
  <ellipse cx="720" cy="920" rx="900" ry="280" fill="url(#groundGrad)" opacity="0.55"/>
  <!-- 草地纹理 -->
  <g stroke="#6B9B6F" stroke-width="2" stroke-linecap="round" opacity="0.4">
    <line x1="50" y1="800" x2="55" y2="775"/>
    <line x1="80" y1="795" x2="75" y2="770"/>
    <line x1="110" y1="798" x2="115" y2="773"/>
    <line x1="250" y1="820" x2="255" y2="795"/>
    <line x1="300" y1="815" x2="295" y2="790"/>
    <line x1="380" y1="825" x2="385" y2="800"/>
    <line x1="1050" y1="830" x2="1055" y2="805"/>
    <line x1="1120" y1="820" x2="1115" y2="795"/>
    <line x1="1190" y1="825" x2="1195" y2="800"/>
    <line x1="1280" y1="815" x2="1275" y2="790"/>
  </g>

  <!-- 小花 -->
  <g opacity="0.6">
    <circle cx="200" cy="780" r="5" fill="#F5D89A"/>
    <circle cx="400" cy="810" r="4" fill="#FF8C8C"/>
    <circle cx="600" cy="795" r="4.5" fill="#F5D89A"/>
    <circle cx="800" cy="815" r="4" fill="#A8D4E6"/>
    <circle cx="1000" cy="800" r="5" fill="#FF8C8C"/>
    <circle cx="1180" cy="790" r="4" fill="#F5D89A"/>
    <circle cx="1300" cy="810" r="4.5" fill="#8DB48E"/>
  </g>

  <!-- 家庭五人剪影（中心） -->
  <g opacity="0.22" fill="#C4956A" filter="url(#softShadow)">
    <!-- 祖父母（最两端） -->
    <ellipse cx="440" cy="645" rx="18" ry="22"/>
    <rect x="430" y="665" width="20" height="90" rx="8"/>
    <circle cx="438" cy="640" r="20"/>

    <ellipse cx="1000" cy="645" rx="18" ry="22"/>
    <rect x="990" y="665" width="20" height="90" rx="8"/>
    <circle cx="998" cy="640" r="20"/>

    <!-- 父母（中间两侧） -->
    <ellipse cx="560" cy="640" rx="16" ry="20"/>
    <rect x="550" y="660" width="18" height="85" rx="7"/>
    <circle cx="558" cy="635" r="18"/>

    <ellipse cx="880" cy="640" rx="16" ry="20"/>
    <rect x="870" y="660" width="18" height="85" rx="7"/>
    <circle cx="878" cy="635" r="18"/>

    <!-- 孩子（中心） -->
    <ellipse cx="720" cy="665" rx="14" ry="17"/>
    <rect x="710" y="682" width="18" height="70" rx="6"/>
    <circle cx="718" cy="660" r="16"/>

    <!-- 手拉手连接 -->
    <path d="M 450 700 Q 500 690 560 695 Q 640 688 720 690 Q 800 688 880 695 Q 940 690 990 700" stroke="#C4956A" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.8"/>
  </g>

  <!-- 星光点缀 -->
  <g fill="#F5D89A" opacity="0.5">
    <circle cx="300" cy="120" r="2.5"/>
    <circle cx="480" cy="80" r="2"/>
    <circle cx="750" cy="100" r="2.5"/>
    <circle cx="950" cy="70" r="2"/>
    <circle cx="1350" cy="300" r="2"/>
    <circle cx="200" cy="400" r="2"/>
  </g>

  <!-- 爱的符号（五枚心形散落） -->
  <g opacity="0.45">
    <path d="M 320 480 C 316 474 308 474 308 480 C 308 486 320 496 320 496 C 320 496 332 486 332 480 C 332 474 324 474 320 480Z" fill="#F5B87A"/>
    <path d="M 500 550 C 497 545 491 545 491 550 C 491 555 500 563 500 563 C 500 563 509 555 509 550 C 509 545 503 545 500 550Z" fill="#FF8C8C"/>
    <path d="M 940 520 C 937 515 931 515 931 520 C 931 525 940 533 940 533 C 940 533 949 525 949 520 C 949 515 943 515 940 520Z" fill="#F5D89A"/>
    <path d="M 1120 480 C 1117 475 1111 475 1111 480 C 1111 485 1120 493 1120 493 C 1120 493 1129 485 1129 480 C 1129 475 1123 475 1120 480Z" fill="#8DB48E"/>
    <path d="M 680 430 C 677 425 671 425 671 430 C 671 435 680 443 680 443 C 680 443 689 435 689 430 C 689 425 683 425 680 430Z" fill="#A8D4E6"/>
  </g>

  <!-- 底部柔和渐隐 -->
  <rect x="0" y="700" width="1440" height="200" fill="url(#skyGrad)" opacity="0.5"/>
</svg>