https://toster.ru/q/366235

by akogch

HTML

<script src="https://cdn.jsdelivr.net/snap.svg/0.4.1/snap.svg-min.js"></script>
<button class="button button--line button--effect-1">
  <span class="morph-shape"> </span>
  <span class="button__text">Press me</span>
</button>

JavaScript

document
  .querySelector(".morph-shape")
  .setAttribute(
    "data-morph-active",
    "M286,113c0,0-68.8,9-136,9c-78.2,0-137-9-137-9S3,97.198,3,62.5C3,33.999,13,12,13,12S72,2,150,2c85,0,136,10,136,10s11,17.598,11,52C297,96.398,286,113,286,113z",
  )
document
  .querySelector(".morph-shape")
  .setAttribute(
    "data-morph-reset",
    "M286.5,113c0,0-104,0-136.5,0c-35.75,0-136.5,0-136.5,0s0-39.417,0-52.5c0-12.167,0-48.5,0-48.5s101.833,0,136.5,0c33.583,0,136.5,0,136.5,0s0,35.917,0,48.5C286.5,73.167,286.5,113,286.5,113z",
  )

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
var path = document.createElementNS("http://www.w3.org/2000/svg", "path")

document.querySelector(".morph-shape").appendChild(svg)
document.querySelector(".morph-shape svg").appendChild(path)

document
  .querySelector(".morph-shape svg path")
  .setAttribute(
    "d",
    "M286.5,113c0,0-104,0-136.5,0c-35.75,0-136.5,0-136.5,0s0-39.417,0-52.5c0-12.167,0-48.5,0-48.5s101.833,0,136.5,0c33.583,0,136.5,0,136.5,0s0,35.917,0,48.5C286.5,73.167,286.5,113,286.5,113z",
  )
;(function () {
  function extend(a, b) {
    for (var key in b) {
      if (b.hasOwnProperty(key)) {
        a[key] = b[key]
      }
    }
    return a
  }

  function SVGButton(el, options) {
    this.el = el
    this.options = extend({}, this.options)
    extend(this.options, options)
    this.init()
  }

  SVGButton.prototype.options = {
    speed: {
      reset: 800,
      active: 150,
    },
    easing: {
      reset: mina.elastic,
      active: mina.easein,
    },
  }

  SVGButton.prototype.init = function () {
    this.shapeEl = this.el.querySelector("span.morph-shape")

    var s = Snap(this.shapeEl.querySelector("svg"))
    this.pathEl = s.select("path")
    this.paths = {
      reset: this.shapeEl.getAttribute("data-morph-reset"),
      active: this.shapeEl.getAttribute("data-morph-active"),
    }

    this.initEvents()
  }

  SVGButton.prototype.initEvents = function () {
   ...