* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#defaultCanvas0 {
  top:0px;
  left:0px;
}

.loader {
  width: 100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity .2s;
  position: absolute;
}


.loader-corner {
  background-color: white;
  width: 50px;
  height: 50px;
  position:absolute;
  bottom:0px;
  left:0px;
  z-index:1;
  border:1px solid black;
  opacity:0;
}
.stroke {
  position:absolute;
  width:7px;
  height:9px;
  transform:translate(-13px,10px);
  opacity: 0;
  stroke:#000;
  stroke-width: 3px;
}

.stroke1 {
  transition: opacity 0.5s 1.1s;
  transform:translate(-22px,3px) rotate(-45deg);
  fill: #aaa;
}
.stroke2 {
  transition: opacity 0.5s 1.5s;
  transform:translate(-14px,0px) rotate(0deg);
  fill: #444;
}
.stroke3 {
  transition: opacity 0.5s 2.1s;
  transform:translate(-8px,4px) rotate(36deg);
  fill: #888;
}
.stroke4 {
  transition: opacity 0.5s 0.6s;
  transform:translate(-13px,10px) rotate(330deg);
  fill: #888;
}
.stroke5 {
  transition: opacity 0.5s 2.5s;
  transform:translate(-5px,13px) rotate(140deg);
  fill: #ddd;
}
.stroke6 {
  transition: opacity 0.5s 3.1s;
  transform:translate(-7px,21px) rotate(160deg);
  fill: #eee;
}
.stroke7 {
  transition: opacity 0.5s 3.6s;
  transform:translate(-14px,22px) rotate(30deg);
  fill: #999;
}
.stroke8 {
  transition: opacity 0.5s 4.05s;
  transform:translate(-18px,17px) rotate(60deg);
  fill: #ccc;
}
.stroke9 {
  transition: opacity 0.5s 4.5s;
  transform:translate(-20px,11px) rotate(104deg);
  fill: #999;
}