Web Editor by 101Computing.net

HTML

CSS

BODY {
  background: black;
  color: white;
  font-family: courier new;
}

.pigpen-wrapper {
 display: inline-block;
 background: white;
 width: 50px;
 height: 50px; 
 padding: 10px;
 box-sizing: border-box;
 overflow: hidden;
}
.dotted {
 background: black;
 -webkit-box-shadow:  inset 0px 0px 0px 23px rgba(255,255,255,1);
 -moz-box-shadow:  inset 0px 0px 0px 23px rgba(255,255,255,1);
 box-shadow: inset -2px 0px 0px 23px rgba(255,255,255,1);
}

.pigpen {
 display: inline-block;
background: transparent;
 width:10px;
 height: 30px; 
 padding: 10px;
 box-sizing: border-box;
border: 4px solid white;
}

.a, .j {
  border-color: white black black white;
}
.b, .k {
  border-color: white black black black;
}
.c, .l {
  border-color: white white black black;
}
.d, .m {
  border-color: black black black white;
}
.e, .n {
  border-color: black black black black;
}
.f, .o {
  border-color: black white black black;
}
.g, .p{
  border-color: black black white white;
}
.h, .q {
  border-color: black black white black;
}
.i, .r {
  border-color: black white white black;
}

.s {
  border-color: white black black white;
  transform: translate(0px, -6px) rotate(45deg);
}
.u {
  border-color: white white black black;
  transform: translate(6px, 0px) rotate(45deg);  
}
.t{
  border-color: black black white white;
  transform: translate(-6px, 0px) rotate(45deg);  
}
.v {
  border-color: black white white black;
  transform: translate(0px, 6px) rotate(45deg);  
}

.w {
  border-color: white black black white;
  transform: translate(0px, -6px) rotate(45deg);
}
.y {
  border-color: white white black black;
  transform: translate(6px, 0px) rotate(45deg);  
}
.x {
  border-color: black black white white;
  transform: translate(-6px, 0px) rotate(45deg);  
}
 .z {
  border-color: black white white black;
  transform: translate(0px, 6px) rotate(45deg);  
}

JavaScript

Preview live webpage

Console logs, warnings and errors