Cacher is the code snippet organizer for pro developers

<link href="https://fonts.googleapis.com/css?family=SpecialElite" rel="stylesheet" />

@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Special+Elite);

body{
  font-family: "Open Sans", Verdana;
  background-image: url(http://i.stack.imgur.com/kb0Zm.jpg);
}

.typewriter{
  font-family: 'Special Elite', Verdana;
  font-size: 18px;
}

img {
  width:200px;
}

#form{
  display: grid;
  grid-gap: 0.5em;
  padding: 0.5em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px 200px;
}

h1{
  grid-column: 2 / span 2; 
}

#signature-item{
  grid-column:2 /span 2;
}

div.polaroid {
  grid-column: 1; 
  grid-row-start: 1; 
  grid-row-end: 3; 
	background: #fff;
	width: 210px;
	padding: 7px;
	margin: 10px;	
	-moz-box-shadow: 1px 1px 3px #222;
	-moz-transform: rotate(-5deg);
	-webkit-box-shadow: 1px 1px 3px #222;
	-webkit-transform: rotate(-5deg);
	box-shadow: 1px 1px 3px #222;
	-o-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

.item{
  border-style:solid;
  border-width:1px;
}


.box{
  display:inline-block;
  border-style: solid;
  border-width: 2px;
  width:20%;
  height: 150px;
  width: 150px;
  text-align:center;
}

.signature-box{
  display:inline-block;
  border-style:solid;
  border-width:2px;
  height: 150px;
  width: 80%;
  text-align:center;
}


#finger{
  position:absolute;
  width:500px;
  height:300px;
  top: 280px;
  left:-300px;
  transform: rotate(-30deg);
}

#signature{
  width:200px;
  fill:none;
  stroke: black;
  stroke-width:4px;
}

#fingerprint{
  position:absolute;
  top:300px;
  left: 50px;
  width:120px;
  opacity: 0;
  animation: show;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

#pen{
  stroke-width:5;
  fill:black;
  opacity:0;
}

.name{
  stroke-width:5;
}

