Geological Cross-section (SVG)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 280" width="640">
  <defs>
    <pattern id="sand" width="6" height="6" patternUnits="userSpaceOnUse">
      <circle cx="2" cy="2" r="0.7" fill="#92400e"/>
    </pattern>
    <pattern id="shale" width="6" height="6" patternUnits="userSpaceOnUse">
      <path d="M0 3 H6" stroke="#475569" stroke-width="0.6"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="520" height="60" fill="#bbf7d0"/>
  <rect x="0" y="60" width="520" height="60" fill="url(#sand)" opacity="0.8"/>
  <rect x="0" y="120" width="520" height="60" fill="#fde68a"/>
  <rect x="0" y="180" width="520" height="60" fill="url(#shale)" opacity="0.85"/>
  <rect x="0" y="240" width="520" height="40" fill="#6b7280"/>
  <g font-family="Inter" font-size="12" fill="#0f172a">
    <text x="10" y="35">Soil / vegetation</text>
    <text x="10" y="95">Sandstone</text>
    <text x="10" y="155">Limestone</text>
    <text x="10" y="215">Shale</text>
    <text x="10" y="265" fill="white">Basement (igneous)</text>
  </g>
  <!-- fault -->
  <line x1="320" y1="0" x2="220" y2="280" stroke="#dc2626" stroke-width="2" stroke-dasharray="6 3"/>
  <text x="328" y="20" font-family="Inter" font-size="12" fill="#dc2626">Fault</text>
</svg>