<form>
    <label>
      <input name="checkItems" type="checkbox" />
      <span class="checkbox-ghost-2"></span>
      <svg width="100" height="100">
        <g>
          <circle cx="8" cy="8" r="6"></circle>
          <circle cx="30" cy="23" r="2"></circle>
          <circle cx="5" cy="40" r="2"></circle>
          <circle cx="20" cy="80" r="3"></circle>
          <circle cx="70" cy="90" r="2"></circle>
          <circle cx="90" cy="15" r="2"></circle>
          <circle cx="60" cy="20" r="4"></circle>
          <circle cx="80" cy="45" r="2"></circle>
          <circle cx="85" cy="62" r="3"></circle>
        </g>
      </svg>
      Check Me!
    </label>

  </form>

html {
      --accent: #2dc203;
      --dark-accent: #333;
    }

    @keyframes rightToLeftXWhite {
      0% {
        background: linear-gradient(0deg, #ffffff 0%, transparent 0%);
      }

      5% {
        background: linear-gradient(0deg, #ffffff 5%, transparent 5%);
      }

      10% {
        background: linear-gradient(0deg, #ffffff 10%, transparent 10%);
      }

      15% {
        background: linear-gradient(0deg, #ffffff 15%, transparent 15%);
      }

      20% {
        background: linear-gradient(0deg, #ffffff 20%, transparent 20%);
      }

      25% {
        background: linear-gradient(0deg, #ffffff 25%, transparent 25%);
      }

      30% {
        background: linear-gradient(0deg, #ffffff 30%, transparent 30%);
      }

      35% {
        background: linear-gradient(0deg, #ffffff 35%, transparent 35%);
      }

      40% {
        background: linear-gradient(0deg, #ffffff 40%, transparent 40%);
      }

      45% {
        background: linear-gradient(0deg, #ffffff 45%, transparent 45%);
      }

      50% {
        background: linear-gradient(0deg, #ffffff 50%, transparent 50%);
      }

      55% {
        background: linear-gradient(0deg, #ffffff 55%, transparent 55%);
      }

      60% {
        background: linear-gradient(0deg, #ffffff 60%, transparent 60%);
      }

      65% {
        background: linear-gradient(0deg, #ffffff 65%, transparent 65%);
      }

      70% {
        background: linear-gradient(0deg, #ffffff 70%, transparent 70%);
      }

      75% {
        background: linear-gradient(0deg, #ffffff 75%, transparent 75%);
      }

      80% {
        background: linear-gradient(0deg, #ffffff 80%, transparent 80%);
      }

      85% {
        background: linear-gradient(0deg, #ffffff 85%, transparent 85%);
      }

      90% {
        background: linear-gradient(0deg, #ffffff 90%, transparent 90%);
      }

      95% {
        background: linear-gradient(0deg, #ffffff 95%, transparent 95%);
      }

      100% {
        background: linear-gradient(0deg, #ffffff 100%, transparent 100%);
      }
    }

    @keyframes leftToRightXWhite {
      0% {
        background: linear-gradient(180deg, #ffffff 0%, transparent 0%);
      }

      5% {
        background: linear-gradient(180deg, #ffffff 5%, transparent 5%);
      }

      10% {
        background: linear-gradient(180deg, #ffffff 10%, transparent 10%);
      }

      15% {
        background: linear-gradient(180deg, #ffffff 15%, transparent 15%);
      }

      20% {
        background: linear-gradient(180deg, #ffffff 20%, transparent 20%);
      }

      25% {
        background: linear-gradient(180deg, #ffffff 25%, transparent 25%);
      }

      30% {
        background: linear-gradient(180deg, #ffffff 30%, transparent 30%);
      }

      35% {
        background: linear-gradient(180deg, #ffffff 35%, transparent 35%);
      }

      40% {
        background: linear-gradient(180deg, #ffffff 40%, transparent 40%);
      }

      45% {
        background: linear-gradient(180deg, #ffffff 45%, transparent 45%);
      }

      50% {
        background: linear-gradient(180deg, #ffffff 50%, transparent 50%);
      }

      55% {
        background: linear-gradient(180deg, #ffffff 55%, transparent 55%);
      }

      60% {
        background: linear-gradient(180deg, #ffffff 60%, transparent 60%);
      }

      65% {
        background: linear-gradient(180deg, #ffffff 65%, transparent 65%);
      }

      70% {
        background: linear-gradient(180deg, #ffffff 70%, transparent 70%);
      }

      75% {
        background: linear-gradient(180deg, #ffffff 75%, transparent 75%);
      }

      80% {
        background: linear-gradient(180deg, #ffffff 80%, transparent 80%);
      }

      85% {
        background: linear-gradient(180deg, #ffffff 85%, transparent 85%);
      }

      90% {
        background: linear-gradient(180deg, #ffffff 90%, transparent 90%);
      }

      95% {
        background: linear-gradient(180deg, #ffffff 95%, transparent 95%);
      }

      100% {
        background: linear-gradient(180deg, #ffffff 100%, transparent 100%);
      }
    }

    @keyframes rightToLeftX {
      0% {
        background: linear-gradient(0deg, var(--accent) 0%, transparent 0%);
      }

      5% {
        background: linear-gradient(0deg, var(--accent) 5%, transparent 5%);
      }

      10% {
        background: linear-gradient(0deg, var(--accent) 10%, transparent 10%);
      }

      15% {
        background: linear-gradient(0deg, var(--accent) 15%, transparent 15%);
      }

      20% {
        background: linear-gradient(0deg, var(--accent) 20%, transparent 20%);
      }

      25% {
        background: linear-gradient(0deg, var(--accent) 25%, transparent 25%);
      }

      30% {
        background: linear-gradient(0deg, var(--accent) 30%, transparent 30%);
      }

      35% {
        background: linear-gradient(0deg, var(--accent) 35%, transparent 35%);
      }

      40% {
        background: linear-gradient(0deg, var(--accent) 40%, transparent 40%);
      }

      45% {
        background: linear-gradient(0deg, var(--accent) 45%, transparent 45%);
      }

      50% {
        background: linear-gradient(0deg, var(--accent) 50%, transparent 50%);
      }

      55% {
        background: linear-gradient(0deg, var(--accent) 55%, transparent 55%);
      }

      60% {
        background: linear-gradient(0deg, var(--accent) 60%, transparent 60%);
      }

      65% {
        background: linear-gradient(0deg, var(--accent) 65%, transparent 65%);
      }

      70% {
        background: linear-gradient(0deg, var(--accent) 70%, transparent 70%);
      }

      75% {
        background: linear-gradient(0deg, var(--accent) 75%, transparent 75%);
      }

      80% {
        background: linear-gradient(0deg, var(--accent) 80%, transparent 80%);
      }

      85% {
        background: linear-gradient(0deg, var(--accent) 85%, transparent 85%);
      }

      90% {
        background: linear-gradient(0deg, var(--accent) 90%, transparent 90%);
      }

      95% {
        background: linear-gradient(0deg, var(--accent) 95%, transparent 95%);
      }

      100% {
        background: linear-gradient(0deg, var(--accent) 100%, transparent 100%);
      }
    }

    @keyframes svgAnimation {
      0% {
        transform: scale(0);
        opacity: 1;
      }

      30% {
        transform: scale(.7);
        opacity: 1;
      }

      50% {
        transform: scale(1);
        opacity: .5;
      }

      100% {
        transform: scale(1.2);
        opacity: 0;
      }
    }

    body {
      min-height: 100vh;
      font-family: 'Roboto', sans-serif;
      font-size: 15px;
      color: var(--dark-accent);
      background: #ffffff;
    }

    form {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 250px;
      min-height: 100vh;
      margin: auto;
      flex-direction: column;
    }

    label {
      flex-shrink: 0;
      transition: all 200ms ease-in;
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 50px;
      width: 100%;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid transparent;
      margin-bottom: 5px;
      font-weight: 500;
      font-size: 1.5em;
      user-select: none;
    }

    label.selected {
      color: var(--accent);
    }

    input[type='radio'],
    input[type='checkbox'] {
      position: absolute;
      opacity: 0;
    }

    .checkbox-ghost-2 {
      position: relative;
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 20px;
      border: 3px solid var(--accent);
      margin-right: 10px;
      transition: all 200ms ease-in;
    }

    label.selected .checkbox-ghost-2 {
      animation: rightToLeftX 100ms linear forwards;
    }

    label.selected .checkbox-ghost-2::before {
      animation: leftToRightXWhite 100ms linear forwards;
      animation-delay: 150ms;
      transform: rotate(-45deg);
      display: block;
      content: '';
      position: absolute;
      top: 11px;
      left: 3px;
      width: 5px;
      border-radius: 4px;
      height: 15px;
      margin-left: 6px;
    }

    label.selected .checkbox-ghost-2::after {
      animation: rightToLeftXWhite 100ms linear forwards;
      animation-delay: 250ms;
      transform: rotate(40deg);
      display: block;
      content: '';
      position: absolute;
      top: -4px;
      left: 16px;
      width: 5px;
      border-radius: 4px;
      height: 30px;
      margin-left: 6px;
    }

    label.selected .checkbox-ghost-2 + svg {
      animation: svgAnimation 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
      animation-delay: 300ms;
    }

    .checkbox-ghost-2 + svg {
      opacity: 0;
      position: absolute;
      margin-left: -30px;
    }

    .checkbox-ghost-2 + svg circle {
      fill: var(--accent);
    }

document.addEventListener('DOMContentLoaded', function () {
      document.addEventListener('change', function (e) {
        if (e.target.name === 'checkItems') {
          if (e.target.checked) {
            e.target.parentNode.className = 'selected';
          } else {
            e.target.parentNode.className = '';
          }
        }

      });
    });