Switch by andrew-demchenk0

Made by

@andrew-demchenk0

Theme:

Light

#switch

#e8e8e8

130 views

CSSAdd prefixes

1.switch {
2  font-size: 17px;
3  position: relative;
4  display: inline-block;
5  width: 70px;
6  height: 34.5px;
7  overflow: hidden;
8}
9
10.switch input {
11  opacity: 0;
12  width: 0;
13  height: 0;
14}
15
16.slider {
17  position: absolute;
18  cursor: pointer;
19  top: 0;
20  left: 0;
21  right: 0;
22  bottom: 0;
23  background-color: #ccc;
24  transition: .4s;
25  border-radius: 30px;
26}
27
28.commutator {
29  cursor: pointer;
30  position: absolute;
31  top: -29%;
32  left: -14%;
33  transition: .4s;
34}
35
36.iron-man {
37  position: absolute;
38  top: -27%;
39  left: -100%;
40  transform: rotate(90deg);
41}
42
43.input:checked + .slider {
44  background-color: #2196F3;
45}
46
47.input:checked + .slider .commutator {
48  transform: translateX(34.5px);
49  opacity: 0;
50}
51
52.input:checked + .slider .iron-man {
53  animation: show_5911 1.3s ease-in-out forwards;
54}
55
56@keyframes show_5911 {
57  0% {
58    transform: translateX(0px) rotate(90deg);
59  }
60
61  50% {
62    transform: translateX(75px) rotate(90deg);
63  }
64
65  100% {
66    transform: translateX(79px) rotate(0deg);
67  }
68}

.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 70px;
  height: 34.5px;
  overflow: hidden;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}

.commutator {
  cursor: pointer;
  position: absolute;
  top: -29%;
  left: -14%;
  transition: .4s;
}

.iron-man {
  position: absolute;
  top: -27%;
  left: -100%;
  transform: rotate(90deg);
}

.input:checked + .slider {
  background-color: #2196F3;
}

.input:checked + .slider .commutator {
  transform: translateX(34.5px);
  opacity: 0;
}

.input:checked + .slider .iron-man {
  animation: show_5911 1.3s ease-in-out forwards;
}

@keyframes show_5911 {
  0% {
    transform: translateX(0px) rotate(90deg);
  }

  50% {
    transform: translateX(75px) rotate(90deg);
  }

  100% {
    transform: translateX(79px) rotate(0deg);
  }
}

HTML

