Флажок и тумблер checkbox карандашом

<label class="karandash-galochkoy"><input class="propiska-na-polyak" type="checkbox"> <span>Здесь выставляем галочку</span></label>

.karandash-galochkoy {
  display: block;
  margin: 1em;
  font-size: 20px;
  -webkit-tap-highlight-color: transparent;
}
.propiska-na-polyak {
  box-shadow: 0 0 0 0.125em rgba(45, 42, 42, 0.75) inset;
  display: inline-block;
  position: relative;
  margin: 0 4px 0 0!important;
  width: 35px;
  height: 35px;
  font-size: 25px;
  vertical-align: middle;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 3px;
}
.propiska-na-polyak:before, .propiska-na-polyak:after {
  content: "";
  display: block;
  position: absolute;
  animation: none;
}
.propiska-na-polyak:before {
  animation: eraseA 0.5s steps(1) forwards;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABICAMAAABx5AOBAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACcUExURUdwTDMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwzZNNQAAAAzdFJOUwD9CPf680HnDN0SLGUFwjrjnCK9s4agTAKAbEfXJ+weXBccyTV0z6eWj6TxeVdU0dKqUj+hA9AAAAIXSURBVBgZncAFduNAEATQEoItsszMGN66/9021GMpeXbU+mjGf8td0kkzNJKMHX7J52jA7tC4QM++8CqAmn1hiQut5MQyC1p9ViygFFusGEDHf2DFbAmVImLFrA0Vu8eKbgGdMcu8cQidqcOSaAqlzYwlhzaURheWbAtoxRavXgpozQNeRW1oJT1eLTKoTXjlPENtHtCw9lBLerzqjKAWWzTSFtSKgEbQhtroSMN9ht6TRaMPvXVEoxtC70Qjn0PPdyjcFfTCLY0TGnikcWhBr72g8HzoJT0aYzSwsijSEHrriOJhhwbONB7RQOZRpCFu2/iT82DQHyaosrsUXobbJjk/WUNUTWiMcdvQ47cOKpY5xaGF27oUUQtlHQp3ijv2Dr9ZQ5T4LkUH96xfKTq4CrcU+QZ3nSmiFow9jRj3+Ra/Wf8gioCia+O+8JXiCDGg8DL8pU8RLPFl6lKc8aedQxHjU7iliNb4U5JSpAk+7GnEqGFC4ezwrggoujZqmC8o+ng3oHB81DHqUcxCYOpSDFDPisIaItxSLOaoZxNQDLCnMUZdR4rIDyhmLdT1ROEGNFaobZ3zt9RGfUf+4k6h8MRf3kZQWAb8wdtBY9TjDyfoTFgVFFAZtR1WjKEUHlgWraHVYVkMtZglXRtqmUXDy6BXPNDoo4HWC0Uaooks4JegjWb8nB+8IZpq9xwyGqK58NGb7aDyH2UTzeCLYT1BAAAAAElFTkSuQmCC') 0 100%/1.2em 1.35em no-repeat;
  bottom: 0.2em;
  left: 0.3em;
  width: 0;
  height: 1.35em;
}
.propiska-na-polyak:after {
  animation: eraseB 0.5s linear forwards;
  background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%) 11.2em 0, linear-gradient(#c8646e, #c8646e) 11.2em 0, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 9.8em 0/0.3em 100%, repeating-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em) 10.2em 0/0.5em 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 10.8em 0/0.3em 100%, linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 65%) 9.7em 0, linear-gradient(#b4b4b4, #b4b4b4) 9.7em 0, linear-gradient(rgba(0, 0, 0, 0.1) 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0.2) 73%) 2em 0, linear-gradient(#f0d000, #f0d000) 2em 0, linear-gradient(-14deg, #1e1e1e 18%, rgba(30, 30, 30, 0) 20%) 0 0/0.5em 0.5em, linear-gradient(14deg, rgba(30, 30, 30, 0) 80%, #1e1e1e 83%) 0 0.5em/0.5em 0.5em, linear-gradient(-14deg, #d2a078 48%, rgba(210, 160, 120, 0) 50%) 0 0/2em 0.5em, linear-gradient(14deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 50%) 0 0.5em/2em 0.5em, linear-gradient(14deg, rgba(210, 160, 120, 0) 48%, #d2a078 50%) 0 0.5em/2em 0.5em;
  background-repeat: no-repeat;
  border-radius: 0 0.1em 0.1em 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: 0 0.25em;
  width: 12em;
  height: 1em;
}
.propiska-na-polyak:checked {
  background-color: transparent;
}
.propiska-na-polyak:checked:before {
  animation: drawA 0.5s linear forwards;
}
.propiska-na-polyak:checked:after {
  animation: drawB 0.5s linear;
}
.propiska-na-polyak:focus {
  outline: transparent;
}
.propiska-na-polyak:focus + span {
  color: rgba(0, 0, 0, 0.75);
  outline: transparent;
}
.pristine:before, .pristine:after {
  animation: none;
}
@keyframes drawA {
  from, 5% {
  width: 0;
  height: 1.35em;
  }
  90%, to {
  width: 1.2em;
  height: 1.35em;
  }
}
@keyframes drawB {
  from {
  opacity: 0;
  transform: translate(0em, -0.5em) rotate(-50deg);
  visibility: visible;
  }
  5% {
  opacity: 1;
  transform: translate(0em, 0.3em) rotate(-60deg);
  }
  17% {
  transform: translate(0.25em, 0.8em) rotate(-65deg);
  }
  79% {
  transform: translate(1.1em, -0.14em) rotate(-63deg);
  }
  90% {
  opacity: 1;
  transform: translate(1.2em, -0.15em) rotate(-63deg);
  }
  to {
  opacity: 0;
  transform: translate(1.25em, -1.7em) rotate(-63deg);
  }
}
@keyframes eraseA {
  from {
  width: 1.2em;
  height: 1.35em;
  }
  10% {
  width: 1.2em;
  height: 1.08em;
  }
  27% {
  width: 1.2em;
  height: 0.81em;
  }
  36% {
  width: 1.2em;
  height: 0.7em;
  }
  45% {
  width: 1.2em;
  height: 0.55em;
  }
  55% {
  width: 1.2em;
  height: 0.35em;
  }
  80%, to {
  width: 1.2em;
  height: 0;
  }
}
@keyframes eraseB {
  from {
  opacity: 0;
  transform: translate(0.6em, -12.2em) rotate(90deg);
  visibility: visible;
  }
  10% {
  opacity: 1;
  transform: translate(1.2em, -12.05em) rotate(90deg);
  }
  20% {
  transform: translate(0.6em, -11.9em) rotate(90deg);
  }
  30% {
  transform: translate(1.2em, -11.75em) rotate(90deg);
  }
  40% {
  transform: translate(0.6em, -11.6em) rotate(90deg);
  }
  50% {
  transform: translate(1.2em, -11.45em) rotate(90deg);
  }
  60% {
  transform: translate(0.6em, -11.3em) rotate(90deg);
  }
  70% {
  transform: translate(1.2em, -11.15em) rotate(90deg);
  }
  80% {
  transform: translate(0.6em, -11em) rotate(90deg);
  }
  90% {
  opacity: 1;
  transform: translate(2em, -12.5em) rotate(100deg);
  }
  to {
  opacity: 0;
  transform: translate(2em, -12.5em) rotate(100deg);
  }
}

