SVG Switches · Extra
Nine switch designs (plus a Switch 5 variation inside Lesson 1), each driven by the same vSwitch variable.
Lesson 01
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="4" width="72" height="42" rx="21" fill="%23705578" stroke="%23d5d8e3" stroke-width="2"><animate attributeName="fill" from="%23dfe2ec" to="%23705578" dur="0.2s" fill="freeze"/></rect><rect x="36" y="4" width="40" height="42" rx="13" fill="%23ffffff" stroke="%239da6b5" stroke-width="2.5"><animate attributeName="x" from="13" to="36" dur="0.2s" fill="freeze"/></rect></svg>)
Switch 1: Sliding rounded rectangle
A sliding-knob switch driven by vSwitch. · 10 min
Lesson 02
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="5" width="70" height="40" rx="11" fill="%23705578" stroke="%23d5d8e3" stroke-width="2"><animate attributeName="fill" from="%23dfe2ec" to="%23705578" dur="0.2s" fill="freeze"/></rect><rect x="36" y="5" width="38" height="40" rx="10" fill="%23ffffff" stroke="%239da6b5" stroke-width="2.5"><animate attributeName="x" from="13" to="36" dur="0.2s" fill="freeze"/></rect></svg>)
Switch 2: Compact rectangular switch
Squarer corners on the track and knob, same vSwitch logic. · 8 min
Lesson 03
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="6" width="72" height="38" rx="19" fill="%23705578" stroke="%23d5d8e3" stroke-width="2"><animate attributeName="fill" from="%23dfe2ec" to="%23705578" dur="0.2s" fill="freeze"/></rect><text x="44" y="32" text-anchor="middle" font-family="Arial,sans-serif" font-size="16" font-weight="700" fill="%23ffffff">ON<animate attributeName="fill" from="%23536074" to="%23ffffff" dur="0.2s" fill="freeze"/></text></svg>)
Switch 3: ON/OFF text pill
A compact pill with no knob: the background and label respond to vSwitch. · 10 min
Lesson 04
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="4" width="74" height="42" rx="21" fill="%23ffffff" stroke="%2334363a" stroke-width="3"/><circle cx="60" cy="25" r="16" fill="%23ffffff" stroke="%235a5c60" stroke-width="2.5"><animate attributeName="cx" from="29" to="60" dur="0.2s" fill="freeze"/></circle></svg>)
Switch 4: Outlined circular switch
A white outlined track with a circular knob that slides. · 8 min
Lesson 06
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="5" width="72" height="40" rx="20" fill="%234052c5" stroke="%23d7dae1" stroke-width="2"><animate attributeName="fill" from="%23e7eaf2" to="%234052c5" dur="0.2s" fill="freeze"/></rect><circle cx="59" cy="25" r="18" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2.5"><animate attributeName="cx" from="29" to="59" dur="0.2s" fill="freeze"/></circle><circle cx="59" cy="25" r="7" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2"><animate attributeName="cx" from="29" to="59" dur="0.2s" fill="freeze"/></circle><circle cx="59" cy="25" r="2.5" fill="%23aeb2ba" stroke="%23aeb2ba" stroke-width="2"><animate attributeName="cx" from="29" to="59" dur="0.2s" fill="freeze"/></circle></svg>)
Switch 6: Concentric detail switch
Three concentric circles slide together as one detailed knob. · 8 min
Lesson 07
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="4" width="72" height="42" rx="21" fill="%234052c5" stroke="%23d7dae1" stroke-width="2"><animate attributeName="fill" from="%23e7eaf2" to="%234052c5" dur="0.2s" fill="freeze"/></rect><circle cx="59" cy="25" r="17" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2.5"><animate attributeName="cx" from="26" to="59" dur="0.2s" fill="freeze"/></circle></svg>)
Switch 7: Blue active-state switch
A circular knob on a rounded track that turns blue when ON. · 8 min
Lesson 08
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="4" width="72" height="42" rx="11" fill="%234052c5" stroke="%23d7dae1" stroke-width="2"><animate attributeName="fill" from="%23e7eaf2" to="%234052c5" dur="0.2s" fill="freeze"/></rect><rect x="38" y="4" width="38" height="42" rx="8" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2.5"><animate attributeName="x" from="13" to="38" dur="0.2s" fill="freeze"/></rect></svg>)
Switch 8: Square-corner track switch
A rectangular track with a softened square knob. · 8 min
Lesson 09
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="5" width="72" height="40" rx="20" fill="%234052c5" stroke="%23d7dae1" stroke-width="2"><animate attributeName="fill" from="%23e7eaf2" to="%234052c5" dur="0.2s" fill="freeze"/></rect><circle cx="59" cy="25" r="17" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2.5"><animate attributeName="cx" from="26" to="59" dur="0.2s" fill="freeze"/></circle></svg>)
Switch 9: Simple circular switch
A rounded track with a single circular knob. · 8 min
Lesson 10
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 50" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><rect x="8" y="5" width="74" height="40" rx="20" fill="%234052c5" stroke="%23d7dae1" stroke-width="2"><animate attributeName="fill" from="%23e7eaf2" to="%234052c5" dur="0.2s" fill="freeze"/></rect><circle cx="59" cy="25" r="17" fill="%23ffffff" stroke="%23c5c7cb" stroke-width="2.5"><animate attributeName="cx" from="26" to="59" dur="0.2s" fill="freeze"/></circle></svg>)
Switch 10: Wider-track circular switch
Switch 9 with a slightly wider track. · 8 min