1<label class="switch">
2  <input class="input" type="checkbox">
3  <span class="slider">
4    <span class="iron-man"><svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 48 48" height="50"><path fill="#d03827" d="m19.479 46.479c-.595.059-1.166-.238-1.441-.77-.415-.803-1.062-1.334-1.595-2.023-1.281-1.657-2.266-3.435-3.411-5.189-.196-.3-.395-.608-.481-.955-.089-.359-.053-.736-.02-1.104.058-.64-.058-1.274-.217-1.897-.384-1.51-2.376-2.642-3.273-3.916-1.248-1.774-1.382-4.075-1.473-6.242-.07-1.661.002-3.513-.032-5.223-.008-.422.162-.816.472-1.103.859-.794 1.844-2.056 2.009-3.191.332-2.29.469-4.653 1.376-6.782 1.679-3.937 5.84-6.913 10.083-7.475 5.19-.687 10.929 1.721 14.485 5.564.586.633 1.124 1.315 1.544 2.069.75 1.344 1.104 2.871 1.337 4.392.201 1.309.03 2.697.055 4.029.009.458.371.863.743 1.131.483.348.784.975.878 1.581.125.809-.061 1.629-.201 2.436-.25 1.443-.352 2.912-.303 4.377.05 1.499.199 3.184-.791 4.312-.511.582-1.458.982-1.927 1.599-1.072 1.409-.446 3.435-.987 5.121-.22.687-.665 1.276-1.102 1.85-1.579 2.075-2.924 4.202-4.503 6.277-.359.472-.878 1.082-1.471 1.066-3.125-.156-6.582-.247-9.754.066z"></path><path fill="#010101" d="m19.328 46.987c-.731 0-1.398-.396-1.734-1.048-.239-.464-.577-.837-.934-1.232-.209-.23-.418-.463-.612-.715-.888-1.147-1.645-2.367-2.377-3.547-.346-.558-.693-1.117-1.058-1.675-.206-.316-.439-.675-.548-1.107-.107-.436-.068-.869-.034-1.252.057-.622-.07-1.23-.201-1.747-.201-.789-.998-1.528-1.77-2.243-.519-.48-1.054-.978-1.428-1.508-1.373-1.95-1.479-4.478-1.564-6.509-.04-.965-.033-2.004-.026-3.009.005-.751.01-1.501-.005-2.226-.012-.558.219-1.098.632-1.479.765-.706 1.708-1.888 1.854-2.896.067-.463.127-.929.186-1.396.234-1.844.476-3.75 1.226-5.51 1.727-4.05 5.938-7.174 10.478-7.775 5.132-.677 11.124 1.619 14.918 5.72.688.743 1.216 1.451 1.613 2.165.851 1.523 1.192 3.237 1.396 4.56.138.902.109 1.829.081 2.726-.015.46-.029.918-.021 1.369.004.218.21.5.536.736.552.398.956 1.112 1.079 1.91.123.789-.015 1.556-.148 2.297l-.054.3c-.243 1.408-.343 2.847-.295 4.275l.013.345c.055 1.463.118 3.122-.928 4.313-.28.319-.648.574-1.004.821-.36.25-.7.486-.9.75-.541.71-.575 1.665-.612 2.676-.027.759-.057 1.544-.297 2.295-.25.776-.744 1.427-1.18 2-.785 1.031-1.526 2.097-2.244 3.127-.72 1.035-1.465 2.106-2.259 3.15-.477.626-1.066 1.263-1.842 1.263-.014 0-.028 0-.042 0-2.81-.14-6.438-.256-9.694.066-.068.006-.134.01-.201.01zm.151-.508h.01zm3.775-45.485c-.579 0-1.15.037-1.711.111-4.137.547-8.12 3.498-9.688 7.176-.695 1.631-.928 3.468-1.153 5.243-.06.473-.12.944-.188 1.413-.185 1.267-1.239 2.632-2.166 3.487-.206.19-.316.448-.311.725.014.734.01 1.493.005 2.252-.007.993-.014 2.021.026 2.962.079 1.899.179 4.264 1.383 5.974.313.445.787.885 1.29 1.351.877.813 1.784 1.655 2.058 2.73.152.598.298 1.311.23 2.064-.032.353-.061.668.007.939.067.269.244.54.415.803.368.563.72 1.129 1.069 1.693.752 1.211 1.463 2.355 2.318 3.463.179.231.372.444.563.656.384.425.781.864 1.08 1.443.178.344.547.552.948.501 3.302-.325 6.824-.218 9.831-.069h.01c.378 0 .874-.653 1.038-.869.781-1.027 1.521-2.089 2.235-3.116.723-1.039 1.471-2.113 2.269-3.161.406-.534.826-1.087 1.023-1.7.198-.619.224-1.303.25-2.026.041-1.122.083-2.282.815-3.244.296-.39.718-.683 1.126-.966.32-.223.623-.433.822-.66.783-.892.73-2.276.68-3.616l-.013-.349c-.05-1.497.055-3.004.311-4.479l.054-.308c.125-.689.242-1.342.145-1.966-.082-.531-.341-1.011-.676-1.253-.35-.253-.937-.786-.951-1.527-.009-.469.006-.943.021-1.42.027-.851.055-1.731-.069-2.543-.19-1.239-.508-2.84-1.28-4.224-.358-.644-.841-1.289-1.475-1.973-3.166-3.421-7.946-5.517-12.341-5.517z"></path><path fill="#febf10" d="m38.104 25.557c-1.123-4.605-1.65-9.529-1.541-14.268-1.207-1.917-2.861-3.551-4.866-4.604-.818-.43-1.954-.717-2.562-.021-.271.31-.351.738-.425 1.143-.326 1.761-.748 3.504-1.265 5.219-.234.776-.545 1.618-1.256 2.006-.435.237-.95.261-1.445.28-.754.029-1.509.057-2.263.086-.168.006-.348.009-.488-.084-.156-.104-.219-.299-.272-.479-.802-2.73-1.692-5.435-2.667-8.108-.086-.237-.215-.509-.464-.549-.148-.024-.294.046-.427.115-2.115 1.1-4.093 2.729-5.751 4.442.34 4.626-.564 9.83-2.475 14.057.237.218.46.466.687.707 3.687 5.347 5.26 11.33 7.888 17.277.163.369.428.763.828.711 3.361-.115 6.812-.309 10.173-.424 2.076-4.558 4.648-9.484 6.647-14.077l-.004-.001c.771-1.072 1.426-2.227 1.948-3.428z"></path><path fill="#16b7b8" d="m13.826 23.27c-.366 1.118-.367 2.353-.002 3.471 1.598.602 3.318.88 5.024.813.38-.015.775-.051 1.105-.241.465-.267.825-1.07.994-1.578"></path><path fill="#16b7b8" d="m27.207 25.601c.225.589.613.676.968 1.198.078.114.161.229.278.303.104.066.227.095.347.12 1.607.34 3.291.314 4.887-.075.245-.06.51-.143.648-.355.083-.128.107-.285.127-.437.171-1.292-.037-2.164-.038-3.467"></path><path fill="#010101" d="m38.589 25.438c-1.106-4.538-1.634-9.428-1.526-14.138.002-.099-.024-.195-.077-.278-1.308-2.077-3.057-3.729-5.057-4.779-1.323-.695-2.511-.662-3.171.093-.361.414-.461.95-.54 1.381-.32 1.732-.741 3.471-1.252 5.166-.201.669-.463 1.409-1.017 1.71-.343.187-.812.204-1.304.223l-2.183.083c-.051.002-.17.006-.182.01-.028-.033-.067-.165-.082-.214-.801-2.728-1.701-5.466-2.677-8.137-.069-.193-.282-.781-.852-.873-.324-.054-.594.089-.738.165-1.961 1.02-3.994 2.588-5.88 4.537-.099.103-.149.242-.14.385.334 4.544-.575 9.708-2.432 13.813-.086.196-.039.428.121.574.219.201.425.433.635.656 2.488 3.617 3.983 7.485 5.561 11.578.705 1.827 1.434 3.717 2.259 5.584.377.856.89 1.016 1.192 1.016.041 0 .077-.003.109-.007 1.684-.058 3.389-.135 5.095-.213 1.7-.077 3.4-.154 5.078-.211.19-.007.359-.12.438-.293.9-1.977 1.915-4.065 2.896-6.085 1.281-2.637 2.604-5.363 3.734-7.955.763-1.069 1.427-2.234 1.964-3.472.044-.102.054-.213.028-.319zm-20.194-18.702c.022-.012.084-.044.079-.069.02.025.058.088.109.232.969 2.652 1.862 5.37 2.657 8.076.06.203.159.544.476.755.277.185.592.171.784.168l2.262-.086c.498-.019 1.117-.042 1.666-.341.845-.46 1.218-1.378 1.495-2.301.521-1.73.951-3.504 1.277-5.272.064-.343.13-.697.312-.904.392-.452 1.296-.209 1.952.134 1.531.804 2.889 2.013 4.006 3.497-.748.863-1.13 1.896-1.198 3.33-.034.689-.099 1.419-.165 2.166-.188 2.116-.382 4.306.029 6.246.031.147.056.299.032.396-.039.104-.306.257-.831.469-6.237 2.525-13.53 2.362-19.149-.398 1.635-4.348.39-8.57-.941-12.214 1.674-1.653 3.441-2.996 5.148-3.884zm15.585 17.484c.05.7.09 1.3-.02 2.07 0 .06-.02.19-.04.23-.02.03-.1.08-.35.14-1.52.37-3.14.4-4.67.07-.05-.01-.15-.03-.18-.05-.04-.02-.1-.12-.13-.16-.18-.27-.37-.44-.52-.58-.084-.075-.15-.139-.211-.207 2.008-.295 3.995-.822 5.891-1.589.067-.027.145-.062.219-.094.004.055.008.116.011.17zm-19.802-.295c1.934.894 4.041 1.501 6.23 1.819-.205.55-.482 1.008-.704 1.135-.241.139-.578.163-.875.175-1.544.068-3.133-.18-4.598-.697-.217-.791-.227-1.63-.053-2.432zm2.551 13.108c-.654-1.697-1.297-3.354-1.999-4.976.132.177.254.359.401.526.34.39.724.749 1.094 1.097.822.772 1.599 1.501 1.855 2.469l.049.188c.171.662.396 1.511.954 2.056 0 .013-.006.025-.006.038.048.963-.065 1.921-.337 2.848l-.038.128c-.03.099-.06.206-.089.313-.668-1.569-1.29-3.149-1.884-4.687zm7.676 5.74c-1.609.074-3.222.145-4.853.204-.003-.05-.006-.1-.024-.148-.116-.306.005-.708.132-1.135l.039-.133c.258-.877.379-1.779.38-2.689 1.283.275 2.588.388 3.872.388 1.422 0 2.809-.128 4.11-.288.002.044.002.087.016.131.361 1.139.661 2.308.91 3.478-1.516.055-3.048.123-4.582.192zm7.56-6.027c-.747 1.539-1.502 3.108-2.225 4.649-.21-.873-.44-1.743-.71-2.596l-.046-.103c-.008-.013-.02-.021-.029-.033.031-.049.073-.09.086-.149.135-.608.352-1.072.582-1.563.173-.37.353-.752.515-1.225.131-.38.267-.746.486-1.032.266-.348.669-.598 1.098-.863l.171-.106c.858-.538 1.666-1.181 2.426-1.896-.765 1.638-1.565 3.293-2.354 4.917zm-.603-3.868-.167.104c-.485.301-.988.612-1.364 1.105-.311.404-.485.871-.638 1.314-.146.422-.313.779-.475 1.126-.203.432-.411.876-.566 1.427-2.56.324-5.5.535-8.176-.115-.478-.201-.71-1.098-.879-1.753l-.051-.193c-.33-1.244-1.249-2.107-2.138-2.941-.369-.347-.718-.674-1.026-1.026-.488-.559-.879-1.19-1.292-1.86-.126-.205-.253-.41-.382-.613-.901-1.41-1.971-2.962-3.188-4.264-.013-.019-.024-.038-.037-.057-.039-.055-.087-.1-.141-.134-.103-.106-.199-.225-.305-.327 1.537-3.535 2.401-7.778 2.435-11.769.982 3.109 1.563 6.542.119 9.977-.091.216-.012.457.172.591-.292 1.122-.276 2.323.084 3.426.047.145.157.259.3.313 1.492.563 3.112.855 4.714.855.169 0 .338-.004.507-.01.446-.019.917-.068 1.333-.308.673-.386 1.077-1.426 1.22-1.854.002-.006 0-.012.002-.017.867.09 1.743.139 2.624.139.909 0 1.822-.053 2.733-.148.169.391.405.618.609.804.13.12.26.24.37.41.1.15.23.32.43.45.17.1.35.15.51.18.78.17 1.58.25 2.38.25.92 0 1.84-.11 2.72-.33.23-.05.69-.17.95-.57.15-.23.19-.48.21-.64.11-.87.07-1.55.02-2.27-.015-.238-.029-.499-.038-.761.087-.113.16-.237.196-.383.073-.296.032-.58-.023-.845-.381-1.795-.193-3.908-.012-5.952.067-.761.134-1.504.167-2.205.053-1.076.31-1.864.79-2.514-.088 4.675.436 9.513 1.519 14.02-1.383 3.108-3.586 5.72-6.216 7.368z"></path></svg></span>
5    <span class="commutator"><svg fill="#303c42" height="55" stroke="#303c42" stroke-width="1.444" viewBox="0 0 76 76" width="55" xmlns="http://www.w3.org/2000/svg"><g fill="#2196F3" stroke-linejoin="round"><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z" stroke="#ccc" stroke-linecap="round" stroke-width="2.432"></path><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z"></path></g></svg></span>
6  </span>
7</label>

