html,body {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/176026/noise.png);
    width:100%;
    height:100%;
    background-color:#F79A7A;

}
#draw {
  cursor:pointer;
  left:0;
  position:absolute;
  top:0%;
  width:10%;
  padding: 15px 10px;
  border-radius: 20px;
  margin:20px;
  background:#F79A7A;
  border:4px solid white;
  text-transform:uppercase;
  letter-spacing: 4px;
  color:white;
}
#draw:focus {
  outline:none;
}
#svg {
    top: 60%;
    left:50%;
    width:30%;
    height:80%;
    position:relative;
    -webkit-transform:translate3d(-50%,-50%,0);   
}
.line {
  stroke-dashoffset:0;
  box-shadow: 10px 10px 1px black;
}
.breakpoint{
  transform:scale(0);
  position:absolute;
  -webkit-transform-origin:50% 50%;
}
.active{
  transform:scale(1)
}