SVG city traffic at night

citytraffic.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <!-- Filters for lighting effects -->
    <filter id="headlight-blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
    </filter>
    <filter id="taillight-blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <filter id="lamp-glow">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>

    <!-- Gradients -->
    <linearGradient id="road-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1a1a1a" />
      <stop offset="50%" stop-color="#262626" />
      <stop offset="100%" stop-color="#1a1a1a" />
    </linearGradient>

    <linearGradient id="headlight-beam" x1="0.5" y1="1" x2="0.5" y2="0">
      <stop offset="0" stop-color="#fff" stop-opacity="0.8"/>
      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
    </linearGradient>
    
    <radialGradient id="taillight-glow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0%" stop-color="#ff0000" stop-opacity="0.9"/>
      <stop offset="100%" stop-color="#ff0000" stop-opacity="0"/>
    </radialGradient>

    <radialGradient id="street-lamp-light" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0%" stop-color="#ffaa00" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#ffaa00" stop-opacity="0"/>
    </radialGradient>

    <!-- Car Body Gradients -->
    <linearGradient id="car-silver" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#999" />
      <stop offset="50%" stop-color="#eee" />
      <stop offset="100%" stop-color="#999" />
    </linearGradient>
    <linearGradient id="car-blue" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1a2a4a" />
      <stop offset="50%" stop-color="#2a4a7a" />
      <stop offset="100%" stop-color="#1a2a4a" />
    </linearGradient>
    <linearGradient id="car-red" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#4a1a1a" />
      <stop offset="50%" stop-color="#7a2a2a" />
      <stop offset="100%" stop-color="#4a1a1a" />
    </linearGradient>
    <linearGradient id="car-black" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#111" />
      <stop offset="50%" stop-color="#333" />
      <stop offset="100%" stop-color="#111" />
    </linearGradient>
  </defs>

  <!-- Background (Ground/Grass) -->
  <rect width="512" height="512" fill="#0d1117" />
  
  <!-- Road Surface -->
  <rect x="80" y="0" width="352" height="512" fill="url(#road-gradient)" />
  
  <!-- Road Markings -->
  <!-- Outer Lines -->
  <line x1="90" y1="0" x2="90" y2="512" stroke="#555" stroke-width="2" />
  <line x1="422" y1="0" x2="422" y2="512" stroke="#555" stroke-width="2" />
  
  <!-- Lane Dividers (Dashed) -->
  <line x1="173" y1="-10" x2="173" y2="522" stroke="#666" stroke-width="2" stroke-dasharray="15, 20" />
  <line x1="339" y1="-10" x2="339" y2="522" stroke="#666" stroke-width="2" stroke-dasharray="15, 20" />

  <!-- Median -->
  <rect x="251" y="0" width="10" height="512" fill="#444" stroke="#222" stroke-width="1"/>
  <line x1="253" y1="0" x2="253" y2="512" stroke="#666" stroke-width="1" />
  <line x1="259" y1="0" x2="259" y2="512" stroke="#666" stroke-width="1" />

  <!-- Street Lamp Glows (Placed on Median) -->
  <circle cx="256" cy="100" r="80" fill="url(#street-lamp-light)" />
  <circle cx="256" cy="300" r="80" fill="url(#street-lamp-light)" />
  <circle cx="256" cy="500" r="80" fill="url(#street-lamp-light)" />

  <!-- TRAFFIC: SOUTHBOUND (Left Side, Moving Down) - Showing Taillights -->
  <g id="southbound-traffic">
    <!-- Lane 1 -->
    <g transform="translate(105, -30)">
      <!-- Car 1 -->
      <rect x="0" y="0" width="36" height="65" rx="4" fill="url(#car-blue)" />
      <rect x="2" y="58" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="58" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="10" width="28" height="15" rx="2" fill="#000" opacity="0.6" /> <!-- Windshield -->
    </g>
    <g transform="translate(105, 55)">
      <!-- Car 2 -->
      <rect x="0" y="0" width="36" height="70" rx="4" fill="url(#car-black)" />
      <rect x="2" y="63" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="63" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="12" width="28" height="16" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(105, 145)">
      <!-- Car 3 (Truck) -->
      <rect x="-2" y="0" width="40" height="90" rx="2" fill="#555" />
      <rect x="0" y="83" width="8" height="6" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="32" y="83" width="8" height="6" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="2" y="5" width="36" height="20" rx="1" fill="#222" />
    </g>
    <g transform="translate(105, 255)">
      <!-- Car 4 -->
      <rect x="0" y="0" width="36" height="60" rx="4" fill="url(#car-silver)" />
      <rect x="2" y="53" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="53" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="8" width="28" height="14" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(105, 335)">
      <!-- Car 5 -->
      <rect x="0" y="0" width="36" height="65" rx="4" fill="url(#car-red)" />
      <rect x="2" y="58" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="58" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="10" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(105, 420)">
      <!-- Car 6 -->
      <rect x="0" y="0" width="36" height="68" rx="4" fill="url(#car-blue)" />
      <rect x="2" y="61" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="61" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="11" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
    </g>

    <!-- Lane 2 -->
    <g transform="translate(190, 10)">
      <!-- Car 1 -->
      <rect x="0" y="0" width="36" height="62" rx="4" fill="url(#car-silver)" />
      <rect x="2" y="55" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="55" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="10" width="28" height="14" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(190, 90)">
      <!-- Car 2 -->
      <rect x="0" y="0" width="36" height="66" rx="4" fill="url(#car-red)" />
      <rect x="2" y="59" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="59" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="10" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(190, 175)">
      <!-- Car 3 -->
      <rect x="0" y="0" width="36" height="60" rx="4" fill="url(#car-black)" />
      <rect x="2" y="53" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="53" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="8" width="28" height="14" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(190, 255)">
      <!-- Car 4 -->
      <rect x="0" y="0" width="36" height="72" rx="4" fill="url(#car-blue)" />
      <rect x="2" y="65" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="65" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="12" width="28" height="16" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(190, 345)">
      <!-- Car 5 -->
      <rect x="0" y="0" width="36" height="64" rx="4" fill="url(#car-silver)" />
      <rect x="2" y="57" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="57" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="10" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(190, 430)">
      <!-- Car 6 -->
      <rect x="0" y="0" width="36" height="65" rx="4" fill="url(#car-black)" />
      <rect x="2" y="58" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="24" y="58" width="10" height="5" fill="#ff3333" filter="url(#taillight-blur)" />
      <rect x="4" y="10" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
    </g>
  </g>

  <!-- TRAFFIC: NORTHBOUND (Right Side, Moving Up) - Showing Headlights -->
  <g id="northbound-traffic">
    <!-- Lane 3 -->
    <g transform="translate(280, 450)">
      <!-- Light Beams -->
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <!-- Car -->
      <rect x="0" y="0" width="36" height="65" rx="4" fill="url(#car-red)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="40" width="28" height="15" rx="2" fill="#000" opacity="0.6" /> <!-- Rear Window -->
      <rect x="4" y="15" width="28" height="10" rx="2" fill="#000" opacity="0.6" /> <!-- Front Window -->
    </g>
    <g transform="translate(280, 360)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="70" rx="4" fill="url(#car-black)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="45" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="15" width="28" height="12" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(280, 270)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="60" rx="4" fill="url(#car-blue)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="38" width="28" height="14" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="12" width="28" height="10" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(280, 180)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="65" rx="4" fill="url(#car-silver)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="40" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="15" width="28" height="10" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(280, 90)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="62" rx="4" fill="url(#car-black)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="38" width="28" height="14" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="14" width="28" height="10" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(280, 0)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="68" rx="4" fill="url(#car-blue)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="42" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="15" width="28" height="11" rx="2" fill="#000" opacity="0.6" />
    </g>

    <!-- Lane 4 -->
    <g transform="translate(365, 420)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="60" rx="4" fill="url(#car-silver)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="38" width="28" height="14" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="12" width="28" height="10" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(365, 330)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="65" rx="4" fill="url(#car-blue)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="40" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="15" width="28" height="10" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(365, 230)">
      <!-- Truck -->
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M35,-5 L25,-100 L50,-100 L27,-5 Z" fill="url(#headlight-beam)" />
      <rect x="-2" y="0" width="40" height="85" rx="2" fill="#777" />
      <rect x="2" y="65" width="36" height="18" rx="1" fill="#333" />
      <circle cx="6" cy="5" r="4" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="34" cy="5" r="4" fill="#ffffcc" filter="url(#headlight-blur)" />
    </g>
    <g transform="translate(365, 140)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="65" rx="4" fill="url(#car-red)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="40" width="28" height="15" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="15" width="28" height="10" rx="2" fill="#000" opacity="0.6" />
    </g>
    <g transform="translate(365, 50)">
      <path d="M5,-5 L-10,-100 L15,-100 L13,-5 Z" fill="url(#headlight-beam)" />
      <path d="M31,-5 L21,-100 L46,-100 L23,-5 Z" fill="url(#headlight-beam)" />
      <rect x="0" y="0" width="36" height="60" rx="4" fill="url(#car-black)" />
      <circle cx="8" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <circle cx="28" cy="5" r="3" fill="#ffffcc" filter="url(#headlight-blur)" />
      <rect x="4" y="38" width="28" height="14" rx="2" fill="#000" opacity="0.6" />
      <rect x="4" y="12" width="28" height="10" rx="2" fill="#000" opacity="0.6" />
    </g>
  </g>

  <!-- Street Lamp Posts (Physical Object on top of glow) -->
  <circle cx="256" cy="100" r="3" fill="#999" stroke="#000" stroke-width="1" />
  <circle cx="256" cy="300" r="3" fill="#999" stroke="#000" stroke-width="1" />
  <circle cx="256" cy="500" r="3" fill="#999" stroke="#000" stroke-width="1" />

  <!-- Night Vignette Overlay -->
  <radialGradient id="night-vignette" cx="0.5" cy="0.5" r="0.7">
    <stop offset="0%" stop-color="#000" stop-opacity="0" />
    <stop offset="80%" stop-color="#000510" stop-opacity="0.4" />
    <stop offset="100%" stop-color="#000510" stop-opacity="0.7" />
  </radialGradient>
  <rect width="512" height="512" fill="url(#night-vignette)" pointer-events="none" />

</svg>