<label class="switch">
  <input class="input" type="checkbox">
  <span class="slider">
    <span class="iron-man"><svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 48 48" height="50"><path fill="#d03827" d="m19.479 46.479c-.595.059-1.166-.238-1.441-.77-.415-.803-1.062-1.334-1.595-2.023-1.281-1.657-2.266-3.435-3.411-5.189-.196-.3-.395-.608-.481-.955-.089-.359-.053-.736-.02-1.104.058-.64-.058-1.274-.217-1.897-.384-1.51-2.376-2.642-3.273-3.916-1.248-1.774-1.382-4.075-1.473-6.242-.07-1.661.002-3.513-.032-5.223-.008-.422.162-.816.472-1.103.859-.794 1.844-2.056 2.009-3.191.332-2.29.469-4.653 1.376-6.782 1.679-3.937 5.84-6.913 10.083-7.475 5.19-.687 10.929 1.721 14.485 5.564.586.633 1.124 1.315 1.544 2.069.75 1.344 1.104 2.871 1.337 4.392.201 1.309.03 2.697.055 4.029.009.458.371.863.743 1.131.483.348.784.975.878 1.581.125.809-.061 1.629-.201 2.436-.25 1.443-.352 2.912-.303 4.377.05 1.499.199 3.184-.791 4.312-.511.582-1.458.982-1.927 1.599-1.072 1.409-.446 3.435-.987 5.121-.22.687-.665 1.276-1.102 1.85-1.579 2.075-2.924 4.202-4.503 6.277-.359.472-.878 1.082-1.471 1.066-3.125-.156-6.582-.247-9.754.066z"></path><path fill="#010101" d="m19.328 46.987c-.731 0-1.398-.396-1.734-1.048-.239-.464-.577-.837-.934-1.232-.209-.23-.418-.463-.612-.715-.888-1.147-1.645-2.367-2.377-3.547-.346-.558-.693-1.117-1.058-1.675-.206-.316-.439-.675-.548-1.107-.107-.436-.068-.869-.034-1.252.057-.622-.07-1.23-.201-1.747-.201-.789-.998-1.528-1.77-2.243-.519-.48-1.054-.978-1.428-1.508-1.373-1.95-1.479-4.478-1.564-6.509-.04-.965-.033-2.004-.026-3.009.005-.751.01-1.501-.005-2.226-.012-.558.219-1.098.632-1.479.765-.706 1.708-1.888 1.854-2.896.067-.463.127-.929.186-1.396.234-1.844.476-3.75 1.226-5.51 1.727-4.05 5.938-7.174 10.478-7.775 5.132-.677 11.124 1.619 14.918 5.72.688.743 1.216 1.451 1.613 2.165.851 1.523 1.192 3.237 1.396 4.56.138.902.109 1.829.081 2.726-.015.46-.029.918-.021 1.369.004.218.21.5.536.736.552.398.956 1.112 1.079 1.91.123.789-.015 1.556-.148 2.297l-.054.3c-.243 1.408-.343 2.847-.295 4.275l.013.345c.055 1.463.118 3.122-.928 4.313-.28.319-.648.574-1.004.821-.36.25-.7.486-.9.75-.541.71-.575 1.665-.612 2.676-.027.759-.057 1.544-.297 2.295-.25.776-.744 1.427-1.18 2-.785 1.031-1.526 2.097-2.244 3.127-.72 1.035-1.465 2.106-2.259 3.15-.477.626-1.066 1.263-1.842 1.263-.014 0-.028 0-.042 0-2.81-.14-6.438-.256-9.694.066-.068.006-.134.01-.201.01zm.151-.508h.01zm3.775-45.485c-.579 0-1.15.037-1.711.111-4.137.547-8.12 3.498-9.688 7.176-.695 1.631-.928 3.468-1.153 5.243-.06.473-.12.944-.188 1.413-.185 1.267-1.239 2.632-2.166 3.487-.206.19-.316.448-.311.725.014.734.01 1.493.005 2.252-.007.993-.014 2.021.026 2.962.079 1.899.179 4.264 1.383 5.974.313.445.787.885 1.29 1.351.877.813 1.784 1.655 2.058 2.73.152.598.298 1.311.23 2.064-.032.353-.061.668.007.939.067.269.244.54.415.803.368.563.72 1.129 1.069 1.693.752 1.211 1.463 2.355 2.318 3.463.179.231.372.444.563.656.384.425.781.864 1.08 1.443.178.344.547.552.948.501 3.302-.325 6.824-.218 9.831-.069h.01c.378 0 .874-.653 1.038-.869.781-1.027 1.521-2.089 2.235-3.116.723-1.039 1.471-2.113 2.269-3.161.406-.534.826-1.087 1.023-1.7.198-.619.224-1.303.25-2.026.041-1.122.083-2.282.815-3.244.296-.39.718-.683 1.126-.966.32-.223.623-.433.822-.66.783-.892.73-2.276.68-3.616l-.013-.349c-.05-1.497.055-3.004.311-4.479l.054-.308c.125-.689.242-1.342.145-1.966-.082-.531-.341-1.011-.676-1.253-.35-.253-.937-.786-.951-1.527-.009-.469.006-.943.021-1.42.027-.851.055-1.731-.069-2.543-.19-1.239-.508-2.84-1.28-4.224-.358-.644-.841-1.289-1.475-1.973-3.166-3.421-7.946-5.517-12.341-5.517z"></path><path fill="#febf10" d="m38.104 25.557c-1.123-4.605-1.65-9.529-1.541-14.268-1.207-1.917-2.861-3.551-4.866-4.604-.818-.43-1.954-.717-2.562-.021-.271.31-.351.738-.425 1.143-.326 1.761-.748 3.504-1.265 5.219-.234.776-.545 1.618-1.256 2.006-.435.237-.95.261-1.445.28-.754.029-1.509.057-2.263.086-.168.006-.348.009-.488-.084-.156-.104-.219-.299-.272-.479-.802-2.73-1.692-5.435-2.667-8.108-.086-.237-.215-.509-.464-.549-.148-.024-.294.046-.427.115-2.115 1.1-4.093 2.729-5.751 4.442.34 4.626-.564 9.83-2.475 14.057.237.218.46.466.687.707 3.687 5.347 5.26 11.33 7.888 17.277.163.369.428.763.828.711 3.361-.115 6.812-.309 10.173-.424 2.076-4.558 4.648-9.484 6.647-14.077l-.004-.001c.771-1.072 1.426-2.227 1.948-3.428z"></path><path fill="#16b7b8" d="m13.826 23.27c-.366 1.118-.367 2.353-.002 3.471 1.598.602 3.318.88 5.024.813.38-.015.775-.051 1.105-.241.465-.267.825-1.07.994-1.578"></path><path fill="#16b7b8" d="m27.207 25.601c.225.589.613.676.968 1.198.078.114.161.229.278.303.104.066.227.095.347.12 1.607.34 3.291.314 4.887-.075.245-.06.51-.143.648-.355.083-.128.107-.285.127-.437.171-1.292-.037-2.164-.038-3.467"></path><path fill="#010101" d="m38.589 25.438c-1.106-4.538-1.634-9.428-1.526-14.138.002-.099-.024-.195-.077-.278-1.308-2.077-3.057-3.729-5.057-4.779-1.323-.695-2.511-.662-3.171.093-.361.414-.461.95-.54 1.381-.32 1.732-.741 3.471-1.252 5.166-.201.669-.463 1.409-1.017 1.71-.343.187-.812.204-1.304.223l-2.183.083c-.051.002-.17.006-.182.01-.028-.033-.067-.165-.082-.214-.801-2.728-1.701-5.466-2.677-8.137-.069-.193-.282-.781-.852-.873-.324-.054-.594.089-.738.165-1.961 1.02-3.994 2.588-5.88 4.537-.099.103-.149.242-.14.385.334 4.544-.575 9.708-2.432 13.813-.086.196-.039.428.121.574.219.201.425.433.635.656 2.488 3.617 3.983 7.485 5.561 11.578.705 1.827 1.434 3.717 2.259 5.584.377.856.89 1.016 1.192 1.016.041 0 .077-.003.109-.007 1.684-.058 3.389-.135 5.095-.213 1.7-.077 3.4-.154 5.078-.211.19-.007.359-.12.438-.293.9-1.977 1.915-4.065 2.896-6.085 1.281-2.637 2.604-5.363 3.734-7.955.763-1.069 1.427-2.234 1.964-3.472.044-.102.054-.213.028-.319zm-20.194-18.702c.022-.012.084-.044.079-.069.02.025.058.088.109.232.969 2.652 1.862 5.37 2.657 8.076.06.203.159.544.476.755.277.185.592.171.784.168l2.262-.086c.498-.019 1.117-.042 1.666-.341.845-.46 1.218-1.378 1.495-2.301.521-1.73.951-3.504 1.277-5.272.064-.343.13-.697.312-.904.392-.452 1.296-.209 1.952.134 1.531.804 2.889 2.013 4.006 3.497-.748.863-1.13 1.896-1.198 3.33-.034.689-.099 1.419-.165 2.166-.188 2.116-.382 4.306.029 6.246.031.147.056.299.032.396-.039.104-.306.257-.831.469-6.237 2.525-13.53 2.362-19.149-.398 1.635-4.348.39-8.57-.941-12.214 1.674-1.653 3.441-2.996 5.148-3.884zm15.585 17.484c.05.7.09 1.3-.02 2.07 0 .06-.02.19-.04.23-.02.03-.1.08-.35.14-1.52.37-3.14.4-4.67.07-.05-.01-.15-.03-.18-.05-.04-.02-.1-.12-.13-.16-.18-.27-.37-.44-.52-.58-.084-.075-.15-.139-.211-.207 2.008-.295 3.995-.822 5.891-1.589.067-.027.145-.062.219-.094.004.055.008.116.011.17zm-19.802-.295c1.934.894 4.041 1.501 6.23 1.819-.205.55-.482 1.008-.704 1.135-.241.139-.578.163-.875.175-1.544.068-3.133-.18-4.598-.697-.217-.791-.227-1.63-.053-2.432zm2.551 13.108c-.654-1.697-1.297-3.354-1.999-4.976.132.177.254.359.401.526.34.39.724.749 1.094 1.097.822.772 1.599 1.501 1.855 2.469l.049.188c.171.662.396 1.511.954 2.056 0 .013-.006.025-.006.038.048.963-.065 1.921-.337 2.848l-.038.128c-.03.099-.06.206-.089.313-.668-1.569-1.29-3.149-1.884-4.687zm7.676 5.74c-1.609.074-3.222.145-4.853.204-.003-.05-.006-.1-.024-.148-.116-.306.005-.708.132-1.135l.039-.133c.258-.877.379-1.779.38-2.689 1.283.275 2.588.388 3.872.388 1.422 0 2.809-.128 4.11-.288.002.044.002.087.016.131.361 1.139.661 2.308.91 3.478-1.516.055-3.048.123-4.582.192zm7.56-6.027c-.747 1.539-1.502 3.108-2.225 4.649-.21-.873-.44-1.743-.71-2.596l-.046-.103c-.008-.013-.02-.021-.029-.033.031-.049.073-.09.086-.149.135-.608.352-1.072.582-1.563.173-.37.353-.752.515-1.225.131-.38.267-.746.486-1.032.266-.348.669-.598 1.098-.863l.171-.106c.858-.538 1.666-1.181 2.426-1.896-.765 1.638-1.565 3.293-2.354 4.917zm-.603-3.868-.167.104c-.485.301-.988.612-1.364 1.105-.311.404-.485.871-.638 1.314-.146.422-.313.779-.475 1.126-.203.432-.411.876-.566 1.427-2.56.324-5.5.535-8.176-.115-.478-.201-.71-1.098-.879-1.753l-.051-.193c-.33-1.244-1.249-2.107-2.138-2.941-.369-.347-.718-.674-1.026-1.026-.488-.559-.879-1.19-1.292-1.86-.126-.205-.253-.41-.382-.613-.901-1.41-1.971-2.962-3.188-4.264-.013-.019-.024-.038-.037-.057-.039-.055-.087-.1-.141-.134-.103-.106-.199-.225-.305-.327 1.537-3.535 2.401-7.778 2.435-11.769.982 3.109 1.563 6.542.119 9.977-.091.216-.012.457.172.591-.292 1.122-.276 2.323.084 3.426.047.145.157.259.3.313 1.492.563 3.112.855 4.714.855.169 0 .338-.004.507-.01.446-.019.917-.068 1.333-.308.673-.386 1.077-1.426 1.22-1.854.002-.006 0-.012.002-.017.867.09 1.743.139 2.624.139.909 0 1.822-.053 2.733-.148.169.391.405.618.609.804.13.12.26.24.37.41.1.15.23.32.43.45.17.1.35.15.51.18.78.17 1.58.25 2.38.25.92 0 1.84-.11 2.72-.33.23-.05.69-.17.95-.57.15-.23.19-.48.21-.64.11-.87.07-1.55.02-2.27-.015-.238-.029-.499-.038-.761.087-.113.16-.237.196-.383.073-.296.032-.58-.023-.845-.381-1.795-.193-3.908-.012-5.952.067-.761.134-1.504.167-2.205.053-1.076.31-1.864.79-2.514-.088 4.675.436 9.513 1.519 14.02-1.383 3.108-3.586 5.72-6.216 7.368z"></path></svg></span>
    <span class="commutator"><svg fill="#303c42" height="55" stroke="#303c42" stroke-width="1.444" viewBox="0 0 76 76" width="55" xmlns="http://www.w3.org/2000/svg"><g fill="#2196F3" stroke-linejoin="round"><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z" stroke="#ccc" stroke-linecap="round" stroke-width="2.432"></path><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z"></path></g></svg></span>
  </span>
</label>