<input type="checkbox" id="toggle" name="toggle" value="is_on">
<label for="toggle" class="kuvosip-mokelad">
  <div class="rychag1"></div>
  <div class="rychag2"></div>
  <div class="rychag3"></div>
  <div class="handle">
  <div class="rukoyatka-off"></div>
  <div class="rukoyatka-on"></div>
  </div>
</label>

.kuvosip-mokelad {
  background:
  radial-gradient(at top left,#fff 10%,#fff0 20%),
  radial-gradient(at top right,#fff 20%,#e4e4e4 35%);
  border-radius: 6em;
  box-shadow:
  0 0 0.25em #0002,
  0 3em 1.5em 0.5em #0002;
  cursor: pointer;
  display: block;
  font-size: 12px;
  position: relative;
  margin: auto;
  width: 20em;
  height: 12em;
  -webkit-tap-highlight-color: transparent;
}
.kuvosip-mokelad div {
  position: absolute;
}
.kuvosip-mokelad > div {
  top: 50%;
  left: 50%;
}
.kuvosip-mokelad > div:not(.handle) {
  transform: translate(-50%,-50%);
}
.rychag1 {
  background: #f0f0f0;
  border-radius: 5.5em;
  box-shadow: 0 0 0.2em 0.1em #f0f0f0;
  width: 19em;
  height: 11em;
}
.rychag2 {
  background: linear-gradient(0deg,#fff 33%,#ccc 45%);
  border-radius: 4.75em;
  box-shadow: 0 0 0.2em 0.3em #f0f0f0 inset;
  width: 16.5em;
  height: 9.5em;
}
.rychag3, .handle {
  background: linear-gradient(90deg, var(--on) 50%, var(--off) 0);
}
.rychag3 {
  background-position: 75% 0;
  background-size: 200% 100%;
  border-radius: 4.25em;
  box-shadow:
  0 0 0.1em 0.1em #ddd inset,
  0 1.5em 1.5em 1em #0004 inset,
  0 0 0 4.25em #0002 inset;
  width: 15.5em;
  height: 8.5em;
  transition: background-position var(--transDur) ease-in-out;
}
.handle {
  border-radius: 50%;
  box-shadow: 0 0 0.5em 0 #0007;
  width: 8.5em;
  height: 8.5em;
  transform: translate(-90%,-50%);
  transition: transform var(--transDur) ease-in-out;
  z-index: 0;
}
.handle:before {
  background:
  radial-gradient(2em 1.5em at 50% 35%,#fff6 15%,#fff0),
  radial-gradient(1.5em 2.5em at 75% 40%,#fff6 15%,#fff0),
  radial-gradient(100% 100% at 50% 33%,#0000 25%,#0003 50%);
  border-radius: 50%;
  box-shadow: 0 0 0.3em 0.1em #0003 inset;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.rukoyatka-off, .rukoyatka-on {
  width: 50%;
  height: 100%;
  transition: transform calc(var(--transDur)/2);
  z-index: 2;
}
.rukoyatka-off {
  background: var(--off);
  border-radius: 100% 0 0 100% / 50% 50% 50% 50%;
  right: 50%;
  transform-origin: 100% 50%;
  transition-delay: calc(var(--transDur)/2);
  transition-timing-function: ease-out;
}
.rukoyatka-on {
  background: var(--on);
  border-radius: 0 100% 100% 0 / 50% 50% 50% 50%;
  left: 50%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-timing-function: ease-in;
}

/* On */
input:checked + .kuvosip-mokelad .rychag3 {
  background-position: 25% 0;
}
input:checked + .kuvosip-mokelad .handle {
  transform: translate(-10%,-50%);
}
input:checked + .kuvosip-mokelad .rukoyatka-off {
  transform: scaleX(0);
  transition-delay: 0s;
  transition-timing-function: ease-in;
}
input:checked + .kuvosip-mokelad .rukoyatka-on {
  transform: scaleX(1);
  transition-delay: calc(var(--transDur)/2);
  transition-timing-function: ease-out;
}