SVG japanese garden

japanesegarden.svg

<svg width="800" height="600" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Sky Gradient: Indigo to Pink to Orange -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2c3e50" />
      <stop offset="40%" stop-color="#8e44ad" />
      <stop offset="70%" stop-color="#e67e22" />
      <stop offset="100%" stop-color="#f1c40f" />
    </linearGradient>

    <!-- Water Gradient: Reflection of sky, slightly darker/murkier -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#d35400" />
      <stop offset="30%" stop-color="#8e44ad" />
      <stop offset="100%" stop-color="#1a252f" />
    </linearGradient>

    <!-- Sun Glow -->
    <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
      <stop offset="50%" stop-color="#f1c40f" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#e67e22" stop-opacity="0"/>
    </radialGradient>

    <!-- Bamboo Gradient -->
    <linearGradient id="bambooGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1e5631" />
      <stop offset="30%" stop-color="#2ecc71" />
      <stop offset="80%" stop-color="#27ae60" />
      <stop offset="100%" stop-color="#145a32" />
    </linearGradient>

    <!-- Stone Lantern Gradient -->
    <linearGradient id="stoneGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#546e7a" />
      <stop offset="50%" stop-color="#90a4ae" />
      <stop offset="100%" stop-color="#455a64" />
    </linearGradient>

    <!-- Mist Gradient -->
    <linearGradient id="mistGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0" />
      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
    </linearGradient>
    
    <!-- Bridge Wood Gradient -->
    <linearGradient id="woodGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#a04000" />
      <stop offset="50%" stop-color="#d35400" />
      <stop offset="100%" stop-color="#6e2c00" />
    </linearGradient>
  </defs>

  <!-- Sky -->
  <rect x="0" y="0" width="800" height="350" fill="url(#skyGradient)" />

  <!-- Sun -->
  <circle cx="400" cy="350" r="60" fill="#f39c12" opacity="0.8" />
  <circle cx="400" cy="350" r="100" fill="url(#sunGlow)" />

  <!-- Distant Mountains -->
  <path d="M0,350 L150,250 L300,320 L450,200 L650,300 L800,220 L800,350 Z" fill="#34495e" opacity="0.7" />
  <path d="M0,350 L100,280 L250,350 L500,280 L800,350 Z" fill="#2c3e50" opacity="0.9" />

  <!-- Water -->
  <rect x="0" y="350" width="800" height="250" fill="url(#waterGradient)" />

  <!-- Water Reflections (Sun) -->
  <path d="M380,350 L420,350 L430,360 L370,360 Z" fill="#f1c40f" opacity="0.4" />
  <path d="M370,370 L430,370 L440,380 L360,380 Z" fill="#f1c40f" opacity="0.3" />
  <path d="M360,390 L440,390 L450,400 L350,400 Z" fill="#f1c40f" opacity="0.2" />
  <path d="M350,410 L450,410 L460,420 L340,420 Z" fill="#f1c40f" opacity="0.1" />

  <!-- Land Banks -->
  <!-- Left Bank -->
  <path d="M0,400 Q100,380 180,450 L180,600 L0,600 Z" fill="#1e272e" />
  <!-- Right Bank -->
  <path d="M800,400 Q700,380 620,450 L620,600 L800,600 Z" fill="#1e272e" />

  <!-- Bridge Reflection -->
  <g transform="translate(0, 880) scale(1, -1)" opacity="0.2">
     <path d="M180,440 Q400,300 620,440" stroke="#6e2c00" stroke-width="10" fill="none"/>
     <path d="M180,440 Q400,300 620,440 L620,450 Q400,310 180,450 Z" fill="#6e2c00"/>
  </g>

  <!-- Koi Fish (Subtle) -->
  <g opacity="0.6">
    <ellipse cx="300" cy="500" rx="15" ry="5" fill="#e67e22" transform="rotate(20 300 500)" />
    <ellipse cx="320" cy="520" rx="12" ry="4" fill="#ffffff" transform="rotate(-10 320 520)" />
    <ellipse cx="500" cy="480" rx="18" ry="6" fill="#d35400" transform="rotate(150 500 480)" />
  </g>

  <!-- Lily Pads -->
  <g fill="#27ae60" stroke="#1e8449" stroke-width="1">
    <path d="M250,550 a20,10 0 1,0 10,-5 l-10,5 Z" opacity="0.9"/>
    <path d="M280,530 a15,8 0 1,0 8,-4 l-8,4 Z" opacity="0.8"/>
    <path d="M550,500 a25,12 0 1,0 12,-6 l-12,6 Z" opacity="0.9"/>
    <path d="M520,520 a18,9 0 1,0 9,-4 l-9,4 Z" opacity="0.8"/>
  </g>

  <!-- Wooden Bridge -->
  <g>
    <!-- Arch Structure -->
    <path d="M180,450 Q400,310 620,450" stroke="none" fill="none" id="bridgeCurve"/>
    <!-- Walkway Side -->
    <path d="M170,450 Q400,300 630,450 L630,465 Q400,315 170,465 Z" fill="url(#woodGradient)" stroke="#5d4037" stroke-width="1"/>
    <!-- Posts -->
    <rect x="220" y="420" width="8" height="30" fill="#6e2c00" />
    <rect x="300" y="385" width="8" height="30" fill="#6e2c00" />
    <rect x="396" y="375" width="8" height="30" fill="#6e2c00" />
    <rect x="490" y="385" width="8" height="30" fill="#6e2c00" />
    <rect x="570" y="420" width="8" height="30" fill="#6e2c00" />
    <!-- Handrail -->
    <path d="M170,430 Q400,280 630,430" stroke="#a04000" stroke-width="6" fill="none" />
    <path d="M170,430 Q400,280 630,430" stroke="#d35400" stroke-width="2" fill="none" />
  </g>

  <!-- Stone Lantern (Left) -->
  <g transform="translate(80, 420)">
    <!-- Legs -->
    <path d="M10,80 Q5,100 -10,120 L50,120 Q35,100 30,80 Z" fill="url(#stoneGradient)" />
    <!-- Platform -->
    <rect x="-15" y="70" width="70" height="10" rx="2" fill="#455a64" />
    <!-- Light Box -->
    <rect x="0" y="35" width="40" height="35" fill="url(#stoneGradient)" />
    <rect x="10" y="45" width="20" height="15" fill="#f1c40f" opacity="0.8" /> <!-- Light -->
    <!-- Roof -->
    <path d="M-20,35 L20,5 L60,35 Z" fill="#546e7a" />
    <path d="M-20,35 Q20,25 60,35 L20,5 Z" fill="#78909c" />
    <!-- Top Knob -->
    <circle cx="20" cy="5" r="5" fill="#455a64" />
  </g>

  <!-- Bamboo Grove (Right) -->
  <g transform="translate(680, 250)">
    <!-- Stalk 1 -->
    <rect x="10" y="0" width="12" height="350" fill="url(#bambooGradient)" rx="2" />
    <rect x="9" y="50" width="14" height="3" fill="#145a32" opacity="0.5" />
    <rect x="9" y="120" width="14" height="3" fill="#145a32" opacity="0.5" />
    <rect x="9" y="200" width="14" height="3" fill="#145a32" opacity="0.5" />
    
    <!-- Stalk 2 -->
    <rect x="40" y="20" width="15" height="330" fill="url(#bambooGradient)" rx="2" />
    <rect x="39" y="80" width="17" height="3" fill="#145a32" opacity="0.5" />
    <rect x="39" y="160" width="17" height="3" fill="#145a32" opacity="0.5" />
    
    <!-- Stalk 3 -->
    <rect x="70" y="-20" width="10" height="370" fill="url(#bambooGradient)" rx="2" />
    <rect x="69" y="40" width="12" height="3" fill="#145a32" opacity="0.5" />
    <rect x="69" y="110" width="12" height="3" fill="#145a32" opacity="0.5" />
    
    <!-- Leaves -->
    <path d="M10,50 Q-10,70 -20,60 Q-10,50 10,50 Z" fill="#27ae60" />
    <path d="M10,120 Q30,140 40,130 Q30,120 10,120 Z" fill="#27ae60" />
    <path d="M40,80 Q20,100 10,90 Q20,80 40,80 Z" fill="#27ae60" />
    <path d="M70,40 Q90,60 100,50 Q90,40 70,40 Z" fill="#27ae60" />
    <path d="M70,110 Q50,130 40,120 Q50,110 70,110 Z" fill="#27ae60" />
    <path d="M40,160 Q60,180 70,170 Q60,160 40,160 Z" fill="#27ae60" />
  </g>

  <!-- Mist -->
  <g opacity="0.5">
    <ellipse cx="200" cy="500" rx="150" ry="20" fill="url(#mistGradient)" />
    <ellipse cx="600" cy="480" rx="120" ry="15" fill="url(#mistGradient)" />
    <ellipse cx="400" cy="550" rx="200" ry="25" fill="url(#mistGradient)" />
  </g>
  
  <!-- Vignette/Atmosphere overlay for sunset mood -->
  <rect x="0" y="0" width="800" height="600" fill="url(#skyGradient)" opacity="0.1" style="mix-blend-mode: overlay;" pointer-events="none"/>

</svg>