Silky Smooth Checkbox Toggles Using SVG.js

Silky Smooth Checkbox Toggles Using SVG.js
Code Snippet:Silky smooth checkbox toggles with SVG.js
Author: Josh Dillon
Published: March 21, 2024
Last Updated: March 21, 2024
Downloads: 134
License: MIT
Edit Code online: View on CodePen
Read More

This code creates smooth checkbox toggles using SVG.js graphics. It animates checkboxes with smooth sliding effects. It helps enhance user interface interactions.

You can use this code in web projects to improve user experience. It adds visually appealing animations to checkboxes. Enhancing UI can lead to higher user engagement.

How to Create Silky Smooth Checkbox Toggles Using Svg.js

1. First of all, load the Google Fonts by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Set up a basic HTML structure. Include the necessary elements for your checkboxes and their associated labels. Make sure to add unique IDs to your checkboxes for easy targeting.

<h1>Silky smooth checkbox toggles</h1>

<div class="wrapper">
  <div class="input-container">
    <input id="slide-toggle-control" type="checkbox" value="1" />
    <label id="slide-toggle-label" for="slide-toggle-control" class="control-label">
      <svg height="36" width="100" xmlns="http://www.w3.org/2000/svg">
        <g class="switch">
          <g class="row">
            <rect x="6" y="6" width="2" height="2" />
            <rect x="8" y="6" width="2" height="2" />
            <rect x="10" y="6" width="2" height="2" />
            <rect x="12" y="6" width="2" height="2" />
            <rect x="14" y="6" width="2" height="2" />
            <rect x="16" y="6" width="2" height="2" />
            <rect x="18" y="6" width="2" height="2" />
            <rect x="20" y="6" width="2" height="2" />
            <rect x="22" y="6" width="2" height="2" />
            <rect x="24" y="6" width="2" height="2" />
            <rect x="26" y="6" width="2" height="2" />
            <rect x="28" y="6" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="8" width="2" height="2" />
            <rect x="8" y="8" width="2" height="2" />
            <rect x="10" y="8" width="2" height="2" />
            <rect x="12" y="8" width="2" height="2" />
            <rect x="14" y="8" width="2" height="2" />
            <rect x="16" y="8" width="2" height="2" />
            <rect x="18" y="8" width="2" height="2" />
            <rect x="20" y="8" width="2" height="2" />
            <rect x="22" y="8" width="2" height="2" />
            <rect x="24" y="8" width="2" height="2" />
            <rect x="26" y="8" width="2" height="2" />
            <rect x="28" y="8" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="10" width="2" height="2" />
            <rect x="8" y="10" width="2" height="2" />
            <rect x="10" y="10" width="2" height="2" />
            <rect x="12" y="10" width="2" height="2" />
            <rect x="14" y="10" width="2" height="2" />
            <rect x="16" y="10" width="2" height="2" />
            <rect x="18" y="10" width="2" height="2" />
            <rect x="20" y="10" width="2" height="2" />
            <rect x="22" y="10" width="2" height="2" />
            <rect x="24" y="10" width="2" height="2" />
            <rect x="26" y="10" width="2" height="2" />
            <rect x="28" y="10" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="12" width="2" height="2" />
            <rect x="8" y="12" width="2" height="2" />
            <rect x="10" y="12" width="2" height="2" />
            <rect x="12" y="12" width="2" height="2" />
            <rect x="14" y="12" width="2" height="2" />
            <rect x="16" y="12" width="2" height="2" />
            <rect x="18" y="12" width="2" height="2" />
            <rect x="20" y="12" width="2" height="2" />
            <rect x="22" y="12" width="2" height="2" />
            <rect x="24" y="12" width="2" height="2" />
            <rect x="26" y="12" width="2" height="2" />
            <rect x="28" y="12" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="14" width="2" height="2" />
            <rect x="8" y="14" width="2" height="2" />
            <rect x="10" y="14" width="2" height="2" />
            <rect x="12" y="14" width="2" height="2" />
            <rect x="14" y="14" width="2" height="2" />
            <rect x="16" y="14" width="2" height="2" />
            <rect x="18" y="14" width="2" height="2" />
            <rect x="20" y="14" width="2" height="2" />
            <rect x="22" y="14" width="2" height="2" />
            <rect x="24" y="14" width="2" height="2" />
            <rect x="26" y="14" width="2" height="2" />
            <rect x="28" y="14" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="16" width="2" height="2" />
            <rect x="8" y="16" width="2" height="2" />
            <rect x="10" y="16" width="2" height="2" />
            <rect x="12" y="16" width="2" height="2" />
            <rect x="14" y="16" width="2" height="2" />
            <rect x="16" y="16" width="2" height="2" />
            <rect x="18" y="16" width="2" height="2" />
            <rect x="20" y="16" width="2" height="2" />
            <rect x="22" y="16" width="2" height="2" />
            <rect x="24" y="16" width="2" height="2" />
            <rect x="26" y="16" width="2" height="2" />
            <rect x="28" y="16" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="18" width="2" height="2" />
            <rect x="8" y="18" width="2" height="2" />
            <rect x="10" y="18" width="2" height="2" />
            <rect x="12" y="18" width="2" height="2" />
            <rect x="14" y="18" width="2" height="2" />
            <rect x="16" y="18" width="2" height="2" />
            <rect x="18" y="18" width="2" height="2" />
            <rect x="20" y="18" width="2" height="2" />
            <rect x="22" y="18" width="2" height="2" />
            <rect x="24" y="18" width="2" height="2" />
            <rect x="26" y="18" width="2" height="2" />
            <rect x="28" y="18" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="20" width="2" height="2" />
            <rect x="8" y="20" width="2" height="2" />
            <rect x="10" y="20" width="2" height="2" />
            <rect x="12" y="20" width="2" height="2" />
            <rect x="14" y="20" width="2" height="2" />
            <rect x="16" y="20" width="2" height="2" />
            <rect x="18" y="20" width="2" height="2" />
            <rect x="20" y="20" width="2" height="2" />
            <rect x="22" y="20" width="2" height="2" />
            <rect x="24" y="20" width="2" height="2" />
            <rect x="26" y="20" width="2" height="2" />
            <rect x="28" y="20" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="22" width="2" height="2" />
            <rect x="8" y="22" width="2" height="2" />
            <rect x="10" y="22" width="2" height="2" />
            <rect x="12" y="22" width="2" height="2" />
            <rect x="14" y="22" width="2" height="2" />
            <rect x="16" y="22" width="2" height="2" />
            <rect x="18" y="22" width="2" height="2" />
            <rect x="20" y="22" width="2" height="2" />
            <rect x="22" y="22" width="2" height="2" />
            <rect x="24" y="22" width="2" height="2" />
            <rect x="26" y="22" width="2" height="2" />
            <rect x="28" y="22" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="24" width="2" height="2" />
            <rect x="8" y="24" width="2" height="2" />
            <rect x="10" y="24" width="2" height="2" />
            <rect x="12" y="24" width="2" height="2" />
            <rect x="14" y="24" width="2" height="2" />
            <rect x="16" y="24" width="2" height="2" />
            <rect x="18" y="24" width="2" height="2" />
            <rect x="20" y="24" width="2" height="2" />
            <rect x="22" y="24" width="2" height="2" />
            <rect x="24" y="24" width="2" height="2" />
            <rect x="26" y="24" width="2" height="2" />
            <rect x="28" y="24" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="26" width="2" height="2" />
            <rect x="8" y="26" width="2" height="2" />
            <rect x="10" y="26" width="2" height="2" />
            <rect x="12" y="26" width="2" height="2" />
            <rect x="14" y="26" width="2" height="2" />
            <rect x="16" y="26" width="2" height="2" />
            <rect x="18" y="26" width="2" height="2" />
            <rect x="20" y="26" width="2" height="2" />
            <rect x="22" y="26" width="2" height="2" />
            <rect x="24" y="26" width="2" height="2" />
            <rect x="26" y="26" width="2" height="2" />
            <rect x="28" y="26" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="28" width="2" height="2" />
            <rect x="8" y="28" width="2" height="2" />
            <rect x="10" y="28" width="2" height="2" />
            <rect x="12" y="28" width="2" height="2" />
            <rect x="14" y="28" width="2" height="2" />
            <rect x="16" y="28" width="2" height="2" />
            <rect x="18" y="28" width="2" height="2" />
            <rect x="20" y="28" width="2" height="2" />
            <rect x="22" y="28" width="2" height="2" />
            <rect x="24" y="28" width="2" height="2" />
            <rect x="26" y="28" width="2" height="2" />
            <rect x="28" y="28" width="2" height="2" />
          </g>
        </g>
      </svg>
    </label>
    <label for="slide-toggle-control">Offset</label>
  </div>

  <div class="input-container">
    <input id="random-slide-toggle-control" type="checkbox" value="1" />
    <label id="random-slide-toggle-label" for="random-slide-toggle-control" class="control-label">
      <svg height="36" width="100" xmlns="http://www.w3.org/2000/svg">
        <g class="switch">
          <g class="row">
            <rect x="6" y="6" width="2" height="2" />
            <rect x="8" y="6" width="2" height="2" />
            <rect x="10" y="6" width="2" height="2" />
            <rect x="12" y="6" width="2" height="2" />
            <rect x="14" y="6" width="2" height="2" />
            <rect x="16" y="6" width="2" height="2" />
            <rect x="18" y="6" width="2" height="2" />
            <rect x="20" y="6" width="2" height="2" />
            <rect x="22" y="6" width="2" height="2" />
            <rect x="24" y="6" width="2" height="2" />
            <rect x="26" y="6" width="2" height="2" />
            <rect x="28" y="6" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="8" width="2" height="2" />
            <rect x="8" y="8" width="2" height="2" />
            <rect x="10" y="8" width="2" height="2" />
            <rect x="12" y="8" width="2" height="2" />
            <rect x="14" y="8" width="2" height="2" />
            <rect x="16" y="8" width="2" height="2" />
            <rect x="18" y="8" width="2" height="2" />
            <rect x="20" y="8" width="2" height="2" />
            <rect x="22" y="8" width="2" height="2" />
            <rect x="24" y="8" width="2" height="2" />
            <rect x="26" y="8" width="2" height="2" />
            <rect x="28" y="8" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="10" width="2" height="2" />
            <rect x="8" y="10" width="2" height="2" />
            <rect x="10" y="10" width="2" height="2" />
            <rect x="12" y="10" width="2" height="2" />
            <rect x="14" y="10" width="2" height="2" />
            <rect x="16" y="10" width="2" height="2" />
            <rect x="18" y="10" width="2" height="2" />
            <rect x="20" y="10" width="2" height="2" />
            <rect x="22" y="10" width="2" height="2" />
            <rect x="24" y="10" width="2" height="2" />
            <rect x="26" y="10" width="2" height="2" />
            <rect x="28" y="10" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="12" width="2" height="2" />
            <rect x="8" y="12" width="2" height="2" />
            <rect x="10" y="12" width="2" height="2" />
            <rect x="12" y="12" width="2" height="2" />
            <rect x="14" y="12" width="2" height="2" />
            <rect x="16" y="12" width="2" height="2" />
            <rect x="18" y="12" width="2" height="2" />
            <rect x="20" y="12" width="2" height="2" />
            <rect x="22" y="12" width="2" height="2" />
            <rect x="24" y="12" width="2" height="2" />
            <rect x="26" y="12" width="2" height="2" />
            <rect x="28" y="12" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="14" width="2" height="2" />
            <rect x="8" y="14" width="2" height="2" />
            <rect x="10" y="14" width="2" height="2" />
            <rect x="12" y="14" width="2" height="2" />
            <rect x="14" y="14" width="2" height="2" />
            <rect x="16" y="14" width="2" height="2" />
            <rect x="18" y="14" width="2" height="2" />
            <rect x="20" y="14" width="2" height="2" />
            <rect x="22" y="14" width="2" height="2" />
            <rect x="24" y="14" width="2" height="2" />
            <rect x="26" y="14" width="2" height="2" />
            <rect x="28" y="14" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="16" width="2" height="2" />
            <rect x="8" y="16" width="2" height="2" />
            <rect x="10" y="16" width="2" height="2" />
            <rect x="12" y="16" width="2" height="2" />
            <rect x="14" y="16" width="2" height="2" />
            <rect x="16" y="16" width="2" height="2" />
            <rect x="18" y="16" width="2" height="2" />
            <rect x="20" y="16" width="2" height="2" />
            <rect x="22" y="16" width="2" height="2" />
            <rect x="24" y="16" width="2" height="2" />
            <rect x="26" y="16" width="2" height="2" />
            <rect x="28" y="16" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="18" width="2" height="2" />
            <rect x="8" y="18" width="2" height="2" />
            <rect x="10" y="18" width="2" height="2" />
            <rect x="12" y="18" width="2" height="2" />
            <rect x="14" y="18" width="2" height="2" />
            <rect x="16" y="18" width="2" height="2" />
            <rect x="18" y="18" width="2" height="2" />
            <rect x="20" y="18" width="2" height="2" />
            <rect x="22" y="18" width="2" height="2" />
            <rect x="24" y="18" width="2" height="2" />
            <rect x="26" y="18" width="2" height="2" />
            <rect x="28" y="18" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="20" width="2" height="2" />
            <rect x="8" y="20" width="2" height="2" />
            <rect x="10" y="20" width="2" height="2" />
            <rect x="12" y="20" width="2" height="2" />
            <rect x="14" y="20" width="2" height="2" />
            <rect x="16" y="20" width="2" height="2" />
            <rect x="18" y="20" width="2" height="2" />
            <rect x="20" y="20" width="2" height="2" />
            <rect x="22" y="20" width="2" height="2" />
            <rect x="24" y="20" width="2" height="2" />
            <rect x="26" y="20" width="2" height="2" />
            <rect x="28" y="20" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="22" width="2" height="2" />
            <rect x="8" y="22" width="2" height="2" />
            <rect x="10" y="22" width="2" height="2" />
            <rect x="12" y="22" width="2" height="2" />
            <rect x="14" y="22" width="2" height="2" />
            <rect x="16" y="22" width="2" height="2" />
            <rect x="18" y="22" width="2" height="2" />
            <rect x="20" y="22" width="2" height="2" />
            <rect x="22" y="22" width="2" height="2" />
            <rect x="24" y="22" width="2" height="2" />
            <rect x="26" y="22" width="2" height="2" />
            <rect x="28" y="22" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="24" width="2" height="2" />
            <rect x="8" y="24" width="2" height="2" />
            <rect x="10" y="24" width="2" height="2" />
            <rect x="12" y="24" width="2" height="2" />
            <rect x="14" y="24" width="2" height="2" />
            <rect x="16" y="24" width="2" height="2" />
            <rect x="18" y="24" width="2" height="2" />
            <rect x="20" y="24" width="2" height="2" />
            <rect x="22" y="24" width="2" height="2" />
            <rect x="24" y="24" width="2" height="2" />
            <rect x="26" y="24" width="2" height="2" />
            <rect x="28" y="24" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="26" width="2" height="2" />
            <rect x="8" y="26" width="2" height="2" />
            <rect x="10" y="26" width="2" height="2" />
            <rect x="12" y="26" width="2" height="2" />
            <rect x="14" y="26" width="2" height="2" />
            <rect x="16" y="26" width="2" height="2" />
            <rect x="18" y="26" width="2" height="2" />
            <rect x="20" y="26" width="2" height="2" />
            <rect x="22" y="26" width="2" height="2" />
            <rect x="24" y="26" width="2" height="2" />
            <rect x="26" y="26" width="2" height="2" />
            <rect x="28" y="26" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="28" width="2" height="2" />
            <rect x="8" y="28" width="2" height="2" />
            <rect x="10" y="28" width="2" height="2" />
            <rect x="12" y="28" width="2" height="2" />
            <rect x="14" y="28" width="2" height="2" />
            <rect x="16" y="28" width="2" height="2" />
            <rect x="18" y="28" width="2" height="2" />
            <rect x="20" y="28" width="2" height="2" />
            <rect x="22" y="28" width="2" height="2" />
            <rect x="24" y="28" width="2" height="2" />
            <rect x="26" y="28" width="2" height="2" />
            <rect x="28" y="28" width="2" height="2" />
          </g>
        </g>
      </svg>
    </label>
    <label for="random-slide-toggle-control">Random</label>
  </div>
  
  <div class="input-container">
    <input id="delayed-offset-slide-toggle-control" type="checkbox" value="1" />
    <label id="delayed-offset-slide-toggle-label" for="delayed-offset-slide-toggle-control" class="control-label">
      <svg height="36" width="100" xmlns="http://www.w3.org/2000/svg">
        <g class="switch">
          <g class="row">
            <rect x="6" y="6" width="2" height="2" />
            <rect x="8" y="6" width="2" height="2" />
            <rect x="10" y="6" width="2" height="2" />
            <rect x="12" y="6" width="2" height="2" />
            <rect x="14" y="6" width="2" height="2" />
            <rect x="16" y="6" width="2" height="2" />
            <rect x="18" y="6" width="2" height="2" />
            <rect x="20" y="6" width="2" height="2" />
            <rect x="22" y="6" width="2" height="2" />
            <rect x="24" y="6" width="2" height="2" />
            <rect x="26" y="6" width="2" height="2" />
            <rect x="28" y="6" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="8" width="2" height="2" />
            <rect x="8" y="8" width="2" height="2" />
            <rect x="10" y="8" width="2" height="2" />
            <rect x="12" y="8" width="2" height="2" />
            <rect x="14" y="8" width="2" height="2" />
            <rect x="16" y="8" width="2" height="2" />
            <rect x="18" y="8" width="2" height="2" />
            <rect x="20" y="8" width="2" height="2" />
            <rect x="22" y="8" width="2" height="2" />
            <rect x="24" y="8" width="2" height="2" />
            <rect x="26" y="8" width="2" height="2" />
            <rect x="28" y="8" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="10" width="2" height="2" />
            <rect x="8" y="10" width="2" height="2" />
            <rect x="10" y="10" width="2" height="2" />
            <rect x="12" y="10" width="2" height="2" />
            <rect x="14" y="10" width="2" height="2" />
            <rect x="16" y="10" width="2" height="2" />
            <rect x="18" y="10" width="2" height="2" />
            <rect x="20" y="10" width="2" height="2" />
            <rect x="22" y="10" width="2" height="2" />
            <rect x="24" y="10" width="2" height="2" />
            <rect x="26" y="10" width="2" height="2" />
            <rect x="28" y="10" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="12" width="2" height="2" />
            <rect x="8" y="12" width="2" height="2" />
            <rect x="10" y="12" width="2" height="2" />
            <rect x="12" y="12" width="2" height="2" />
            <rect x="14" y="12" width="2" height="2" />
            <rect x="16" y="12" width="2" height="2" />
            <rect x="18" y="12" width="2" height="2" />
            <rect x="20" y="12" width="2" height="2" />
            <rect x="22" y="12" width="2" height="2" />
            <rect x="24" y="12" width="2" height="2" />
            <rect x="26" y="12" width="2" height="2" />
            <rect x="28" y="12" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="14" width="2" height="2" />
            <rect x="8" y="14" width="2" height="2" />
            <rect x="10" y="14" width="2" height="2" />
            <rect x="12" y="14" width="2" height="2" />
            <rect x="14" y="14" width="2" height="2" />
            <rect x="16" y="14" width="2" height="2" />
            <rect x="18" y="14" width="2" height="2" />
            <rect x="20" y="14" width="2" height="2" />
            <rect x="22" y="14" width="2" height="2" />
            <rect x="24" y="14" width="2" height="2" />
            <rect x="26" y="14" width="2" height="2" />
            <rect x="28" y="14" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="16" width="2" height="2" />
            <rect x="8" y="16" width="2" height="2" />
            <rect x="10" y="16" width="2" height="2" />
            <rect x="12" y="16" width="2" height="2" />
            <rect x="14" y="16" width="2" height="2" />
            <rect x="16" y="16" width="2" height="2" />
            <rect x="18" y="16" width="2" height="2" />
            <rect x="20" y="16" width="2" height="2" />
            <rect x="22" y="16" width="2" height="2" />
            <rect x="24" y="16" width="2" height="2" />
            <rect x="26" y="16" width="2" height="2" />
            <rect x="28" y="16" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="18" width="2" height="2" />
            <rect x="8" y="18" width="2" height="2" />
            <rect x="10" y="18" width="2" height="2" />
            <rect x="12" y="18" width="2" height="2" />
            <rect x="14" y="18" width="2" height="2" />
            <rect x="16" y="18" width="2" height="2" />
            <rect x="18" y="18" width="2" height="2" />
            <rect x="20" y="18" width="2" height="2" />
            <rect x="22" y="18" width="2" height="2" />
            <rect x="24" y="18" width="2" height="2" />
            <rect x="26" y="18" width="2" height="2" />
            <rect x="28" y="18" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="20" width="2" height="2" />
            <rect x="8" y="20" width="2" height="2" />
            <rect x="10" y="20" width="2" height="2" />
            <rect x="12" y="20" width="2" height="2" />
            <rect x="14" y="20" width="2" height="2" />
            <rect x="16" y="20" width="2" height="2" />
            <rect x="18" y="20" width="2" height="2" />
            <rect x="20" y="20" width="2" height="2" />
            <rect x="22" y="20" width="2" height="2" />
            <rect x="24" y="20" width="2" height="2" />
            <rect x="26" y="20" width="2" height="2" />
            <rect x="28" y="20" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="22" width="2" height="2" />
            <rect x="8" y="22" width="2" height="2" />
            <rect x="10" y="22" width="2" height="2" />
            <rect x="12" y="22" width="2" height="2" />
            <rect x="14" y="22" width="2" height="2" />
            <rect x="16" y="22" width="2" height="2" />
            <rect x="18" y="22" width="2" height="2" />
            <rect x="20" y="22" width="2" height="2" />
            <rect x="22" y="22" width="2" height="2" />
            <rect x="24" y="22" width="2" height="2" />
            <rect x="26" y="22" width="2" height="2" />
            <rect x="28" y="22" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="24" width="2" height="2" />
            <rect x="8" y="24" width="2" height="2" />
            <rect x="10" y="24" width="2" height="2" />
            <rect x="12" y="24" width="2" height="2" />
            <rect x="14" y="24" width="2" height="2" />
            <rect x="16" y="24" width="2" height="2" />
            <rect x="18" y="24" width="2" height="2" />
            <rect x="20" y="24" width="2" height="2" />
            <rect x="22" y="24" width="2" height="2" />
            <rect x="24" y="24" width="2" height="2" />
            <rect x="26" y="24" width="2" height="2" />
            <rect x="28" y="24" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="26" width="2" height="2" />
            <rect x="8" y="26" width="2" height="2" />
            <rect x="10" y="26" width="2" height="2" />
            <rect x="12" y="26" width="2" height="2" />
            <rect x="14" y="26" width="2" height="2" />
            <rect x="16" y="26" width="2" height="2" />
            <rect x="18" y="26" width="2" height="2" />
            <rect x="20" y="26" width="2" height="2" />
            <rect x="22" y="26" width="2" height="2" />
            <rect x="24" y="26" width="2" height="2" />
            <rect x="26" y="26" width="2" height="2" />
            <rect x="28" y="26" width="2" height="2" />
          </g>

          <g class="row">
            <rect x="6" y="28" width="2" height="2" />
            <rect x="8" y="28" width="2" height="2" />
            <rect x="10" y="28" width="2" height="2" />
            <rect x="12" y="28" width="2" height="2" />
            <rect x="14" y="28" width="2" height="2" />
            <rect x="16" y="28" width="2" height="2" />
            <rect x="18" y="28" width="2" height="2" />
            <rect x="20" y="28" width="2" height="2" />
            <rect x="22" y="28" width="2" height="2" />
            <rect x="24" y="28" width="2" height="2" />
            <rect x="26" y="28" width="2" height="2" />
            <rect x="28" y="28" width="2" height="2" />
          </g>
        </g>
      </svg>
    </label>
    <label for="delayed-offset-slide-toggle-control">Delayed offset</label>
  </div>
