Pullover

dabblet.css

/**
 * Pullover
 */
 
 body {
 --cell-size:5;
 }
 
 * {
   font: 0/0 a;
 }
 

.sweater {
	width: calc(189px*var(--cell-size));
	height: calc(239px*var(--cell-size));
	position: relative;
	background-color:grey;
	background-image:
	  linear-gradient(white 1px, transparent 1px),
	  linear-gradient(90deg, white 1px, transparent 1px),
	  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
	  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:
     calc(10px*var(--cell-size)) calc(10px*var(--cell-size)),
     calc(10px*var(--cell-size)) calc(10px*var(--cell-size)),
     calc(1px*var(--cell-size)) calc(1px*var(--cell-size)),
     calc(1px*var(--cell-size)) calc(1px*var(--cell-size));
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.empty {
  box-sizing: border-box;
  display: inline-block;
  width: calc(3px*var(--cell-size));
  height: calc(3px*var(--cell-size));
  background: yellow;
}

.piece {
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  margin: 0;
  border: 0;
  font: 10px/5px Arial;
  opacity: 0.5;
}

.piece_1 {
   width: calc((12px*6)*var(--cell-size));
   height: calc((8px*4)*var(--cell-size));
   background: red;
   bottom: 0;
   left: calc(3px*var(--cell-size));
}

.piece_2 {
  background: blue;
  width: calc((8px*8 +8px)*var(--cell-size) );	
  height: calc((8px*7)*var(--cell-size));
  bottom: 0;
  left: calc(3px*var(--cell-size) + (12px*6)*var(--cell-size) + 3px*var(--cell-size));
 }

.piece_3 {
	background: green;
	width: calc((10px*4 +2px)*var(--cell-size) );
	height: calc((10px*9 + 4px)*var(--cell-size)); /* plus 4 rows */
	bottom: 0;
	left: calc(3px*var(--cell-size) + (12px*6)*var(--cell-size) + 3px*var(--cell-size) + (8px*8 +8px)*var(--cell-size) + 3px*var(--cell-size));
}

.piece_4 {
  background: violet;
  width: calc((8px*5 +1px)*var(--cell-size) );
  height: calc((1px*92)*var(--cell-size) );
  left: calc(3px*var(--cell-size)); 
  bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size));
 }
 
 .piece_5 {
 	background: green;
 	width: calc((10px*3 +2px)*var(--cell-size));
 	height: calc((10px*2 + 2px)*var(--cell-size)); /* 2 row more */
 	bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size));
 	left: calc(3px*var(--cell-size) + (8px*5 +1px)*var(--cell-size) + 2px*var(--cell-size));
 }
 
 .piece_6 {
 	background: yellow;
 	width: calc((12px*8 + 2px)*var(--cell-size));
 	height: calc((12px*3)*var(--cell-size));
 	bottom: calc((8px*7)*var(--cell-size) + 2px*var(--cell-size));
 	left: calc(3px*var(--cell-size) + (8px*5 +1px)*var(--cell-size) + 2px*var(--cell-size));
 }
 
 .piece_7 {
 	background: orange;
 	width: calc((10px*14)*var(--cell-size));
 	height: calc((6px*5)*var(--cell-size));
 	left: calc(3px*var(--cell-size) + (8px*5 +1px)*var(--cell-size) + 2px*var(--cell-size));
 	bottom: calc((8px*7)*var(--cell-size) + 2px*var(--cell-size) + (12px*3)*var(--cell-size) + 2px*var(--cell-size));
 }
 
 .piece_8 {
 	background: green;
 	width: calc((10px*8 +2px)*var(--cell-size) );
 	height: calc((10px*4)*var(--cell-size));
 	bottom: calc((8px*4)*var(--cell-size) + 2px*3 + (1px*93)*var(--cell-size) + 2px*var(--cell-size));
 	left: calc(3px*var(--cell-size));
 }
 
  .piece_9 {
 	background: yellow;
 	width: calc((12px*2 + 2px)*var(--cell-size));
 	height: calc((12px*8)*var(--cell-size));
 	bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size) + (1px*92)*var(--cell-size) + 2px*var(--cell-size));
 	left: calc(3px*var(--cell-size) + (8px*10 +8px)*var(--cell-size) + 3px*var(--cell-size));
 }
 
 .piece_10 {
   width: calc((12px*6)*var(--cell-size));
   height: calc((8px*4)*var(--cell-size));
   background: red;
   bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size) + (1px*92)*var(--cell-size) + 2px*var(--cell-size));
   left: calc(3px*var(--cell-size) + (8px*10 +8px)*var(--cell-size) + 3px*var(--cell-size) + (12px*2 + 2px)*var(--cell-size) + 2px*var(--cell-size));
 }
 
 .piece_11 {
  	background: orange; 
  	width: calc((10px*2)*var(--cell-size));
  	height: calc((6px*7)*var(--cell-size));
	bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size) + (1px*92)*var(--cell-size) + 2px*var(--cell-size) + (10px*4)*var(--cell-size) + 2px*var(--cell-size));
	left: calc(16px*var(--cell-size));
}

 .piece_12 {
    width: calc((8px*4 + 8px)*var(--cell-size) );
    height: calc((8px*5 + 2px)*var(--cell-size)); /* 2 rows more */
    background: blue;
 	left: calc(16px*var(--cell-size) + (10px*2)*var(--cell-size) + 3px*var(--cell-size));
 	bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size) + (1px*92)*var(--cell-size) + 2px*var(--cell-size) + (10px*4)*var(--cell-size) + 2px*var(--cell-size));
 }
 
 .piece_13 {
  background: violet;
  width: calc((8px*8 +1px)*var(--cell-size));
  height: calc((1px*45)*var(--cell-size));
  left: calc(3px*var(--cell-size) + (8px*10 +8px)*var(--cell-size) + 3px*var(--cell-size) + (12px*2 + 2px)*var(--cell-size) + 2px*var(--cell-size));
  bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size) + (1px*92)*var(--cell-size) + 2px*var(--cell-size) + (8px*4)*var(--cell-size) + 2px*var(--cell-size));
 }
 
  .piece_14 {
   width: calc((12px*3)*var(--cell-size));
   height: calc((8px*3)*var(--cell-size));
   background: red;
   bottom: calc((8px*4)*var(--cell-size) + 2px*var(--cell-size) + (1px*92)*var(--cell-size) + 2px*var(--cell-size) + (10px*4)*var(--cell-size) + 2px*var(--cell-size) + (8px*5 + 2px)*var(--cell-size) + 2px*var(--cell-size));
   left: calc(3px*var(--cell-size));
   margin-left: calc(14px*var(--cell-size))
   }
   
    .piece_15 {
 	background: green;
 	width: calc((10px*7 +2px)*var(--cell-size));
 	height: calc((10px*2)*var(--cell-size));
 	bottom: calc((8px*4)*var(--cell-size) + 3px*var(--cell-size) + (1px*93)*var(--cell-size) + 3px*var(--cell-size) + (8px*4)*var(--cell-size) + 3px*var(--cell-size) + (1px*45)*var(--cell-size) + 3px*var(--cell-size));
 	left: calc(3px*var(--cell-size) + (8px*10 +8px)*var(--cell-size) + 3px*var(--cell-size) + (12px*2 + 2px)*var(--cell-size) + 2px*var(--cell-size));
 }
 	