.plant{
  animation: plant;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes plant{
  50%{
    left:-140px;
    transform: skewX(20deg);
  }
  74%{
    left:-140px;
  }
  75%{
    left:-200px;
  }
  100%{
    left:-300px;
  }
}

@keyframes show{
  74%{
    opacity:0;
  }
  75%{
    opacity:1;
  }
  100%{
    opacity:1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

var name1 = d3.select("#signature #name1");
var name2 = d3.select("#signature #name2");
var pen = d3.select("#signature #pen");

initPath(name1); //set the stroke properties
initPath(name2);

//Thumb print runs for 3s using CSS animation
$("#finger").addClass("plant");
$("#fingerprint").addClass("show");
  
setTimeout(showAutograph, 3000);
setTimeout(function(){ 
    pen.style("visibility", "hidden");
  }, 7000);

function showAutograph(){
  illustratePath(name1, 2000,0);
  illustratePen(name1, 2000, 0);
  
  illustratePath(name2, 2000, 2000);
  illustratePen(name2, 2000, 2000);
}

//make it one big long stroke dash
function initPath(path){
  var lineLen = path.node().getTotalLength(); 
  path.attr("stroke-dasharray", lineLen + ", "+ lineLen) 
      .attr("stroke-dashoffset", lineLen) ;
}


//illustrate the stroke of the path from zero to end
function illustratePath(path, duration, delay){
    path.transition()
      .duration(duration)
      .delay(delay)
      .attr("stroke-dashoffset", 0);
}


//illustrate the stroke of the path from zero to end
function illustratePen(pathToFollow, duration, delay) {
  pen.style("opacity", 1);
  
  pen
    .transition()
    .duration(duration)
    .delay(delay)
    .attrTween("transform", translateAlong(pathToFollow.node()));
}

// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

<div id="form">
  <div class="polaroid"><img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1531032571"/></div>
<div class="item">
  NAME: <span class="typewriter">HARUN PEHLİVAN</span>
</div>
 <div class="item">
   DATE RECIEVED: <span class="typewriter"> 22/07/1984</span>
</div>
<div  class="item">
  OCCUPATION: <span class="typewriter">ENGINEERING</span>
</div>
<div id="offence-item" class="item">
  NATIONALITY: <span class="typewriter">REPUBLIC OF TURKEY CITIZEN</span>
</div>
  <div class="item"><p>FINGERPRINT</p></div>
  <div id="signature-item" class="item"><p>SIGNATURE</p><svg id="signature" viewBox="0 0 900 600">
  <path
     d="M 132.49242,322.94131 C 134.76549,313.30669 165.20074,177.81536 161.73941,176.0847 143.30142,166.86571 95.647021,277.3497 99.512023,300.53922 101.1259,310.22291 121.20156,336.11399 132.49242,322.94131 145.86102,307.34464 136.15003,289.06519 116.93572,298.67268 116.92708,298.67674 47.796834,370.62278 45.996488,372.7231 6.6797701,418.59256 4.7130772,398.03192 10.52691,395.12489 49.095314,375.84079 103.05649,456.86567 112.57973,473.53143 119.90526,486.35084 126.04685,498.56347 133.73698,510.86782 135.5131,513.70945 137.4707,523.55298 137.4707,520.20198 137.4707,504.68284 133.06959,480.86317 128.13669,466.06428 123.56032,452.3353 127.73644,357.43262 129.38119,340.98718 135.81498,276.64891 172.00315,326.98989 159.87247,339.12038 155.55583,343.43714 156.38918,366.62551 144.938,360.8999 110.98581,343.9239 165.97912,290.81546 174.18474,274.4039 179.42986,263.91346 182.88382,238.94698 190.9861,230.84477 192.55447,229.27654 185.38324,248.28622 182.89658,265.69215 179.2463,291.245 166.36736,319.12938 179.1631,344.7209 183.01299,352.42079 197.50174,331.90927 199.07575,336.63119 199.95879,339.28042 202.39469,375.00477 212.76581,364.63358 216.28719,361.1122 219.88851,340.81487 226.45583,344.09848 235.79585,348.7685 229.6661,372.8222 235.78989,378.94582 244.89867,388.05503 260.43837,371.85848 272.50401,383.92398 297.02152,408.44152 271.25951,459.8152 271.25951,490.33265"
     id="name1" />
  <path
     d="M 378.29061,333.51995 C 378.14328,315.33846 411.7216,208.80052 390.11363,201.59791 359.53337,191.40449 323.44953,395.51287 359.62213,407.57035 413.8672,425.65212 385.19348,303.65072 426.20558,303.65072 426.28562,303.65072 414.60209,315.43686 410.64853,327.29706 406.5574,339.57099 387.9336,378.01036 398.20329,388.27983 404.48331,394.55988 428.54654,332.89759 428.07239,332.89759 425.64435,332.89759 418.30452,387.41264 421.84953,394.50269 428.56933,407.942 455.45239,345.39621 455.45239,364.01146 455.45239,373.55223 443.75202,409.99806 448.60758,407.57035 470.8841,396.43215 492.48892,338.62551 500.25611,319.2077 503.56422,310.93755 505.88304,302.22068 507.10108,293.69451 507.13793,293.43578 507.07936,287.47185 507.10108,287.47185 507.14096,287.47185 503.86938,303.38956 499.63397,316.09627 495.34467,328.96367 491.54036,345.35469 487.81051,356.54392 486.69801,359.88171 486.37516,407.57035 485.32164,407.57035 484.15861,407.57035 488.32513,402.70003 488.43278,402.59203 497.18185,393.84323 500.39923,379.4249 507.72344,372.10083 508.95355,370.87054 519.94041,386.92112 531.36983,392.63588 550.7172,402.30957 603.18698,387.23714 615.37652,377.07883"
     id="name2" />
<path id="pen"
d="M 0,5.2228656 25.123077,68.030606 157.01927,168.52287 200.98462,111.99602 69.088441,17.784436" />
</svg>
    </div>
  <div>
</div>
<!--Fingerprint by Stephen Kelly from the Noun Project, Pen by Roman J. Sokolov from the Noun Project-->
<svg id="finger" class="" viewBox="0 0 80 100"><path d="M56.1,37c0.4,0.4,0.6,0.7,0.8,1c0.2-0.6,0.5-1.2,0.8-2.1c0.7,0.4,1.2,0.8,1.6,1c0.1-0.7,0.2-2,0.3-3.2  c0.4,0.2,0.7,0.3,1.2,0.5c0-0.9,0-1.7,0-2.6c0.3,0.2,0.5,0.3,0.7,0.4c0.8-0.6,1.5-1.2,1-2.4c0.1,0,0.2,0,0.4-0.1  c0.3,0.4,0.5,0.8,0.7,1.1c0.3-0.9,0.6-2,0.9-3c0.1,0,0.2,0,0.3-0.1c0.2,0.3,0.4,0.6,0.7,1c0.5-1-0.3-2.8,1.7-2.7  c0-0.4,0.1-0.8,0.1-1.2c0.1,0,0.1,0.1,0.2,0.1c0.2-0.3,0.5-0.5,0.6-0.8c0.2-1,0.4-2,0.5-3c0-0.4-0.4-0.8-0.8-1.1  c-0.1-0.1-0.6,0.3-0.9,0.6c-2.3,2.4-4.5,4.9-6.9,7.2c-2.2,2.2-4.8,3.7-7.5,5c-2.5,1.2-5,0.6-7.1-1.2c-1.7-1.4-2.5-3.3-2.3-5.6  c0.4-3.6,2.3-6.4,4.1-9.3c0.4-0.6,0.8-1.2,1.1-1.9c-0.6,0.5-1.3,0.8-1.9,1.4c-1.7,1.6-3.5,3.2-5.1,5c-2.6,2.8-5.2,5.7-7.7,8.7  c-2.3,2.8-4.4,5.7-6.6,8.6c-2.6,3.5-5.4,7-7.8,10.6c-1.9,2.9-4.5,5.2-6.7,7.9c-0.6,0.7-1.1,1.5-1.7,2.1c-0.7,0.7-1.5,1.3-2.3,1.9  c-0.1-0.1-0.2-0.2-0.3-0.3C8.6,59.8,9,59,9.5,58.2c-0.2,0-0.5,0.1-0.9,0.2c0.2-0.3,0.2-0.4,0.4-0.5c4-3.1,7-7.1,9.9-11.2  c1.8-2.4,3.5-4.8,5.3-7.2c1.9-2.5,3.7-5.1,5.7-7.6c3.5-4.2,7.1-8.4,10.8-12.5c1.9-2.2,4-4.2,6.5-5.8c0.6-0.4,1.4-0.6,2-0.8  c0,0.1,0.1,0.2,0.1,0.3c-0.2,0.3-0.5,0.6-0.7,0.8c0.1,0.1,0.1,0.1,0.2,0.2c0.6-0.8,1.3-1.6,1.9-2.4c3.8-4.6,7.6-5.7,13.3-3.1  c2.3,1.1,4.2,2.8,4.8,5.6c0.2,1.1,0.9,2,1.2,3.1c0.7,2.5,0.3,4.9-0.7,7.3c-1.7,4.4-4.3,8.2-7.3,11.8c-2.4,2.8-4.9,5.5-7.1,8.5  c-1.5,2-2.5,4.3-3.8,6.4c-2.1,3.5-4.1,7-6.6,10.3c-2.4,3.1-4.2,6.5-6.2,9.8c-0.8,1.2-1.5,2.5-3.2,2.7c-0.1,0-0.2,0-0.5,0  c3.1-3.4,4.3-7.3,4.2-11.7c0.1,0,0.2,0,0.3,0c0.4,0.7,0.9,1.3,1.3,2c1-0.8,0.6-1.8,0.6-2.6c0-0.9-0.2-1.8-0.4-2.7  c0.9-0.2,0.9-0.2,2.6,1.4c0-1.8,0-3.6,0-5.5c1.1,0.3,0.7,1.4,1.1,2.1c0.2-0.8,0.3-1.5,0.4-2.2c0.1-0.2,0.3-0.5,0.5-0.7  c0.2,0.2,0.5,0.3,0.6,0.6c0.2,0.4,0.3,0.8,0.4,1.1c0.1,0,0.2,0,0.3,0c0-0.6,0.1-1.2,0.1-1.8c0-0.4-0.1-0.9,0-1.3  c0-0.3,0.2-0.5,0.3-0.8c0.2,0.2,0.4,0.3,0.6,0.5c0.1,0.1,0.1,0.2,0.3,0.5c0.1-0.8,0.3-1.4,0.3-2.1c0.1-1,0.1-1.1,1-0.7  c0.1,0,0.2,0.1,0.2,0.1c0.1-0.6,0.2-1.2,0.2-1.9c0.1-0.9,0.2-1.9,0.3-2.8c0-0.5-0.1-1,0.6-1.2c0.1,0,0.2-0.4,0.2-0.6  c-0.6-2.2-1.1-4.4-3.6-5.4c-0.8-0.3-1.5-1.1-2.3-1.6c-1.4-0.9-2.9-1.8-4.4-2.6c-0.1-0.1-0.3-0.2-0.3-0.4c0.6,0.3,1.3,0.5,1.9,0.8  c1.8,0.8,3.5,1.6,5.3,2.3c2,0.8,3.1,2.3,3.6,4.4c0.2,0.9,0.6,1.8,1,2.7c0.1,0,0.2,0,0.3-0.1c0.1-0.9,0.2-1.8,0.3-2.8  c1,0.2,0.9,1.3,1.6,2c0-1.4,0-2.5,0-3.8c0.7,0.2,1.3,0.3,2,0.5C56,39,56.1,38.1,56.1,37z M50.5,31.4c0.5-0.2,1.3-0.3,2-0.7  c1.8-1.1,3.6-2.2,5.2-3.5c2.3-1.9,4.5-4,6.5-6.2c1.7-1.9,2.4-4.3,2.2-6.9c0-0.5-0.5-1.1-0.3-1.4c0.4-0.8-0.1-1.1-0.5-1.4  c-0.4-0.3-0.7-0.7-1.2-1c-1.6-1.1-3.5-1.8-5.5-1.6c-1.9,0.2-3.7,1.1-5,2.5c-1.7,1.8-3.3,3.7-4.8,5.7c-1.1,1.5-2,3.2-3,4.9  c-0.2,0.4-0.3,1-0.4,1.5c-0.2,0.8-0.3,1.7-0.9,2.2c-0.8,0.7-0.7,1.4-0.5,2.2C45.2,30.3,48.2,31.2,50.5,31.4z"/><path d="M47.2,49.3c-0.4-1-0.8-1.9-1.2-2.9c-0.6-1.4-1.7-2.2-3.1-2.6c-1.1-0.3-2.3-0.8-3.6-0.4c-0.9,0.3-1.6-0.2-2-1.1  c-0.7-1.6-1.9-2.7-3.3-3.7c-0.2-0.1-0.4-0.2-0.5-0.3c0,0,0-0.1-0.1-0.3c1.2,0.5,2.2,0.9,3.1,1.8c0.3,0.3,0.5,0.6,0.8,0.9  c1,1.3,2.4,1.7,4,1.9c3.2,0.4,5.4,1.6,6.2,4.8c0.2,0.6,0.1,1.3,0.1,2C47.5,49.3,47.4,49.3,47.2,49.3z"/><path d="M34.5,43.2c0.1,0,0.1,0,0.2,0c2.3,1.2,4.6,2.3,6.8,3.6c1.2,0.7,2.3,1.4,2.3,3c0,0.1,0,0.2-0.1,0.4c-3.5-1.8-6.4-4.2-9.3-6.7  C34.4,43.4,34.4,43.3,34.5,43.2z"/><path d="M26.4,46c0.3,0,0.7,0,1,0c2.6,0,4.9,0.7,6.9,2.4c1.5,1.2,3.4,2.1,4.5,3.8c0.3,0.5,0.6,1,0.8,1.4c-0.1,0.1-0.1,0.1-0.2,0.2  c-0.2-0.2-0.4-0.4-0.6-0.7c-0.3-0.3-0.6-0.7-0.9-0.9c-2.2-1.1-4.2-2.4-6-4.1c-0.9-0.9-2.1-1.2-3.4-1.3c-0.8-0.1-1.5-0.3-2.2-0.4  C26.4,46.3,26.4,46.1,26.4,46z"/><path d="M53.9,24.2c-0.1,0.2-0.1,0.5-0.3,0.6c-1.2,0.9-2.4,1.8-3.6,2.6c-0.5,0.3-1.2,0.2-1.7,0.2c-0.1,0-0.3-0.2-0.3-0.3  c0-0.1,0.1-0.3,0.3-0.4c1.5-0.8,3-1.5,4.5-2.3c0.3-0.2,0.7-0.3,1-0.5C53.8,24.1,53.8,24.1,53.9,24.2z"/><path d="M51.3,29.2c2.2-1.4,4.3-2.9,6.5-4.3C57.1,26.7,52.5,29.7,51.3,29.2z"/><path d="M55.5,25.1c-1.7,1.7-3.4,3.3-5.9,3.6c0-0.1-0.1-0.1-0.1-0.2C51.5,27.4,53.5,26.2,55.5,25.1z"/><path d="M63.5,11.3c1.9,0.9,2.3,1.9,1.4,3.7C64.5,13.8,64,12.6,63.5,11.3z"/></svg>
<svg id="fingerprint" class="" viewBox="0 0 64 80"><title>Fingerprint</title><g><path d="M47.09,45.23a87.38,87.38,0,0,1-3.88,12.44c-.51.41-1,.8-1.56,1.15A84.47,84.47,0,0,0,46.11,45a14.5,14.5,0,0,0-28.23-6.64,51.58,51.58,0,0,1-3.75,11q-.29-.55-.57-1.12a52.56,52.56,0,0,0,3.34-10.11,15.5,15.5,0,0,1,30.18,7.1Zm-13.6-9.88a6.5,6.5,0,0,0-7.82,4.84,52.46,52.46,0,0,1-6.32,16.21l.7.64a52.52,52.52,0,0,0,6.59-16.62,5.5,5.5,0,0,1,10.71,2.52,66.54,66.54,0,0,1-7.28,18.8q.56.07,1.14.09a67.07,67.07,0,0,0,7.11-18.66A6.5,6.5,0,0,0,33.49,35.35Zm1.37-5.84a12.5,12.5,0,0,0-15,9.3A50.52,50.52,0,0,1,15.32,51.4q.3.48.62.94A50.47,50.47,0,0,0,20.81,39a11.5,11.5,0,1,1,22.39,5.27,77.43,77.43,0,0,1-5.8,16.63c.46-.16.92-.34,1.37-.54a79.9,79.9,0,0,0,5.4-15.86A12.5,12.5,0,0,0,34.86,29.51ZM32.8,38.27a3.5,3.5,0,0,0-4.21,2.61,54.37,54.37,0,0,1-7,17.44c.27.2.55.39.83.58A55.42,55.42,0,0,0,29.57,41.1a2.5,2.5,0,1,1,4.87,1.14A62,62,0,0,1,27,61.08l.92.26a63.43,63.43,0,0,0,7.45-18.86A3.5,3.5,0,0,0,32.8,38.27Zm-.69,2.92a.5.5,0,0,0-.6.37A57.82,57.82,0,0,1,24.19,59.9c.3.16.61.3.92.44a59.17,59.17,0,0,0,7.37-18.56A.5.5,0,0,0,32.11,41.19ZM40.36,4.1a17.76,17.76,0,0,0-4.16-1.7,39.27,39.27,0,0,0-8.31,0,17.72,17.72,0,0,0-4.22,1.7A38.31,38.31,0,0,1,40.36,4.1ZM34.18,32.43A9.5,9.5,0,0,0,22.75,39.5c-.7,3-2.18,9.24-5.49,14.63q.33.41.68.81c3.51-5.59,5.05-12.1,5.78-15.2a8.5,8.5,0,1,1,16.55,3.89,70.85,70.85,0,0,1-6.71,18.15q.62-.06,1.23-.17a72.88,72.88,0,0,0,6.46-17.75A9.5,9.5,0,0,0,34.18,32.43ZM39.44,10A32.42,32.42,0,0,1,50,14.61c-.32-.62-.65-1.23-1-1.81a33.52,33.52,0,0,0-34,0c-.35.58-.68,1.19-1,1.8A32.39,32.39,0,0,1,39.44,10Zm.69-2.92a35.66,35.66,0,0,1,6.33,2.14q-.77-.91-1.6-1.73a36.79,36.79,0,0,0-4.51-1.38A36.32,36.32,0,0,0,19.15,7.51q-.84.82-1.61,1.75A35.32,35.32,0,0,1,40.13,7.12ZM38.76,13A29.35,29.35,0,0,1,52.3,20.27c-.2-.66-.42-1.3-.66-1.93a30.49,30.49,0,0,0-39.28,0c-.23.63-.46,1.28-.66,1.93A29.46,29.46,0,0,1,38.76,13ZM36.24,23.67A18.49,18.49,0,0,0,14,37.44a58.23,58.23,0,0,1-2,6.84q.24.72.51,1.43a55.19,55.19,0,0,0,2.48-8,17.5,17.5,0,1,1,34.07,8,89.83,89.83,0,0,1-2.52,8.7,27.61,27.61,0,0,0,1.88-2.54c.64-2.09,1.17-4.09,1.61-5.93A18.5,18.5,0,0,0,36.24,23.67Zm.69-2.92a21.51,21.51,0,0,0-25.85,16c-.13.56-.3,1.22-.49,1.94.12.73.26,1.44.42,2.15.42-1.38.77-2.7,1-3.86a20.49,20.49,0,0,1,40.4,6,37.94,37.94,0,0,0,.91-3.85A21.51,21.51,0,0,0,36.92,20.75ZM54,30.86a24.5,24.5,0,0,0-44,0c0,.33,0,.66,0,1q0,.76,0,1.5a23.5,23.5,0,0,1,43.94,0q0-.74,0-1.48C54,31.52,54,31.19,54,30.86Zm-15.91-15A26.39,26.39,0,0,1,53.63,26.37c-.1-.71-.2-1.41-.34-2.09a27.5,27.5,0,0,0-42.58,0c-.13.69-.24,1.39-.34,2.1A26.51,26.51,0,0,1,38.07,15.88Z"/></g></svg>