harunpehlivan/index.html

## index.html
<div id="app"></div>

## reactive-synth.markdown

      
    Raw
  

              reactive-synth.markdown
            
          
    Reactive Synth

A Pen by HARUN PEHLİVAN on CodePen.
License.

  
## script.babel
class Synth extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      presets: {
        piano: true,
        guitar: false,
        drums: false
      },

      keys: {
        q: "",
        2: "",
        w: "",
        3: "",
        e: "",
        r: "",
        4: "",
        t: "",
        5: "",
        y: "",
        u: "",
        i: "",
        6: ""
      }
    };

    this.handlePreset = this.handlePreset.bind(this);
  }

  handleKey = (e) => {
    let data = {
      event: e.type,
      target: "",
      key: ""
    };

    if (data.event == "keypress") {
      const keys = document.querySelectorAll(".key");
      keys.forEach((key) => {
        if (key.getAttribute("data-key") == e.key.toLowerCase())
          data.target = key;
      });
      data.key = e.key;
    } else {
      data.target = e.currentTarget;
      data.key = data.target.getAttribute("data-key");
    }

    this.playSound(data);
    this.animate(data);
  };

  playSound = ({ key }) => {
    Object.entries(this.state.keys).forEach((entry) => {
      if (entry[0] == key.toLowerCase()) {
        const audio = new Audio(entry[1]);
        audio.play();
      }
    });
  };

  animate = ({ target }) => {
    const tl = gsap.timeline();
    try {
      tl.to(target, {
        duration: 0.18,
        ease: "power3.out",
        scale: 0.95,
        transformOrigin: "top"
      });

      tl.to(target, {
        duration: 0.18,
        ease: "power3.out",
        scale: 1,
        transformOrigin: "top"
      });

      const tl2 = gsap.timeline();

      tl2.to(".speakers circle", {
        duration: 0.18,
        ease: "back.out",
        scale: 1.15,
        transformOrigin: "center"
      });

      tl2.to(".speakers circle", {
        duration: 0.3,
        ease: "back.out",
        scale: 1,
        transformOrigin: "center"
      });
    } catch {}
  };

  handlePreset = (e) => {
    if (e) {
      const data = {
        target: e.currentTarget,
        presets: e.currentTarget.parentElement.querySelectorAll(".preset"),
        paths: e.currentTarget.querySelectorAll("path"),
        preset: e.currentTarget.getAttribute("data-preset")
      };

      Object.entries(this.state.presets).forEach((entry) => {
        if (entry[0] == data.preset) {
          data.paths.forEach((path) => {
            gsap.set(path, { fill: "#FF79E6", stroke: "white" });
            try {
              gsap.set(".top", { fill: "white" });
            } catch {}
          });
        } else {
          data.presets.forEach((preset) => {
            if (preset.getAttribute("data-preset") == entry[0]) {
              preset.querySelectorAll("path").forEach((path) => {
                gsap.set(path, {
                  fill: "white",
                  stroke: "#FF79E6"
                });
              });
            }
          });
        }

        data.presets.forEach((preset) => {
          gsap.set(data.path, { fill: "white" });
        });
      });

      if (data.preset == "piano") this.togglePiano();
      else if (data.preset == "guitar") this.toggleGuitar();
      else if (data.preset == "drums") this.toggleDrums();
    } else this.togglePiano();
  };

  togglePiano() {
    this.state.keys.q =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-c5_o2bhnd.mp3";
    this.state.keys["2"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-c5b_fbzkbo.mp3";
    this.state.keys.w =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-d5_x0abk8.mp3";
    this.state.keys["3"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-d5b_ujpmzw.mp3";
    this.state.keys.e =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-e5_bjtggs.mp3";
    this.state.keys.r =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-f5_tw1ja7.mp3";
    this.state.keys["4"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786369/piano-f5b_puwbxi.mp3";
    this.state.keys.t =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786852/piano-g5_q3p279.mp3";
    this.state.keys["5"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787011/piano-g5b_nbwep2.mp3";
    this.state.keys.y =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787005/piano-a5_hvhua7.mp3";
    this.state.keys["6"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786996/piano-a5b_ttgoqb.mp3";
    this.state.keys.u =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787191/piano-b5_usxyjg.mp3";
    this.state.keys.i =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787185/piano-c6_ptqlx7.mp3";
  }

  toggleGuitar() {
    this.state.keys.q =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787398/guitar-c5_mwsvv3.mp3";
    this.state.keys["2"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787390/guitar-c5b_u6v14n.mp3";
    this.state.keys.w =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787383/guitar-d5_d9fvrd.mp3";
    this.state.keys["3"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787369/guitar-d5b_hgmwhe.mp3";
    this.state.keys.e =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787792/guitar-e5_saokl1.mp3";
    this.state.keys.r =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787747/guitar-f5_j0wira.mp3";
    this.state.keys["4"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787701/guitar-f5b_qn001b.mp3";
    this.state.keys.t =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787652/guitar-g5_ykspmt.mp3";
    this.state.keys["5"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-g5b_eag435.mp3";
    this.state.keys.y =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-a5_zyhdfs.mp3";
    this.state.keys["6"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-a5b_s0zxo9.mp3";
    this.state.keys.u =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-b5_uza9xi.mp3";
    this.state.keys.i =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-c6_xkvn9q.mp3";
  }

  toggleDrums() {
    this.state.keys.q =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788396/drums-snare_fnvidw.mp3";
    this.state.keys["2"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788346/drums-kick_dphf5b.mp3";
    this.state.keys.w =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788309/drums-808_vpukjt.mp3";
    this.state.keys["3"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788272/drum-clap_lgmk1z.mp3";
    this.state.keys.e =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788601/drums-crash_nhl9uk.mp3";
    this.state.keys.r =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788567/drums-hat-c_gulx4o.mp3";
    this.state.keys["4"] =
      "https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788529/drums-hat-o_c6ggg3.mp3";
  }

  componentDidMount() {
    this.togglePiano();

    window.addEventListener("keypress", (e) => {
      this.handleKey(e);
    });
  }

  render() {
    return (
      <svg className="Synth" viewBox="0 0 401 203.6">
        <path
          className="base st0"
          d="M388.6,192.1H12.4c-6.5,0-11.9-5.3-11.9-11.9V34.5c0-18.8,15.2-34,34-34l332.1,0
      c18.8,0,34,15.2,34,34v145.8C400.5,186.8,395.2,192.1,388.6,192.1z"
        />
        <path
          className="st1"
          d="M378.3,192.1H21.5c-1.4,0-2.6-1.2-2.6-2.6v-79.7c0-6.6,5.4-12,12-12h338.1c6.6,0,12,5.4,12,12v79.7
      C380.9,191,379.8,192.1,378.3,192.1z"
        />
        <g className="speakers">
          <circle className="st2" cx="52.8" cy="48.2" r="32.9" />
          <circle className="st2" cx="349.5" cy="48.2" r="32.9" />
        </g>
        <g className="keys">
          <g className="key" data-key="i" onClick={this.handleKey}>
            <path
              className="st3"
              d="M335.3,98.3H370c5.8,0,10.4,4.7,10.4,10.4v85.8c0,4.7-3.8,8.5-8.5,8.5h-28.1c-4.7,0-8.5-3.8-8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path className="st2" d="M359.2,186.1h-2.8v-14.9h2.8V186.1z" />
              </g>
            </g>
            <path
              className="st4"
              d="M379.6,132.1c0,0,0.4-26.9-18.6-26.9h-25v-6.4h33.7c5.5,0,9.9,4.4,9.9,9.9V132.1z"
            />
            <path
              className="st4"
              d="M361.8,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C379.7,184.4,375,202.1,361.8,202.3z"
            />
          </g>
          <g className="key" data-key="u" onClick={this.handleKey}>
            <path
              className="st3"
              d="M335.2,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path
                  className="st2"
                  d="M315.5,183.2v-12h2.8v13.1c-1.4,1.4-3.5,2.2-6.2,2.2c-2,0-3.5-0.5-4.6-1.5c-1.1-1-1.6-2.4-1.6-4.4v-9.4h2.8
              v7.8c0,1.9,0.3,3.2,0.8,3.9c0.5,0.7,1.5,1.1,3,1.1C313.7,184,314.7,183.7,315.5,183.2z"
                />
              </g>
            </g>
            <rect x="307.4" y="98.8" className="st4" width="27" height="6.4" />
            <path
              className="st4"
              d="M316.6,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C334.5,184.4,329.8,202.2,316.6,202.3z"
            />
          </g>
          <g className="key" data-key="y" onClick={this.handleKey}>
            <path
              className="st3"
              d="M290.1,98.3H245v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path
                  className="st2"
                  d="M269,186.1h-2.8v-6.1l-5.6-8.9h3.1l3.9,6.4l3.9-6.4h3.1l-5.7,8.9V186.1z"
                />
              </g>
            </g>
            <rect
              x="262.3"
              y="98.8"
              className="st4"
              width="10.4"
              height="6.4"
            />
            <path
              class="st4"
              d="M271.5,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C289.4,184.4,284.7,202.2,271.5,202.3z"
            />
          </g>
          <g className="key" data-key="t" onClick={this.handleKey}>
            <path
              className="st3"
              d="M245,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path
                  className="st2"
                  d="M223.7,186.1h-2.8v-12.4h-4.4v-2.5h11.6v2.5h-4.4V186.1z"
                />
              </g>
            </g>
            <rect
              x="216.2"
              y="98.8"
              className="st4"
              width="11.4"
              height="6.4"
            />
            <path
              className="st4"
              d="M226.3,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C244.3,184.4,239.5,202.2,226.3,202.3z"
            />
          </g>
          <g className="key" data-key="r" onClick={this.handleKey}>
            <path
              className="st3"
              d="M199.9,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path
                  className="st2"
                  d="M184,186.1h-3.9l-5.6-5.6h-0.3v5.6h-2.8v-14.9h3.1c4.5,0,6.7,1.5,6.7,4.6c0,2.4-1.2,3.9-3.6,4.5L184,186.1z
               M174.2,178h0.9c2.1,0,3.1-0.7,3.1-2.2c0-1.4-1-2.1-3-2.1h-1V178z"
                />
              </g>
            </g>
            <rect x="155.6" y="98.8" className="st4" width="26" height="6.4" />
            <path
              class="st4"
              d="M181.2,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C199.1,184.4,194.4,202.2,181.2,202.3z"
            />
          </g>
          <g className="key" data-key="e" onClick={this.handleKey}>
            <path
              className="st3"
              d="M154.8,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path
                  className="st2"
                  d="M137.2,186.1h-9.5v-14.9h8.9v2.5h-6.1v3.2h4.9v2.5h-4.9v4.1h6.7V186.1z"
                />
              </g>
            </g>
            <rect x="127" y="98.8" className="st4" width="26.9" height="6.4" />
            <path
              className="st4"
              d="M136.1,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C154,184.4,149.3,202.2,136.1,202.3z"
            />
          </g>
          <g className="key" data-key="w" onClick={this.handleKey}>
            <path
              className="st3"
              d="M109.6,98.3H64.5v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path
                  className="st2"
                  d="M91.8,186.8l-4.6-10l-4.5,10l-6.3-15.6h3.1l3.4,9.1l4.4-9.8l4.4,9.7l3.4-9.1H98L91.8,186.8z"
                />
              </g>
            </g>
            <rect x="81.9" y="99" className="st4" width="10.4" height="6.4" />
            <path
              className="st4"
              d="M91,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C108.9,184.4,104.2,202.2,91,202.3z"
            />
          </g>
          <g className="key" data-key="q" onClick={this.handleKey}>
            <path
              className="st3"
              d="M64.5,98.3H29.6c-5.6,0-10.2,4.6-10.2,10.2v86c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
            />
            <g>
              <g>
                <path
                  className="st2"
                  d="M47.4,188.3l-2.9-2.7c-1.1,0.6-2.3,0.9-3.8,0.9c-2.3,0-4.2-0.8-5.8-2.3c-1.6-1.5-2.4-3.3-2.4-5.5
              c0-2.1,0.8-4,2.4-5.5c1.6-1.5,3.5-2.3,5.8-2.3c2.3,0,4.2,0.8,5.8,2.3c1.6,1.5,2.4,3.4,2.4,5.6c0,1-0.2,2-0.7,2.9s-1,1.8-1.8,2.5
              l2.9,2.1L47.4,188.3z M45.9,178.7c0-1.5-0.5-2.8-1.5-3.8c-1-1-2.2-1.5-3.6-1.5c-1.4,0-2.7,0.5-3.7,1.5c-1,1-1.5,2.2-1.5,3.7
              c0,1.4,0.5,2.7,1.5,3.7c1,1.1,2.2,1.6,3.6,1.6c1.5,0,2.7-0.5,3.7-1.5C45.4,181.4,45.9,180.2,45.9,178.7z"
                />
              </g>
            </g>
            <path
              className="st4"
              d="M20.2,132.1c0,0-1.2-26.9,19-26.9h8.1v-6.4H30c-5.5,0-9.9,4.4-9.9,9.9V132.1z"
            />
            <path
              className="st4"
              d="M45.8,202.3h10.3c0,0,7.2-0.3,7.6-7.5v-10.3C63.8,184.4,59,202.2,45.8,202.3z"
            />
          </g>
          <g className="key" data-key="6" onClick={this.handleKey}>
            <path
              className="st5"
              d="M307.4,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
            />
            <g>
              <g>
                <path
                  className="st6"
                  d="M291.1,135.5l1.8,1.6c-0.1,0.1-0.3,0.3-0.6,0.7s-0.7,0.8-1,1.1c-0.3,0.3-0.6,0.7-1,1.2
              c-0.4,0.5-0.7,0.9-1,1.3c0.6-0.2,1.1-0.3,1.7-0.3c1.4,0,2.5,0.5,3.3,1.4c0.8,1,1.3,2.1,1.3,3.5c0,1.3-0.5,2.5-1.5,3.4
              c-1,1-2.3,1.4-3.8,1.4c-1.6,0-2.8-0.5-3.9-1.5s-1.5-2.2-1.5-3.6c0-0.7,0.2-1.6,0.6-2.5c0.4-0.9,0.8-1.8,1.3-2.6
              c0.5-0.8,1.1-1.6,1.8-2.4c0.7-0.9,1.2-1.5,1.5-1.8C290.4,136.2,290.8,135.8,291.1,135.5z M288.4,148c0.5,0.5,1.1,0.8,1.9,0.8
              c0.7,0,1.3-0.3,1.8-0.8c0.5-0.5,0.7-1.1,0.7-1.9c0-0.8-0.2-1.4-0.7-2c-0.5-0.5-1.1-0.8-1.9-0.8c-0.8,0-1.4,0.3-1.9,0.8
              c-0.5,0.5-0.7,1.2-0.7,2C287.6,146.8,287.9,147.5,288.4,148z"
                />
              </g>
            </g>
            <rect
              x="272.7"
              y="98.8"
              className="st2"
              width="34.7"
              height="6.4"
            />
            <path
              className="st7"
              d="M289.6,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C307.5,144.9,306.4,162.8,289.6,162.8z"
            />
          </g>
          <g className="key" data-key="5" onClick={this.handleKey}>
            <path
              className="st5"
              d="M262.3,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
            />
            <g>
              <g>
                <path
                  className="st6"
                  d="M239.6,149.7l0.9-2.2c0.4,0.3,0.8,0.6,1.4,0.8s1.1,0.4,1.7,0.4c1,0,1.8-0.3,2.3-0.8c0.5-0.5,0.8-1.2,0.8-2
              c0-0.8-0.3-1.5-0.8-2.1c-0.5-0.6-1.3-0.8-2.4-0.8c-0.8,0-1.8,0.2-2.8,0.5l2-7.5h6.4l-0.7,2.1h-4l-0.8,3.2c0.3-0.1,0.7-0.1,1-0.1
              c1.3,0,2.5,0.5,3.5,1.4c1,0.9,1.4,2,1.4,3.3c0,1.5-0.5,2.7-1.4,3.7s-2.3,1.5-4.1,1.5c-0.9,0-1.8-0.1-2.6-0.4
              S240.1,150,239.6,149.7z"
                />
              </g>
            </g>
            <rect
              x="227.6"
              y="98.8"
              className="st2"
              width="34.7"
              height="6.4"
            />
            <path
              className="st7"
              d="M244.4,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C262.4,144.9,261.2,162.8,244.4,162.8z"
            />
          </g>
          <g className="key" data-key="4" onClick={this.handleKey}>
            <path
              class="st5"
              d="M216.2,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
            />
            <g>
              <g>
                <path
                  className="st6"
                  d="M203.4,150.8h-2.6v-2.5h-7.1v-1.7l7.8-11.4h1.8v10.9l2.1,0v2.1h-2.1V150.8z M200.8,146.1v-6l-4.1,6
              L200.8,146.1z"
                />
              </g>
            </g>
            <rect
              x="181.6"
              y="98.8"
              className="st2"
              width="34.7"
              height="6.4"
            />
            <path
              className="st7"
              d="M198.3,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C216.3,144.9,215.1,162.8,198.3,162.8z"
            />
          </g>
          <g className="key" data-key="3" onClick={this.handleKey}>
            <path
              className="st5"
              d="M127,98.8H92.3V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
            />
            <g>
              <g>
                <path
                  className="st6"
                  d="M111.4,142.4L111.4,142.4c0.9,0.4,1.6,1,2,1.7c0.4,0.8,0.7,1.6,0.7,2.5c0,1.1-0.5,2.1-1.5,3
              c-1,0.9-2.3,1.3-3.9,1.3c-1.1,0-2-0.2-2.8-0.5c-0.8-0.3-1.3-0.7-1.7-1.1l1.1-1.9c0.2,0.3,0.7,0.6,1.3,0.9s1.3,0.4,2,0.4
              c0.9,0,1.6-0.2,2-0.7s0.7-1.1,0.7-1.7c0-0.8-0.3-1.6-1-2.1c-0.7-0.6-1.5-0.9-2.6-0.9c-0.1,0-0.3,0-0.6,0v-1.6
              c0.2,0,0.5,0.1,0.7,0.1c0.8,0,1.5-0.2,2-0.7c0.5-0.5,0.8-1,0.8-1.5c0-1.1-0.7-1.7-2-1.7c-0.4,0-0.8,0.1-1.2,0.2
              c-0.5,0.1-0.8,0.3-1.1,0.5l-0.8-1.9c0.3-0.3,0.8-0.5,1.5-0.7c0.7-0.2,1.4-0.3,2.2-0.3c1.2,0,2.2,0.4,3,1.1s1.2,1.6,1.2,2.5
              C113.5,140.6,112.8,141.7,111.4,142.4z"
                />
              </g>
            </g>
            <rect x="92.3" y="98.8" className="st2" width="34.7" height="6.4" />
            <path
              className="st7"
              d="M109.1,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C127,144.9,125.9,162.8,109.1,162.8z"
            />
          </g>
          <g className="key" data-key="2" onClick={this.handleKey}>
            <path
              className="st5"
              d="M81.8,98.8H47.2V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
            />
            <g>
              <g>
                <path
                  className="st6"
                  d="M70,150.7H59.2V149c0.7-0.3,1.5-0.8,2.5-1.6s1.8-1.5,2.5-2.2c0.9-0.9,1.5-1.8,1.8-2.6
              c0.4-0.8,0.6-1.6,0.6-2.5c0-0.6-0.2-1.2-0.6-1.6c-0.4-0.5-0.9-0.7-1.5-0.7c-1.1,0-2.2,0.5-3.1,1.6l-1.3-1.8
              c1.4-1.4,3-2.1,4.7-2.1c1.4,0,2.5,0.4,3.4,1.3c0.9,0.9,1.3,2,1.3,3.2c0,1.8-1.1,3.9-3.3,6.2c-0.6,0.6-1.3,1.3-2.3,2.1l6.2,0
              V150.7z"
                />
              </g>
            </g>
            <rect x="47.2" y="98.8" className="st2" width="34.7" height="6.4" />
            <path
              className="st7"
              d="M64,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C81.9,144.9,80.8,162.8,64,162.8z"
            />
          </g>
        </g>
        <g className="presets">
          <path
            className="base st6"
            d="M269.4,15.2l-136.5,0c-18.3,0-33,14.8-33,33v0c0,18.3,14.8,33,33,33h136.5c18.3,0,33-14.8,33-33
        v0C302.4,30,287.6,15.2,269.4,15.2z"
          />
          <path
            className="st4"
            d="M99.8,48.2c0,0,6.7,26.5,33.6,26.8c22.5,0.2,136.7,0.1,136.7,0.1s23.8,1.3,32.2-26.9c0,0,0.7,13.9-9.7,23.4
        c-10.4,9.5-20,9.7-22.6,9.7c-2.6,0-137.3,0-137.3,0s-21.5,1.4-30.5-20.4C102.3,60.9,99.8,56.1,99.8,48.2z"
          />
          <g className="preset" data-preset="drums" onClick={this.handlePreset}>
            <path
              className="base st8"
              d="M268,39.3c-1.9-0.6-7.7-0.6-7.7-0.6c-18.5,0-17.5,7-17.5,7c0,0.1,0,0.2,0,0.2v11.4
          c0,0,0,0.1,0,0.1c0.2,1.7,1.7,3.1,3,3.9c0.9,0.6,2.1-0.1,2.1-1.1v-4.9c0,0-0.1-1.6,1.6-1.6s1.7,1.8,1.7,1.8v7.1
          c0,0.6,0.4,1.2,1,1.3c1.8,0.5,3.9,0.7,5.2,0.8c0.8,0,1.4-0.6,1.4-1.3v-5.6c0-0.1,0-0.1,0-0.2c0.1-0.4,0.4-1.6,1.7-1.6
          c1.6,0,1.6,1.7,1.6,1.7v5.6c0,0.8,0.6,1.4,1.4,1.3c2.2-0.1,4.1-0.5,5.2-0.8c0.6-0.1,1-0.7,1-1.3v-7c0-0.1,0-0.2,0-0.2
          c0.1-0.4,0.4-1.6,1.7-1.6c1.6,0,1.6,1.8,1.6,1.8v4.6c0,1.1,1.2,1.7,2.1,1.1c3-1.9,2.8-3.9,2.8-3.9V45.5c0-0.1,0-0.2,0-0.3
          c0,0,0.6-4.7-5.2-5.5"
            />
            <path
              className="top st8"
              d="M268.3,42.7c5.3,0.2,6.1,3.4,6.1,3.4c0,4.2-14.4,4.4-14.4,4.4s-13.4-0.3-13.8-4.4
          c0,0-1-4.2,17.2-3.8"
            />
            <path
              className="stick st8"
              d="M259.2,45l16.5-10.8c0.5-0.3,1.2-0.2,1.5,0.3l0.5,0.7c0.4,0.5,0.2,1.2-0.3,1.6l-16.6,10.8
          c-0.5,0.3-1.2,0.2-1.5-0.3l-0.4-0.7C258.5,46,258.7,45.4,259.2,45z"
            />
          </g>
          <g
            className="preset"
            data-preset="guitar"
            onClick={this.handlePreset}
          >
            <path
              className="st8"
              d="M190.8,61.1c0,0-4.9-5.7-1.2-11c0,0,1.5-1.8,3.1-2.1c1.6-0.4,3.4-0.3,4.1-1.9c0.7-1.6,2.4-5.1,7-4.5
          c0,0,2.1,0.5,3.3,1.5l5.1-5c0,0,0.9-3,1.2-3.3c0.4-0.3,3.5-3.4,3.5-3.4s1.3-1,2.3-0.2s2.7,2.6,2.7,2.6s0.9,1,0.1,2.2
          c-0.8,1.1-3.8,3.9-3.8,3.9l-3,1l-5.1,5.1c0,0,1.8,2.3,1.5,5c-0.4,2.7-1.8,4.1-3.6,4.9c-1.8,0.8-2.5,1.8-2.6,3s-1.2,5.2-5.7,5.9
          C195.1,65.4,191.3,61.8,190.8,61.1z"
            />
            <circle className="st8" cx="200.9" cy="52" r="3.3" />
          </g>
          <g className="preset" data-preset="piano" onClick={this.handlePreset}>
            <path
              className="st9"
              d="M163.4,62.4h-35.1c-1.1,0-2-0.9-2-2V38.3c0-1.1,0.9-2,2-2h35.1c1.1,0,2,0.9,2,2v22.1
          C165.4,61.5,164.5,62.4,163.4,62.4z"
            />
            <path
              className="st9"
              d="M163.5,62.4h-35.2c-1.1,0-2-0.9-2-2V45.7h39.2v14.8C165.4,61.5,164.5,62.4,163.5,62.4z"
            />
            <path
              className="st9"
              d="M137.1,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C138.1,53.6,137.7,54,137.1,54z"
            />
            <path
              className="st9"
              d="M147.2,54h-2.8c-0.6,0-1.1-0.5-1.1-1.1v-7.3h5v7.3C148.3,53.5,147.8,54,147.2,54z"
            />
            <path
              className="st9"
              d="M157.2,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C158.2,53.6,157.7,54,157.2,54z"
            />
            <line className="st9" x1="135.8" y1="54.1" x2="135.8" y2="62" />
            <line className="st9" x1="145.8" y1="54.1" x2="145.8" y2="62" />
            <line className="st9" x1="155.8" y1="54.1" x2="155.8" y2="62" />
          </g>
        </g>
      </svg>
    );
  }
}

ReactDOM.render(<Synth />, document.getElementById("app"));

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>

## style.sass
// Font

@font-face src: url(https://assets.codepen.io/4291733/SemplicitaPro-Medium.woff2)
  font-family: SemplicitaPro

// Motif colors

$motif-base: #ff79e6
$motif-low: #ffa6f7
$motif-dark: #892276
$motif-shadow: #ffe1f7

// Common colors

$grey-low: #efefef

// Synth

$synth-w: 320px

// Spacing (margins && paddings)

$space-xl: 36px

// Responsive breakpoints

$res-laptop-h: 720px

// Styling

*
  margin: 0
  padding: 0
  box-sizing: border-box
  user-select: none

#app
  height: 100vh
  width: 100%
  display: flex
  align-items: center
  justify-content: center
  padding: 0 $space-xl
  background: $grey-low

  .Synth
    width: $synth-w

    .preset, .key
      cursor: pointer

    .st0
      fill: $motif-low
      stroke: $motif-dark
      stroke-miterlimit:10

    .st1
      fill: $motif-dark

    .st2
      fill: $motif-base

    .st3
      fill: white
      stroke: $motif-dark
      stroke-miterlimit:10

    .st4
      fill: $motif-shadow

    .st5
      fill: $motif-low

    .st6
      fill: white

    .st7
      fill:#F993EA

    .st8
      fill: white
      stroke: $motif-base
      stroke-miterlimit: 10

    .st9
      fill: $motif-base
      stroke: white
      stroke-miterlimit: 10
	class Synth extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	presets: {
	piano: true,
	guitar: false,
	drums: false
	},

	keys: {
	q: "",
	2: "",
	w: "",
	3: "",
	e: "",
	r: "",
	4: "",
	t: "",
	5: "",
	y: "",
	u: "",
	i: "",
	6: ""
	}
	};

	this.handlePreset = this.handlePreset.bind(this);
	}

	handleKey = (e) => {
	let data = {
	event: e.type,
	target: "",
	key: ""
	};

	if (data.event == "keypress") {
	const keys = document.querySelectorAll(".key");
	keys.forEach((key) => {
	if (key.getAttribute("data-key") == e.key.toLowerCase())
	data.target = key;
	});
	data.key = e.key;
	} else {
	data.target = e.currentTarget;
	data.key = data.target.getAttribute("data-key");
	}

	this.playSound(data);
	this.animate(data);
	};

	playSound = ({ key }) => {
	Object.entries(this.state.keys).forEach((entry) => {
	if (entry[0] == key.toLowerCase()) {
	const audio = new Audio(entry[1]);
	audio.play();
	}
	});
	};

	animate = ({ target }) => {
	const tl = gsap.timeline();
	try {
	tl.to(target, {
	duration: 0.18,
	ease: "power3.out",
	scale: 0.95,
	transformOrigin: "top"
	});

	tl.to(target, {
	duration: 0.18,
	ease: "power3.out",
	scale: 1,
	transformOrigin: "top"
	});

	const tl2 = gsap.timeline();

	tl2.to(".speakers circle", {
	duration: 0.18,
	ease: "back.out",
	scale: 1.15,
	transformOrigin: "center"
	});

	tl2.to(".speakers circle", {
	duration: 0.3,
	ease: "back.out",
	scale: 1,
	transformOrigin: "center"
	});
	} catch {}
	};

	handlePreset = (e) => {
	if (e) {
	const data = {
	target: e.currentTarget,
	presets: e.currentTarget.parentElement.querySelectorAll(".preset"),
	paths: e.currentTarget.querySelectorAll("path"),
	preset: e.currentTarget.getAttribute("data-preset")
	};

	Object.entries(this.state.presets).forEach((entry) => {
	if (entry[0] == data.preset) {
	data.paths.forEach((path) => {
	gsap.set(path, { fill: "#FF79E6", stroke: "white" });
	try {
	gsap.set(".top", { fill: "white" });
	} catch {}
	});
	} else {
	data.presets.forEach((preset) => {
	if (preset.getAttribute("data-preset") == entry[0]) {
	preset.querySelectorAll("path").forEach((path) => {
	gsap.set(path, {
	fill: "white",
	stroke: "#FF79E6"
	});
	});
	}
	});
	}

	data.presets.forEach((preset) => {
	gsap.set(data.path, { fill: "white" });
	});
	});

	if (data.preset == "piano") this.togglePiano();
	else if (data.preset == "guitar") this.toggleGuitar();
	else if (data.preset == "drums") this.toggleDrums();
	} else this.togglePiano();
	};

	togglePiano() {
	this.state.keys.q =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-c5_o2bhnd.mp3";
	this.state.keys["2"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-c5b_fbzkbo.mp3";
	this.state.keys.w =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-d5_x0abk8.mp3";
	this.state.keys["3"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-d5b_ujpmzw.mp3";
	this.state.keys.e =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-e5_bjtggs.mp3";
	this.state.keys.r =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786368/piano-f5_tw1ja7.mp3";
	this.state.keys["4"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786369/piano-f5b_puwbxi.mp3";
	this.state.keys.t =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786852/piano-g5_q3p279.mp3";
	this.state.keys["5"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787011/piano-g5b_nbwep2.mp3";
	this.state.keys.y =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787005/piano-a5_hvhua7.mp3";
	this.state.keys["6"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626786996/piano-a5b_ttgoqb.mp3";
	this.state.keys.u =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787191/piano-b5_usxyjg.mp3";
	this.state.keys.i =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787185/piano-c6_ptqlx7.mp3";
	}

	toggleGuitar() {
	this.state.keys.q =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787398/guitar-c5_mwsvv3.mp3";
	this.state.keys["2"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787390/guitar-c5b_u6v14n.mp3";
	this.state.keys.w =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787383/guitar-d5_d9fvrd.mp3";
	this.state.keys["3"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787369/guitar-d5b_hgmwhe.mp3";
	this.state.keys.e =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787792/guitar-e5_saokl1.mp3";
	this.state.keys.r =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787747/guitar-f5_j0wira.mp3";
	this.state.keys["4"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787701/guitar-f5b_qn001b.mp3";
	this.state.keys.t =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626787652/guitar-g5_ykspmt.mp3";
	this.state.keys["5"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-g5b_eag435.mp3";
	this.state.keys.y =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-a5_zyhdfs.mp3";
	this.state.keys["6"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-a5b_s0zxo9.mp3";
	this.state.keys.u =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-b5_uza9xi.mp3";
	this.state.keys.i =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788001/guitar-c6_xkvn9q.mp3";
	}

	toggleDrums() {
	this.state.keys.q =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788396/drums-snare_fnvidw.mp3";
	this.state.keys["2"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788346/drums-kick_dphf5b.mp3";
	this.state.keys.w =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788309/drums-808_vpukjt.mp3";
	this.state.keys["3"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788272/drum-clap_lgmk1z.mp3";
	this.state.keys.e =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788601/drums-crash_nhl9uk.mp3";
	this.state.keys.r =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788567/drums-hat-c_gulx4o.mp3";
	this.state.keys["4"] =
	"https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1626788529/drums-hat-o_c6ggg3.mp3";
	}

	componentDidMount() {
	this.togglePiano();

	window.addEventListener("keypress", (e) => {
	this.handleKey(e);
	});
	}

	render() {
	return (
	<svg className="Synth" viewBox="0 0 401 203.6">
	<path
	className="base st0"
	d="M388.6,192.1H12.4c-6.5,0-11.9-5.3-11.9-11.9V34.5c0-18.8,15.2-34,34-34l332.1,0
	c18.8,0,34,15.2,34,34v145.8C400.5,186.8,395.2,192.1,388.6,192.1z"
	/>
	<path
	className="st1"
	d="M378.3,192.1H21.5c-1.4,0-2.6-1.2-2.6-2.6v-79.7c0-6.6,5.4-12,12-12h338.1c6.6,0,12,5.4,12,12v79.7
	C380.9,191,379.8,192.1,378.3,192.1z"
	/>
	<g className="speakers">
	<circle className="st2" cx="52.8" cy="48.2" r="32.9" />
	<circle className="st2" cx="349.5" cy="48.2" r="32.9" />
	</g>
	<g className="keys">
	<g className="key" data-key="i" onClick={this.handleKey}>
	<path
	className="st3"
	d="M335.3,98.3H370c5.8,0,10.4,4.7,10.4,10.4v85.8c0,4.7-3.8,8.5-8.5,8.5h-28.1c-4.7,0-8.5-3.8-8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path className="st2" d="M359.2,186.1h-2.8v-14.9h2.8V186.1z" />
	</g>
	</g>
	<path
	className="st4"
	d="M379.6,132.1c0,0,0.4-26.9-18.6-26.9h-25v-6.4h33.7c5.5,0,9.9,4.4,9.9,9.9V132.1z"
	/>
	<path
	className="st4"
	d="M361.8,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C379.7,184.4,375,202.1,361.8,202.3z"
	/>
	</g>
	<g className="key" data-key="u" onClick={this.handleKey}>
	<path
	className="st3"
	d="M335.2,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path
	className="st2"
	d="M315.5,183.2v-12h2.8v13.1c-1.4,1.4-3.5,2.2-6.2,2.2c-2,0-3.5-0.5-4.6-1.5c-1.1-1-1.6-2.4-1.6-4.4v-9.4h2.8
	v7.8c0,1.9,0.3,3.2,0.8,3.9c0.5,0.7,1.5,1.1,3,1.1C313.7,184,314.7,183.7,315.5,183.2z"
	/>
	</g>
	</g>
	<rect x="307.4" y="98.8" className="st4" width="27" height="6.4" />
	<path
	className="st4"
	d="M316.6,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C334.5,184.4,329.8,202.2,316.6,202.3z"
	/>
	</g>
	<g className="key" data-key="y" onClick={this.handleKey}>
	<path
	className="st3"
	d="M290.1,98.3H245v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path
	className="st2"
	d="M269,186.1h-2.8v-6.1l-5.6-8.9h3.1l3.9,6.4l3.9-6.4h3.1l-5.7,8.9V186.1z"
	/>
	</g>
	</g>
	<rect
	x="262.3"
	y="98.8"
	className="st4"
	width="10.4"
	height="6.4"
	/>
	<path
	class="st4"
	d="M271.5,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C289.4,184.4,284.7,202.2,271.5,202.3z"
	/>
	</g>
	<g className="key" data-key="t" onClick={this.handleKey}>
	<path
	className="st3"
	d="M245,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path
	className="st2"
	d="M223.7,186.1h-2.8v-12.4h-4.4v-2.5h11.6v2.5h-4.4V186.1z"
	/>
	</g>
	</g>
	<rect
	x="216.2"
	y="98.8"
	className="st4"
	width="11.4"
	height="6.4"
	/>
	<path
	className="st4"
	d="M226.3,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C244.3,184.4,239.5,202.2,226.3,202.3z"
	/>
	</g>
	<g className="key" data-key="r" onClick={this.handleKey}>
	<path
	className="st3"
	d="M199.9,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path
	className="st2"
	d="M184,186.1h-3.9l-5.6-5.6h-0.3v5.6h-2.8v-14.9h3.1c4.5,0,6.7,1.5,6.7,4.6c0,2.4-1.2,3.9-3.6,4.5L184,186.1z
	M174.2,178h0.9c2.1,0,3.1-0.7,3.1-2.2c0-1.4-1-2.1-3-2.1h-1V178z"
	/>
	</g>
	</g>
	<rect x="155.6" y="98.8" className="st4" width="26" height="6.4" />
	<path
	class="st4"
	d="M181.2,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C199.1,184.4,194.4,202.2,181.2,202.3z"
	/>
	</g>
	<g className="key" data-key="e" onClick={this.handleKey}>
	<path
	className="st3"
	d="M154.8,98.3h-45.1v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path
	className="st2"
	d="M137.2,186.1h-9.5v-14.9h8.9v2.5h-6.1v3.2h4.9v2.5h-4.9v4.1h6.7V186.1z"
	/>
	</g>
	</g>
	<rect x="127" y="98.8" className="st4" width="26.9" height="6.4" />
	<path
	className="st4"
	d="M136.1,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C154,184.4,149.3,202.2,136.1,202.3z"
	/>
	</g>
	<g className="key" data-key="w" onClick={this.handleKey}>
	<path
	className="st3"
	d="M109.6,98.3H64.5v96.2c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path
	className="st2"
	d="M91.8,186.8l-4.6-10l-4.5,10l-6.3-15.6h3.1l3.4,9.1l4.4-9.8l4.4,9.7l3.4-9.1H98L91.8,186.8z"
	/>
	</g>
	</g>
	<rect x="81.9" y="99" className="st4" width="10.4" height="6.4" />
	<path
	className="st4"
	d="M91,202.3h10.3c0,0,7.3-0.3,7.6-7.5v-10.3C108.9,184.4,104.2,202.2,91,202.3z"
	/>
	</g>
	<g className="key" data-key="q" onClick={this.handleKey}>
	<path
	className="st3"
	d="M64.5,98.3H29.6c-5.6,0-10.2,4.6-10.2,10.2v86c0,4.7,3.8,8.6,8.6,8.6h28c4.7,0,8.5-3.8,8.5-8.5V98.3z"
	/>
	<g>
	<g>
	<path
	className="st2"
	d="M47.4,188.3l-2.9-2.7c-1.1,0.6-2.3,0.9-3.8,0.9c-2.3,0-4.2-0.8-5.8-2.3c-1.6-1.5-2.4-3.3-2.4-5.5
	c0-2.1,0.8-4,2.4-5.5c1.6-1.5,3.5-2.3,5.8-2.3c2.3,0,4.2,0.8,5.8,2.3c1.6,1.5,2.4,3.4,2.4,5.6c0,1-0.2,2-0.7,2.9s-1,1.8-1.8,2.5
	l2.9,2.1L47.4,188.3z M45.9,178.7c0-1.5-0.5-2.8-1.5-3.8c-1-1-2.2-1.5-3.6-1.5c-1.4,0-2.7,0.5-3.7,1.5c-1,1-1.5,2.2-1.5,3.7
	c0,1.4,0.5,2.7,1.5,3.7c1,1.1,2.2,1.6,3.6,1.6c1.5,0,2.7-0.5,3.7-1.5C45.4,181.4,45.9,180.2,45.9,178.7z"
	/>
	</g>
	</g>
	<path
	className="st4"
	d="M20.2,132.1c0,0-1.2-26.9,19-26.9h8.1v-6.4H30c-5.5,0-9.9,4.4-9.9,9.9V132.1z"
	/>
	<path
	className="st4"
	d="M45.8,202.3h10.3c0,0,7.2-0.3,7.6-7.5v-10.3C63.8,184.4,59,202.2,45.8,202.3z"
	/>
	</g>
	<g className="key" data-key="6" onClick={this.handleKey}>
	<path
	className="st5"
	d="M307.4,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
	/>
	<g>
	<g>
	<path
	className="st6"
	d="M291.1,135.5l1.8,1.6c-0.1,0.1-0.3,0.3-0.6,0.7s-0.7,0.8-1,1.1c-0.3,0.3-0.6,0.7-1,1.2
	c-0.4,0.5-0.7,0.9-1,1.3c0.6-0.2,1.1-0.3,1.7-0.3c1.4,0,2.5,0.5,3.3,1.4c0.8,1,1.3,2.1,1.3,3.5c0,1.3-0.5,2.5-1.5,3.4
	c-1,1-2.3,1.4-3.8,1.4c-1.6,0-2.8-0.5-3.9-1.5s-1.5-2.2-1.5-3.6c0-0.7,0.2-1.6,0.6-2.5c0.4-0.9,0.8-1.8,1.3-2.6
	c0.5-0.8,1.1-1.6,1.8-2.4c0.7-0.9,1.2-1.5,1.5-1.8C290.4,136.2,290.8,135.8,291.1,135.5z M288.4,148c0.5,0.5,1.1,0.8,1.9,0.8
	c0.7,0,1.3-0.3,1.8-0.8c0.5-0.5,0.7-1.1,0.7-1.9c0-0.8-0.2-1.4-0.7-2c-0.5-0.5-1.1-0.8-1.9-0.8c-0.8,0-1.4,0.3-1.9,0.8
	c-0.5,0.5-0.7,1.2-0.7,2C287.6,146.8,287.9,147.5,288.4,148z"
	/>
	</g>
	</g>
	<rect
	x="272.7"
	y="98.8"
	className="st2"
	width="34.7"
	height="6.4"
	/>
	<path
	className="st7"
	d="M289.6,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C307.5,144.9,306.4,162.8,289.6,162.8z"
	/>
	</g>
	<g className="key" data-key="5" onClick={this.handleKey}>
	<path
	className="st5"
	d="M262.3,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
	/>
	<g>
	<g>
	<path
	className="st6"
	d="M239.6,149.7l0.9-2.2c0.4,0.3,0.8,0.6,1.4,0.8s1.1,0.4,1.7,0.4c1,0,1.8-0.3,2.3-0.8c0.5-0.5,0.8-1.2,0.8-2
	c0-0.8-0.3-1.5-0.8-2.1c-0.5-0.6-1.3-0.8-2.4-0.8c-0.8,0-1.8,0.2-2.8,0.5l2-7.5h6.4l-0.7,2.1h-4l-0.8,3.2c0.3-0.1,0.7-0.1,1-0.1
	c1.3,0,2.5,0.5,3.5,1.4c1,0.9,1.4,2,1.4,3.3c0,1.5-0.5,2.7-1.4,3.7s-2.3,1.5-4.1,1.5c-0.9,0-1.8-0.1-2.6-0.4
	S240.1,150,239.6,149.7z"
	/>
	</g>
	</g>
	<rect
	x="227.6"
	y="98.8"
	className="st2"
	width="34.7"
	height="6.4"
	/>
	<path
	className="st7"
	d="M244.4,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C262.4,144.9,261.2,162.8,244.4,162.8z"
	/>
	</g>
	<g className="key" data-key="4" onClick={this.handleKey}>
	<path
	class="st5"
	d="M216.2,98.8h-34.7V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
	/>
	<g>
	<g>
	<path
	className="st6"
	d="M203.4,150.8h-2.6v-2.5h-7.1v-1.7l7.8-11.4h1.8v10.9l2.1,0v2.1h-2.1V150.8z M200.8,146.1v-6l-4.1,6
	L200.8,146.1z"
	/>
	</g>
	</g>
	<rect
	x="181.6"
	y="98.8"
	className="st2"
	width="34.7"
	height="6.4"
	/>
	<path
	className="st7"
	d="M198.3,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C216.3,144.9,215.1,162.8,198.3,162.8z"
	/>
	</g>
	<g className="key" data-key="3" onClick={this.handleKey}>
	<path
	className="st5"
	d="M127,98.8H92.3V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
	/>
	<g>
	<g>
	<path
	className="st6"
	d="M111.4,142.4L111.4,142.4c0.9,0.4,1.6,1,2,1.7c0.4,0.8,0.7,1.6,0.7,2.5c0,1.1-0.5,2.1-1.5,3
	c-1,0.9-2.3,1.3-3.9,1.3c-1.1,0-2-0.2-2.8-0.5c-0.8-0.3-1.3-0.7-1.7-1.1l1.1-1.9c0.2,0.3,0.7,0.6,1.3,0.9s1.3,0.4,2,0.4
	c0.9,0,1.6-0.2,2-0.7s0.7-1.1,0.7-1.7c0-0.8-0.3-1.6-1-2.1c-0.7-0.6-1.5-0.9-2.6-0.9c-0.1,0-0.3,0-0.6,0v-1.6
	c0.2,0,0.5,0.1,0.7,0.1c0.8,0,1.5-0.2,2-0.7c0.5-0.5,0.8-1,0.8-1.5c0-1.1-0.7-1.7-2-1.7c-0.4,0-0.8,0.1-1.2,0.2
	c-0.5,0.1-0.8,0.3-1.1,0.5l-0.8-1.9c0.3-0.3,0.8-0.5,1.5-0.7c0.7-0.2,1.4-0.3,2.2-0.3c1.2,0,2.2,0.4,3,1.1s1.2,1.6,1.2,2.5
	C113.5,140.6,112.8,141.7,111.4,142.4z"
	/>
	</g>
	</g>
	<rect x="92.3" y="98.8" className="st2" width="34.7" height="6.4" />
	<path
	className="st7"
	d="M109.1,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C127,144.9,125.9,162.8,109.1,162.8z"
	/>
	</g>
	<g className="key" data-key="2" onClick={this.handleKey}>
	<path
	className="st5"
	d="M81.8,98.8H47.2V154c0,4.7,3.8,8.5,8.5,8.5h17.6c4.7,0,8.5-3.8,8.5-8.5V98.8z"
	/>
	<g>
	<g>
	<path
	className="st6"
	d="M70,150.7H59.2V149c0.7-0.3,1.5-0.8,2.5-1.6s1.8-1.5,2.5-2.2c0.9-0.9,1.5-1.8,1.8-2.6
	c0.4-0.8,0.6-1.6,0.6-2.5c0-0.6-0.2-1.2-0.6-1.6c-0.4-0.5-0.9-0.7-1.5-0.7c-1.1,0-2.2,0.5-3.1,1.6l-1.3-1.8
	c1.4-1.4,3-2.1,4.7-2.1c1.4,0,2.5,0.4,3.4,1.3c0.9,0.9,1.3,2,1.3,3.2c0,1.8-1.1,3.9-3.3,6.2c-0.6,0.6-1.3,1.3-2.3,2.1l6.2,0
	V150.7z"
	/>
	</g>
	</g>
	<rect x="47.2" y="98.8" className="st2" width="34.7" height="6.4" />
	<path
	className="st7"
	d="M64,162.8h10.1c0,0,7.5-0.8,7.8-8v-9.9C81.9,144.9,80.8,162.8,64,162.8z"
	/>
	</g>
	</g>
	<g className="presets">
	<path
	className="base st6"
	d="M269.4,15.2l-136.5,0c-18.3,0-33,14.8-33,33v0c0,18.3,14.8,33,33,33h136.5c18.3,0,33-14.8,33-33
	v0C302.4,30,287.6,15.2,269.4,15.2z"
	/>
	<path
	className="st4"
	d="M99.8,48.2c0,0,6.7,26.5,33.6,26.8c22.5,0.2,136.7,0.1,136.7,0.1s23.8,1.3,32.2-26.9c0,0,0.7,13.9-9.7,23.4
	c-10.4,9.5-20,9.7-22.6,9.7c-2.6,0-137.3,0-137.3,0s-21.5,1.4-30.5-20.4C102.3,60.9,99.8,56.1,99.8,48.2z"
	/>
	<g className="preset" data-preset="drums" onClick={this.handlePreset}>
	<path
	className="base st8"
	d="M268,39.3c-1.9-0.6-7.7-0.6-7.7-0.6c-18.5,0-17.5,7-17.5,7c0,0.1,0,0.2,0,0.2v11.4
	c0,0,0,0.1,0,0.1c0.2,1.7,1.7,3.1,3,3.9c0.9,0.6,2.1-0.1,2.1-1.1v-4.9c0,0-0.1-1.6,1.6-1.6s1.7,1.8,1.7,1.8v7.1
	c0,0.6,0.4,1.2,1,1.3c1.8,0.5,3.9,0.7,5.2,0.8c0.8,0,1.4-0.6,1.4-1.3v-5.6c0-0.1,0-0.1,0-0.2c0.1-0.4,0.4-1.6,1.7-1.6
	c1.6,0,1.6,1.7,1.6,1.7v5.6c0,0.8,0.6,1.4,1.4,1.3c2.2-0.1,4.1-0.5,5.2-0.8c0.6-0.1,1-0.7,1-1.3v-7c0-0.1,0-0.2,0-0.2
	c0.1-0.4,0.4-1.6,1.7-1.6c1.6,0,1.6,1.8,1.6,1.8v4.6c0,1.1,1.2,1.7,2.1,1.1c3-1.9,2.8-3.9,2.8-3.9V45.5c0-0.1,0-0.2,0-0.3
	c0,0,0.6-4.7-5.2-5.5"
	/>
	<path
	className="top st8"
	d="M268.3,42.7c5.3,0.2,6.1,3.4,6.1,3.4c0,4.2-14.4,4.4-14.4,4.4s-13.4-0.3-13.8-4.4
	c0,0-1-4.2,17.2-3.8"
	/>
	<path
	className="stick st8"
	d="M259.2,45l16.5-10.8c0.5-0.3,1.2-0.2,1.5,0.3l0.5,0.7c0.4,0.5,0.2,1.2-0.3,1.6l-16.6,10.8
	c-0.5,0.3-1.2,0.2-1.5-0.3l-0.4-0.7C258.5,46,258.7,45.4,259.2,45z"
	/>
	</g>
	<g
	className="preset"
	data-preset="guitar"
	onClick={this.handlePreset}
	>
	<path
	className="st8"
	d="M190.8,61.1c0,0-4.9-5.7-1.2-11c0,0,1.5-1.8,3.1-2.1c1.6-0.4,3.4-0.3,4.1-1.9c0.7-1.6,2.4-5.1,7-4.5
	c0,0,2.1,0.5,3.3,1.5l5.1-5c0,0,0.9-3,1.2-3.3c0.4-0.3,3.5-3.4,3.5-3.4s1.3-1,2.3-0.2s2.7,2.6,2.7,2.6s0.9,1,0.1,2.2
	c-0.8,1.1-3.8,3.9-3.8,3.9l-3,1l-5.1,5.1c0,0,1.8,2.3,1.5,5c-0.4,2.7-1.8,4.1-3.6,4.9c-1.8,0.8-2.5,1.8-2.6,3s-1.2,5.2-5.7,5.9
	C195.1,65.4,191.3,61.8,190.8,61.1z"
	/>
	<circle className="st8" cx="200.9" cy="52" r="3.3" />
	</g>
	<g className="preset" data-preset="piano" onClick={this.handlePreset}>
	<path
	className="st9"
	d="M163.4,62.4h-35.1c-1.1,0-2-0.9-2-2V38.3c0-1.1,0.9-2,2-2h35.1c1.1,0,2,0.9,2,2v22.1
	C165.4,61.5,164.5,62.4,163.4,62.4z"
	/>
	<path
	className="st9"
	d="M163.5,62.4h-35.2c-1.1,0-2-0.9-2-2V45.7h39.2v14.8C165.4,61.5,164.5,62.4,163.5,62.4z"
	/>
	<path
	className="st9"
	d="M137.1,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C138.1,53.6,137.7,54,137.1,54z"
	/>
	<path
	className="st9"
	d="M147.2,54h-2.8c-0.6,0-1.1-0.5-1.1-1.1v-7.3h5v7.3C148.3,53.5,147.8,54,147.2,54z"
	/>
	<path
	className="st9"
	d="M157.2,54h-2.6c-0.6,0-1-0.5-1-1v-7.3h4.7V53C158.2,53.6,157.7,54,157.2,54z"
	/>
	<line className="st9" x1="135.8" y1="54.1" x2="135.8" y2="62" />
	<line className="st9" x1="145.8" y1="54.1" x2="145.8" y2="62" />
	<line className="st9" x1="155.8" y1="54.1" x2="155.8" y2="62" />
	</g>
	</g>
	</svg>
	);
	}
	}

	ReactDOM.render(<Synth />, document.getElementById("app"));
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
	// Font

	@font-face src: url(https://assets.codepen.io/4291733/SemplicitaPro-Medium.woff2)
	font-family: SemplicitaPro

	// Motif colors

	$motif-base: #ff79e6
	$motif-low: #ffa6f7
	$motif-dark: #892276
	$motif-shadow: #ffe1f7

	// Common colors

	$grey-low: #efefef

	// Synth

	$synth-w: 320px

	// Spacing (margins && paddings)

	$space-xl: 36px

	// Responsive breakpoints

	$res-laptop-h: 720px

	// Styling

	*
	margin: 0
	padding: 0
	box-sizing: border-box
	user-select: none

	#app
	height: 100vh
	width: 100%
	display: flex
	align-items: center
	justify-content: center
	padding: 0 $space-xl
	background: $grey-low

	.Synth
	width: $synth-w

	.preset, .key
	cursor: pointer

	.st0
	fill: $motif-low
	stroke: $motif-dark
	stroke-miterlimit:10

	.st1
	fill: $motif-dark

	.st2
	fill: $motif-base

	.st3
	fill: white
	stroke: $motif-dark
	stroke-miterlimit:10

	.st4
	fill: $motif-shadow

	.st5
	fill: $motif-low

	.st6
	fill: white

	.st7
	fill:#F993EA

	.st8
	fill: white
	stroke: $motif-base
	stroke-miterlimit: 10

	.st9
	fill: $motif-base
	stroke: white
	stroke-miterlimit: 10