Back to Snippets

Interactive SVG Cinema Seat Selector JS

A fully functional cinema booking UI. Users can select available seats, skip occupied ones, and see a real-time price calculation. Features a 3D screen effect, native SVG icons, and efficient JavaScript event delegation.

380

#javascript

#css

#svg

#booking

#cinema

#seat selector

#interactive

#ui

#3d

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #1e1e24; /* Dark cinema background */
  color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cinema-wrapper {
  perspective: 1000px; /* Essential for 3D effect */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.screen-container {
  margin-bottom: 30px;
}

.screen {
  background: #fff;
  height: 70px;
  width: 250px;
  margin: 15px 0;
  transform: rotateX(-45deg); /* 3D tilt */
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.75);
}

.legend {
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 20px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style-type: none;
  margin-bottom: 20px;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend small {
  color: #94a3b8;
}

.seat-sample {
  height: 20px;
  width: 20px;
  background: #444451;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.seat-sample.selected { background: #3b82f6; }
.seat-sample.occupied { background: #ef4444; }

.seat-grid {
  display: grid;
  grid-template-columns: repeat(6, auto); /* 6 seats per row */
  column-gap: 12px;
  row-gap: 16px;
  margin-bottom: 30px;
}

/* SVG Seat Styling */
.seat {
  width: 32px;
  height: 32px;
  fill: #444451; /* Default available color */
  cursor: pointer;
  transition: transform 0.2s, fill 0.2s;
}

/* Row grouping logic: Adding space between 2nd and 3rd seat for aisle */
.seat:nth-of-type(6n+2) {
  margin-right: 18px;
}
.seat:nth-of-type(6n+4) {
  margin-right: 18px;
}

.seat:not(.occupied):hover {
  transform: scale(1.2);
  fill: #666;
}

.seat.selected {
  fill: #3b82f6; /* Blue */
}

.seat.occupied {
  fill: #ef4444; /* Red */
  cursor: not-allowed;
  transform: scale(1);
}

.text {
  color: #cbd5e1;
  font-size: 1.1rem;
}

span {
  color: #3b82f6;
  font-weight: 700;
}

<div class="cinema-wrapper">
  <div class="screen-container">
    <div class="screen"></div>
  </div>
  
  <ul class="legend">
    <li>
      <div class="seat-sample"></div>
      <small>Available</small>
    </li>
    <li>
      <div class="seat-sample selected"></div>
      <small>Selected</small>
    </li>
    <li>
      <div class="seat-sample occupied"></div>
      <small>Occupied</small>
    </li>
  </ul>

<svg class="seat" viewBox="0 0 24 24"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v5h-3V10zM2 10h3v5H2V10zm3-6h14c1.1 0 2 .9 2 2v2H3V6c0-1.1.9-2 2-2z"></path></svg>
    <svg class="seat" viewBox="0 0 24 24"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v5h-3V10zM2 10h3v5H2V10zm3-6h14c1.1 0 2 .9 2 2v2H3V6c0-1.1.9-2 2-2z"></path></svg>
    <svg class="seat" viewBox="0 0 24 24"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v5h-3V10zM2 10h3v5H2V10zm3-6h14c1.1 0 2 .9 2 2v2H3V6c0-1.1.9-2 2-2z"></path></svg>
    <svg class="seat" viewBox="0 0 24 24"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v5h-3V10zM2 10h3v5H2V10zm3-6h14c1.1 0 2 .9 2 2v2H3V6c0-1.1.9-2 2-2z"></path></svg>
    <svg class="seat occupied" viewBox="0 0 24 24"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v5h-3V10zM2 10h3v5H2V10zm3-6h14c1.1 0 2 .9 2 2v2H3V6c0-1.1.9-2 2-2z"></path></svg>
    <svg class="seat occupied" viewBox="0 0 24 24"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v5h-3V10zM2 10h3v5H2V10zm3-6h14c1.1 0 2 .9 2 2v2H3V6c0-1.1.9-2 2-2z"></path></svg>
  </div>

<p class="text">
    You have selected <span id="count">0</span> seats for a total of $<span id="total">0</span>
  </p>
</div>

Interactive SVG Cinema Seat Selector JS

Share Code Snippet