Arthur's questions

const btn = document.querySelector('div[role="button"]');
const micro = document.querySelectorAll('.micro');
btn.onclick = () => {
  micro.forEach((e) => {
    e.beginElement();
  });
}

div[role="button"] {
  border: 0.0625rem solid;
  width: 68px;
  font-size: 0;
}

<div role="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="68" height="68" viewBox="0 0 24 24">
    <g>
    <rect id="top-part" x="9" y="3.5" width="6" height="12" rx="3" fill="#5A8CF6"/>
      <animate class="micro" xlink:href="#top-part" attributeName="height" from="12" to="6" dur="400ms" begin="indefinite" fill="freeze" />
      <animate class="micro" id="drill" xlink:href="#top-part" attributeName="y" from="3.5" to="9" begin="indefinite" dur="400ms" fill="freeze" />
    </g>
    <g stroke="#5A8CF6" fill="none">
      <g>
        <circle id="baloon" cx="12" cy="12" r="6" stroke-width="1.5" stroke-dasharray="37.7" stroke-dashoffset="18.8"/>
        <animate xlink:href="#baloon" attributeName="stroke-dashoffset" from="18.8" to="0" dur="300ms" begin="drill.end" fill="freeze"/>
      </g>
      <g>
        <rect id="leg" x="11" y="18" width="2" height="4" fill="#5A8CF6" stroke="none" transform-origin="top"/>
        <animate class="micro" xlink:href="#leg" attributeName="height" from="4" to="0" dur="400ms" begin="indefinite"  fill="freeze" />
      </g>
    </g>
  </svg>
</div>

document.querySelector('button').onclick = () => {
  document.querySelector('#AM').setAttribute('xlink:href', '  ');
};

<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 0.0625rem solid">
    <g class="main-area">
      <path d="M0 75L300 75" fill="none" stroke="red" id="AMP"/>
      <rect x="0" y="0" width="50" height="50" id="TrO" transform="translate(0 -25)"/>
      <animateMotion id="AM" xlink:href="#TrO" begin="0s" dur="3s" repeatCount="indefinite">
        <mpath xlink:href="#AMP"/>
      </animateMotion>
    </g>
  </svg>
  <button>Stop</button>
</div>

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

.button {
  width: auto;
  display: inline-block;
  padding: 1.35rem 1.6rem;
  background-color: hsl(214, 100%, 50%);
  border-radius: 0.3rem;
  white-space: nowrap;
  text-align: center;
  font-size: initial;
  font-family: "RobotoMedium";
  user-select: none;
  cursor: pointer;
  color: #fff;
}

.medium-btn {
  width: 13rem;
}

<div class="button medium-btn" role="button">
  <span class="fw-medium fs-16 c-white">Continue</span>
  <div class="icon button-arrow">
    <svg width="36" height="20" viewBox="0 0 36 20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <line x1="4" y1="10" x2="31" y2="10"/>
    <polyline points="26,7 31,10 26,13"/>
  </svg>
  </div>
</div>

#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height 100%;
  border: 1px solid red;
}

<script src="https://cdn.jsdelivr.net/npm/paper@0.11.5/dist/paper-full.min.js"></script>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
   
  var points = 10;
  var length = 15;

  var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 2,
    strokeCap: 'round'
  });

  var start = view.center / [10, 1];
  for (var i = 0; i < points; i++)
    path.add(start + new Point(i * length, 0));

  function onMouseMove(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
      var segment = path.segments[i];
      var nextSegment = segment.next;
      var vector = segment.point - nextSegment.point;
      vector.length = length;
      nextSegment.point = segment.point - vector;
    }
    path.smooth();
  }
</script>

var el = document.querySelector('.magnetic-button');

var options = {
  ease: 0.1,
  magneticForce: 0.6
};

var mouse = {
  x: 0,
  y: 0
};

var pos = {
  cx: 0,
  cy: 0,
  tx: 0,
  ty: 0,
  x: 0,
  y: 0
};

var sizes = el.getBoundingClientRect();

observe();
update();

function observe() {
  window.addEventListener('resize', resizeHandler, false);
  el.addEventListener('mousemove', mouseMoveHandler, false);
  el.addEventListener('mouseleave', mouseLeaveHandler, false);
}

function resizeHandler() {
  sizes = el.getBoundingClientRect();
}

function mouseMoveHandler(e) {
  //sizes

  mouse.x = e.pageX;
  mouse.y = e.pageY;

  // center

  pos.cx = sizes.left + sizes.width / 2;
  pos.cy = sizes.top + sizes.height / 2;

  // dist

  var distX = mouse.x - sizes.left - sizes.width / 2;
  var distY = mouse.y - sizes.top - sizes.height / 2;

  pos.tx = distX - distX * (1 - options.magneticForce);
  pos.ty = distY - distY * (1 - options.magneticForce);
}

function mouseLeaveHandler(e) {
  pos.tx = 0;
  pos.ty = 0;
}

function render() {

  pos.x += (pos.tx - pos.x) * options.ease;
  pos.y += (pos.ty - pos.y) * options.ease;

  var transform2 = 'translateX(' + pos.x + 'px) translateY(' + pos.y + 'px)';

  el.style.webkitTransform = transform2;
  el.style.MozTransform = transform2;
  el.style.msTransform = transform2;
  el.style.OTransform = transform2;
  el.style.transform = transform2;
}

function update() {
  render();
  window.requestAnimationFrame(update);
}

.social-nets {
  display: flex;
}

.magnetic-button {
  margin-left: 1rem;
  position: relative;
  width: 3.3333333333rem;
  height: 3.3333333333rem;
  background-color: #b3b3b3;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.magnetic-button::before,
.magnetic-button:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  will-change: transform;
  z-index: -1;
}

.magnetic-button::before {
  background-color: red;
}

.magnetic-button:hover::before {
  transform: scale(0.95);
}

.magnetic-button:hover::after {
  transform: scale(0.85);
}

<div class="social-nets">
  <div class="magnetic-button"></div>
  <div class="magnetic-button"></div>
  <div class="magnetic-button"></div>
</div>