checkboxes

Sketch Checkbox

#checkbox#sketch#hand-drawn#svg#stroke-animation#scribble#css-only

의존성: 없음 (순수 HTML/CSS/JS)
추가일: 2026-06-11
출처: 원본 보기 ↗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sketch Checkbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="checkbox-wrapper">
    <input checked="" type="checkbox" class="check" id="check1-61">
    <label for="check1-61" class="label">
      <svg width="45" height="45" viewBox="0 0 95 95">
        <rect x="30" y="20" width="50" height="50" stroke="black" fill="none"></rect>
        <g transform="translate(0,-952.36222)">
          <path d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4" stroke="black" stroke-width="3" fill="none" class="path1"></path>
        </g>
      </svg>
      <span>Checkbox</span>
    </label>
  </div>
</body>
</html>