PCM Parking Permit Generator

by Dhanck

HTML

<script src="https://circletype.labwire.ca/dist/circletype.min.js"></script>
<div class="permit">
  <div class="border-shiny">
    <p>
    VALID VALID VALID VALID VALID VALID VALID VALID VALID VALID VALID VALID VALID VALID VALID VALID
    </p>
    <div class="shiny">P</div>
  </div>
  <div class="circle">
    <div id="top-circle">· PARKING CONTROL ·</div>
    <div id="bottom-circle">MANAGEMENT (UK) LSD</div>
  </div>
  <div class="central-text">
    <span class="bay">Bay No 118</span><br>
    <span class="location">RW - NW10</span><br>
    <span class="type">Resident</span><br>
    <span class="issue">Issue June 2019</span>
  </div>

  <div class="watermark">
    <p>PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT PERMIT...

CSS

.permit{
  width: 500px;
  height: 500px;
  /* background: red; */
  border: 1px solid #cecece;
  display:flex;
  justify-content: center;
  align-items:center;
  position: relative;
  overflow: hidden;
}
.circle{
  /* border: 2px solid red; */
  border-radius: 50%;
  width: 80%;
  height: 80%;
}
#top-circle, #bottom-circle {
    font-size: 38px;
    font-weight: 600;
    height: 50%;
    color: blue;
}
.central-text{
  position: absolute;
  text-align: center;
  font-family: Arial;
  font-weight: 600;
}
.bay{
  font-size: 30px;
  line-height: 50px;
}
.location{
  font-size: 40px;
  line-height: 50px;
}
.type{
  font-size: 30px;
  line-height: 50px;
}
.issue{
  font-size: 20px;
  line-height: 50px;
}
.watermark {
  height: 1100px;
  width: 700px;
  position: absolute;
  overflow: hidden;
  z-index: -1;
}
.watermark p {
  position: absolute;
  top: -230px;
  left: 0;
  line-height: 20px;
  font-family: Arial;
  color: #ccc;
  font-size: 10px;
  pointer-events: none;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
}
.shiny {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 44px;
    font-weight: 600;
    padding: 2px 0px 0px 2px;
    border: 2px solid #fff;
    background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
   ...

JavaScript

new CircleType(document.getElementById('top-circle'))
  .radius(190);
  
  new CircleType(document.getElementById('bottom-circle'))
   .dir(-1)
  .radius(180);