</div>

3. Apply custom styles to your checkboxes and labels using CSS. You can customize the colors, sizes, and animations according to your design preferences. Ensure the styling is cohesive with your overall website theme.

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300&display=swap");
html,
body {
  height: 100%;
}

body{
  background-color: #3d3e4a;
  color: #a3a7ad;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  flex-direction: column;
}



h1 {
  background-color: rgba(0, 0, 0, 0.5);
  color: #76b3fa;
  font-size: 20px;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 300;
  margin-bottom: 30px;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px;
}

.input-container {
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 10px 20px;
  position: relative;
}

.control-label {
  background-color: #24252c;
  background-image: repeating-linear-gradient(0deg, #181a29, #181a29 2px, #202436 2px, #202436 4px);
  border: 2px solid #575969;
  border-radius: 4px;
  display: block;
  width: 84px;
  height: 36px;
  position: relative;
  transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
  margin-bottom: 15px;
}

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

input[type=checkbox]:checked + label {
  border-color: #76b3fa;
  box-shadow: 0 0 20px 0 #0763f7, inset 0px 0px 12px 0px #0763f7;
}
input[type=checkbox]:checked + label svg rect {
  fill: #76b3fa;
}

input[type=checkbox]:focus + label {
  border-color: #76b3fa;
}

svg rect {
  fill: #484a57;
  transition: fill 300ms ease-in-out;
}
svg .reference rect {
  opacity: 0;
}

4. Now, load the SVG.js by adding the following CDN link just before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js'></script>

5. Finally, paste the following JavaScript code into your project. This code initializes SVG.js and sets up smooth sliding effects for checkbox toggles. Ensure that the IDs used in the JavaScript match the IDs of your HTML elements.

SVG.on(document, "DOMContentLoaded", () => {
  const slideToggle = document.getElementById("slide-toggle-control");
  const randomSlideToggle = document.getElementById("random-slide-toggle-control");
  const delayedSlideToggle = document.getElementById("delayed-offset-slide-toggle-control");

  const slide = {
    element: slideToggle,
    handler: svgSlideEffect,
    offset: 10,
    duration: 200,
    random: false,
  };

  const randomSlide = {
    element: randomSlideToggle,
    handler: svgSlideEffect,
    offset: 8,
    duration: 150,
    random: true,
  };
  
  const delayedOffsetSlide = {
    element: delayedSlideToggle,
    handler: svgSlideEffect,
    offset: 50,
    duration: 50,
    random: false,
  };

  new SvgToggleEffect(slide);
  new SvgToggleEffect(randomSlide);
  new SvgToggleEffect(delayedOffsetSlide);
});

class SvgToggleEffect {
  constructor(effect) {
    this.nodes = [
      ...effect.element.nextElementSibling.querySelectorAll(".row")
    ];

    this.nodes.forEach((node, index) => {
      this.nodes[index] = SVG(node);
    });

    if (effect.random) {
      this.randomizeArray(this.nodes);
    }

    effect.element.addEventListener("change", () => {
      if (effect.element.checked) {
        effect.handler(this.nodes, false, effect.duration, effect.offset);
      } else {
        effect.handler(this.nodes, true, effect.duration, effect.offset);
      }
    });
  }

  randomizeArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }
}

const svgSlideEffect = (nodes = [], reverse = false, duration = 100, offset = 10) => {
  nodes.forEach((node, index) => {
    setTimeout(() => {
      if (reverse) {
        node.animate({ duration: duration }).transform({ translate: 0 });
      } else {
        node.animate({ duration: duration }).transform({ translate: 48 });
      }
    }, index * offset);
  });
};

That’s all! hopefully, you have successfully created Silky Smooth Checkbox Toggles Using Svg.js. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X