galaxy/Checkboxes/mrpumps31232_heavy-bear-50.html

<label class="checkbox">
  <input type="checkbox">
  <div class="checkbox-circle">
    <svg viewBox="0 0 52 52" class="checkmark">
      <circle fill="none" r="25" cy="26" cx="26" class="checkmark-circle"></circle>
      <path d="M16 26l9.2 8.4 17.4-21.4" class="checkmark-kick"></path>
    </svg>
  </div>
</label>

<style>
/* From Uiverse.io by mrpumps31232 - Tags: green, minimalist, checkbox, circle, animated, clean */
.checkbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}

.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.checkbox-circle {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #aaa;
  transition: all 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle {
  background: #4CAF50;
  border-color: #4CAF50;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: all 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark {
  opacity: 1;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  transition: stroke-dashoffset 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark-circle {
  stroke-dashoffset: 0;
}

.checkmark-kick {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 0.3s;
}

.checkbox input[type="checkbox"]:checked ~ .checkbox-circle .checkmark-kick {
  stroke-dashoffset: 0;
}

</style>