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:

Thumbnail
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
    <html>
    <head></head>
    <body>
        <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"/>
     
         </g>
  
</svg> 
        </button>
    </body>
</html>

/*Downloaded from https://www.codeseek.co/Valerius_de_Hib/onoff-switch-svg-html-5-andamp-css-erweQM */
    button{
    border:0.0625em solid #000000;
    border-radius:0.3125em;
    font-size:1em;
    
}

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


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

Comments