.head {
	position: absolute;
 	background: grey;
 	width:calc(78px*var(--cell-size));
 	height:calc(60px*var(--cell-size));
 	top: 0;
 	left: calc(189px*var(--cell-size)/2);
 	margin-left:calc(78px*var(--cell-size)/2*-1);
 	border-radius: 0  0 40% 40%;
 }
 
 .hand {
 	position: absolute;
 	background: grey;
 	width: calc(15px*var(--cell-size)); 
 	height: calc(77px*var(--cell-size));
 	top: 0;
 }
 
.hand_left {
	left: 0;
	border-radius: 0 0 50% 0;
}

.hand_right {
 right: 0;
 border-radius: 0 0 0 50%;
 }

dabblet.html

<div class="sweater">
  <div class="piece piece_1">#24</div>
  <div class="piece piece_2">#11</div>
  <div class="piece piece_3">#27</div>
  <div class="piece piece_4">#9</div>
  <div class="piece piece_5">#27</div>
  <div class="piece piece_6">#35</div>
  <div class="piece piece_7">#5</div>
  <div class="piece piece_8">#27</div>
  <div class="piece piece_9">#35</div>
  <div class="piece piece_10">#24</div>
  <div class="piece piece_11">#11</div>
  <div class="piece piece_12">#5</div>
  <div class="piece piece_13">#9</div>
  <div class="piece piece_14">#24</div>
  <div class="piece piece_15">#27</div>
  <div class="head"></div>
  <div class="hand hand_left"></div>
  <div class="hand hand_right"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}