SVG Option Toggle Button With 3 Options

SVG Option Toggle Button With 3 Options: BY Donald12 Jan,2021; Tags:
SVG SVG Button

Introduction

This is a special switch button, unlike many CSS3 switch buttons shared before, this one is based on SVG and HTML5, its biggest feature is that it can provide 3 options to switch animation, can provide "yes", "may be" and "no" 3 options to choose, and different state options will also correspond to different small icons.

Instructions

HTML Body Code

<div id="buttons">
  <input type="radio" name="yesMaybeNo" id="rYes" checked />
  <label for="rYes">Yes</label>

  <input type="radio" name="yesMaybeNo" id="rMaybe" />
  <label for="rMaybe">Maybe</label>

  <input type="radio" name="yesMaybeNo" id="rNo" />
  <label for="rNo">No</label>
</div>

Css Code

body{background: #1e2730;color:linen; font-family: verdana}
svg {
  width: 10em;
  /*border: 1px solid #d9d9d9;*/
}
path{fill:linen;}
#wrapper{
	width: 10em;
  margin: 30px auto;
}
#buttons{text-align:center; margin:1em;}

#base{fill:linen}
#_bgCircle{fill:#1e2730;}

Js Code

{
    key: "updateProp",
    value: function updateProp(vi, i) {
      var dist = this.target[vi][i] - this.vals[vi][i];
      var acc = dist * spring;
      this.vel[vi][i] += acc;
      this.vel[vi][i] *= friction;
      this.vals[vi][i] += this.vel[vi][i];
    }
  }, {
    key: "sayNO",
    value: function sayNO() {
      this.target = this.getArgsRy(this.no);
      //console.log("sayNO");
    }
  }, {
    key: "sayMAYBE",
    value: function sayMAYBE() {
      this.target = this.getArgsRy(this.maybe);
      //console.log("sayMAYBE");
    }
  }, {
    key: "sayYES",
    value: function sayYES() {
      this.target = this.getArgsRy(this.yes);
      //console.log("sayYES");
    }
  }

VIEW NOW