---
title: tigro-check
made_by: tigro
---

```css
.checkbox-wrapper-62 input[type='checkbox'] {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper-62 *,
.checkbox-wrapper-62 ::after,
.checkbox-wrapper-62 ::before {
  box-sizing: border-box;
}

.checkbox-wrapper-62 {
  position: relative;
  display: block;
  overflow: hidden;
}
.checkbox-wrapper-62 .check {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 0;
}
.checkbox-wrapper-62 .label svg {
  vertical-align: middle;
}
.checkbox-wrapper-62 .path1 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: 0.5s all;
}
.checkbox-wrapper-62 .check:checked + label svg g path {
  stroke-dashoffset: 0;
}
```

```html
<div class="checkbox-wrapper-62">
  <input type="checkbox" class="check" id="check1-62" />
  <label for="check1-62" class="label">
    <svg width="43" height="43" viewbox="0 0 90 90">
      <rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
      <g transform="translate(0,-952.36218)">
        <path
          d="m 13,983 c 33,6 40,26 55,48 "
          stroke="black"
          stroke-width="3"
          class="path1"
          fill="none"
        />
        <path
          d="M 75,970 C 51,981 34,1014 25,1031 "
          stroke="black"
          stroke-width="3"
          class="path1"
          fill="none"
        />
      </g>
    </svg>
  </label>
</div>
```
