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.
Similar Code Snippets:
- Bootstrap 5 Password Strength Meter
- Input Error Shake Animation in CSS
- Roman Numeral Converter Using JavaScript
- CSS Multiline Text With Ellipsis
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.