How can I design a pictorial representation for the booked and available seats in the stadium showing graphically the booked tickets as of red color and available ticket as green color. Firstly,I wanted to design a circle inscribed on a circle.but I am not exactly getting what I wanted.The code goes here for drawing circles:

<style>
  .circle1{
width: 500px;
height: 500px;
border-radius: 50%;
background-color: red 
}

  .circle2{
margin-top:2cm;
margin-left:2cm;

width: 350px;
height: 350px;
border-radius: 50%;
background-color: green

}

</style>

<div class="circle1">
<div class="circle2">

</div>

</div>

Further I want to draw lines between the two circles for showing the seats.I can handle the database part,but I want the designing part. It would be a great help if I get through it.