On/OFF Switch SVG HTML 5 & CSS

In this example below you will see how to do a On/OFF Switch SVG HTML 5 & CSS with some HTML / CSS and Javascript

With SVG it is possible to script an extremely professional User Interface.User Interfaces scripted with SVG are:

This awesome code was written by Valerius_de_Hib, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Valerius_de_Hib ©
  • HTML
  • CSS
  • JavaScript
        <button type="button" id="on_off_switch" title="On/Off switch">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width ="40" height="50" viewBox="4.5,4.5,30 40">
            <title>On/Off Logo</title>
            <g transform="translate(19.75,25.5)  scale(10,10)">
                <path stroke="#000000" stroke-width=".1" stroke-linecap="round" fill="none" d="M-0.5 -.8660254037 A1, 1, -30 1 0 .5 -0.8660254037"/>
                <line stroke ="#000000" stroke-width=".1" stroke-linecap="round" x1="0" y1="-1.5" x2 = "0" y2 ="0"/>

/*Downloaded from https://www.codeseek.co/Valerius_de_Hib/onoff-switch-svg-html-5-andamp-css-erweQM */
    border:0.0625em solid #000000;

/*0.0625em = 1px*/
/*0.125em= 2px*/
/*.25em = "4px"*/
/*.3125em* = 5px/

/*Downloaded from https://www.codeseek.co/Valerius_de_Hib/onoff-switch-svg-html-5-andamp-css-erweQM */