Как выполнен этот курсор?

Question

Я хочу повторить эффект с сайта https://www.peststopboys.co.uk/

Сами фигурки на фоне не интересны

Заинтересовал эффект в курсоре ...понятно что там шейп с animation а вот в центре этого шейпа есть точка и при движении мышкой эта точка растягивается как червячок ..очень забавный эффект но повторить его я не могу ...

Сам вопрос родился от сюда: Как сделать красивый ховер эффект на текст с изменением цвета текста внутри?

Я позднее ответ чуть переделал чем в ответе и получил некий результат но вот эта мелкая деталька не даёт покоя -

Как делается такой червячок ?

Моя реализация с анимированный курсором кроме червячка

let item = document.querySelector(".animate-element");
let body = document.querySelector("body");

let x = body.getBoundingClientRect().x;
let y = body.getBoundingClientRect().y;



body.onmousemove = function(e) {

  item.style.position = "fixed"
  item.style.left = e.x - 150 + "px";
  item.style.top = e.y - 150 + "px";
}

body {
  position: relative;
  cursor: none;
  filter: url(#goo);
  -webkit-filter: url(#goo);
}

.animate-element {
  width: 300px;
  transition: 0.14s linear;
}

.goo {
  position: fixed;
  top: 50%;
  left: 50%;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" class="goo">
			  <defs>
			    <filter id="goo">
			      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
			      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -15" result="goo"></feColorMatrix>
			      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
			    </filter>
			  </defs>
			</svg>

<svg viewBox="0 0 300 300" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0,3)">
  <g stroke-width=".26458">
   <path d="m24.19 19.565h70.304v152.7h-70.304z" fill="#ff2a2a"/>
   <path d="m171.6 166.98-30.187-141.32 137.48 44.518z" fill="#0ff"/>
   <path d="m123.22 166.98h3.7821c24.708 0 44.6 19.892 44.6 44.6v34.02c0 24.708-19.892 44.6-44.6 44.6h-3.7821c-24.708 0-44.6-19.892-44.6-44.6v-34.02c0-24.708 19.892-44.6 44.6-44.6z" fill="#ff0"/>
  </g>
 </g>
</svg>

<div class="animate-element">
  <svg viewBox="0 0 300 300">
  <path d="M 253.24403,163.95239 A 114.90475,106.58929 0 0 1 138.33928,270.54168 114.90475,106.58929 0 0 1 23.434532,163.95239 114.90475,106.58929 0 0 1 138.33928,57.363106 114.90475,106.58929 0 0 1 253.24403,163.95239 " fill="rgba(0,255,0,0.6)" class="anim">
    <animate attributeName="d"
             dur="3s"
             begin="0s"
             values="m 253.24403,163.95239 c 0,58.86764 -51.44461,106.58929 -114.90475,106.58929 -63.46014,0 -113.098711,-47.74936 -114.904748,-106.58929 -1.854318,-60.4129 42.237174,-114.262147 114.904748,-106.589284 63.10931,6.66362 114.90475,47.721644 114.90475,106.589284 z;M 253.24403,163.95239 C 248.34588,222.6159 201.79942,270.54168 138.33928,270.54168 74.87914,270.54168 25.240569,222.79232 23.434532,163.95239 21.580214,103.53949 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 258.39831,102.22126 253.24403,163.95239 Z;M 253.24403,163.95239 C 263.32846,226.55868 223.5326,264.18332 138.33928,270.54168 55.700924,276.70935 23.289514,224.566 23.434532,163.95239 23.579137,103.51121 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 243.39295,102.79476 253.24403,163.95239 Z;M 253.24403,163.95239 C 248.34588,222.6159 200.57626,258.14218 138.33928,270.54168 57.068323,286.73333 23.289514,224.566 23.434532,163.95239 23.579137,103.51121 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 258.39831,102.22126 253.24403,163.95239 Z;M 253.24403,163.95239 A 114.90475,106.58929 0 0 1 138.33928,270.54168 114.90475,106.58929 0 0 1 23.434532,163.95239 114.90475,106.58929 0 0 1 138.33928,57.363106 114.90475,106.58929 0 0 1 253.24403,163.95239 "
             repeatCount="indefinite" />
  </path>
  <path fill="red" d="M 92.22618,159.41668 A 15.497022,13.607142 0 0 1 76.729158,173.02382 15.497022,13.607142 0 0 1 61.232136,159.41668 15.497022,13.607142 0 0 1 76.729158,145.80953 15.497022,13.607142 0 0 1 92.22618,159.41668 Z">
       <animate attributeName="d"
             dur="3s"
             begin="0s"
             values="m 92.22618,159.41668 c -7.015842,2.69322 -6.938254,13.60714 -15.497022,13.60714 -8.558768,0 -15.497021,-6.09212 -15.497022,-13.60714 -5e-6,-7.51502 7.003489,-12.5524 15.497022,-13.60715 37.200652,-4.61966 49.259242,0.64661 15.497022,13.60715 z;m 92.22618,159.41668 c 8.30303,8.62209 13.81279,16.37395 -15.497022,13.60714 -8.520887,-0.80436 -15.497021,-6.09212 -15.497022,-13.60714 -5e-6,-7.51502 6.93825,-13.60715 15.497022,-13.60715 8.558772,0 10.284199,8.19402 15.497022,13.60715 z;m 92.22618,159.41668 c -10e-7,7.51502 -7.557009,10.41203 -15.497022,13.60714 -21.591714,8.68863 -19.572869,-3.37489 -15.497022,-13.60714 2.780975,-6.98153 6.93825,-13.60715 15.497022,-13.60715 8.558772,0 15.497027,6.09213 15.497022,13.60715 z;M 92.22618,159.41668 A 15.497022,13.607142 0 0 1 76.729158,173.02382 15.497022,13.607142 0 0 1 61.232136,159.41668 15.497022,13.607142 0 0 1 76.729158,145.80953 15.497022,13.607142 0 0 1 92.22618,159.41668 Z "
             repeatCount="indefinite"
                class="goo2"/> 
  </path>
</svg>
</div>

Answer 1

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
let width = canvas.width = innerWidth
let height = canvas.height = innerHeight
/* -------------------------------------------- */

const mouse = { x: 0, y: 0 }
const points = []
const numPoints = 6
const ease = 0.7
const radius = 15

for (let i = 0; i < numPoints; i++) points.push({ x: 0, y: 0 })

onmousemove = e => {
  mouse.x = e.x
  mouse.y = e.y
}

function update() {
  context.clearRect(0, 0, width, height)

  const head = { x: mouse.x, y: mouse.y }

  points.forEach((point, i) => {
    point.x += (head.x - point.x) * ease
    point.y += (head.y - point.y) * ease

    context.beginPath()
    context.arc(point.x, point.y, radius - i, 0, Math.PI*2, false)
    context.fill()

    head.x = point.x
    head.y = point.y
  })

  requestAnimationFrame(update)
}

update()

/* -------------------------------------------- */
onresize = () => {
  width = canvas.width = innerWidth
  height = canvas.height = innerHeight
}

html,body {
  margin: 0;
  cursor: none;
}

canvas {
  display: block;
}

<canvas id="canvas"></canvas>

Answer 2

Я это сделал на javascript и обычных блоках + transitionDelay

let item = document.querySelectorAll(".circle");
let body = document.querySelector("body");
let sec = 0.0016;

body.onmousemove = function(e) {
  item.forEach(function(el, index) {
    el.style.position = "absolute"
    el.style.left = e.clientX - 0.2 + "px";
    el.style.top = e.clientY - 0.2 + "px";
    el.style.transitionDelay = `${sec * index/1.4}s`;
  })
}

html,
body {
  height: 100%;
  margin: 0;
}

.item {
  width: 30px;
  height: 30px;
  position: relative;
}

.item .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transition: 0.03s ease;
  transform: translate(-50%, -50%);
  background: #000;
}

.c1 {
  width: 25px;
  height: 25px;
  z-index: 10;
}

.c2 {
  width: 24px;
  height: 24px;
  z-index: 9;
}

.c3 {
  width: 23px;
  height: 23px;
  z-index: 8;
}

.c4 {
  width: 22px;
  height: 22px;
  z-index: 7;
}

.c5 {
  width: 21px;
  height: 21px;
  z-index: 6;
}

.c6 {
  width: 20px;
  height: 20px;
  z-index: 5;
}

.c7 {
  width: 19px;
  height: 19px;
  z-index: 4;
}

.c8 {
  width: 18px;
  height: 18px;
  z-index: 3;
}

.c9 {
  width: 17px;
  height: 17px;
  z-index: 2;
}

.c10 {
  width: 16px;
  height: 16px;
  z-index: 1;
}

<div class="item">
  <div class="circle c1"></div>
  <div class="circle c2"></div>
  <div class="circle c3"></div>
  <div class="circle c4"></div>
  <div class="circle c5"></div>
  <div class="circle c6"></div>
  <div class="circle c7"></div>
  <div class="circle c8"></div>
  <div class="circle c9"></div>
  <div class="circle c10"></div>
</div>

БЛОГ НА HUSL

Как выполнен этот курсор?

Ответы (2 шт):