Максим

https://css-tricks.com/gooey-effect/

Не так ? С vue я не особо знаком, так что чисто на JS.
Грубовато написано, но общий смысл, вроде должен быть понятен - запоминаем с каким-то периодом все "круги", по таймеру увеличиваем прозрачность "кругов", по мере переполнения - выкидываем лишние "круги". Самый верхний круг рисуем как и раньше - по движению мыши.
Сейчас всего 15, период 20

Например так



Для любого угла градиента

Ну например через transform и математику

Или через grid

Или просто в 3 ряда на flex

clip-path прекрасно умеет скруглять, rtfm.

Вот через фильтр, когда-то похожее делал:

Принцип прост: размываешь подложку через feGaussianBlur, делаешь края снова резкими через ComponentTransfer альфа-канала. В твоём случае ещё stroke и drop-shadow наверное понадобятся, сам смотри.

...upd: из интереса нафигачил без фильтров:

Всё возможно.:)

Поигрался пут с фильтром, вот версия фильтр + простой clip-path, поддерживает полупрозрачность фона, полупрозрачность бордера и тень:

clip-path'ом вырезаем простые квадраты, фильтром закругляем. Фильтр можно в принципе применять к любому набору элементов. Версия не последняя, есть шероховатости, может ещё когда-нить потыкаю ещё.:)

вариант 1: ИМХО самый оптимальный (но криво работает с прозрачным текстом)


вариант 2: доработка напильником ответа Как в шрифте pacifico сделать при бордере, чтобы не было линий при пересечении букв?, если нужно больше контроля над обводкой

лишний visibility: hidden;

Уберите visibility: hidden из класса modal

.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0, .8);
    z-index: 2;
}

Фоновой картинкой. Попробовать варианты svg и webp, сравнить по производительности и размеру.

Если делать такие большие блюры на css, будут сильные лаги на странице.

class Typewriter {
  constructor(element, texts, speed) {
    this.element = element;
    this.texts = texts;
    this.speed = speed;
    this.index = 0;
    this.textIndex = 0;
  }

  start() {
    this.type();
  }

  type() {
    if (this.index < this.texts[this.textIndex].length) {
      this.element.innerHTML += this.texts[this.textIndex].charAt(this.index);
      this.index++;
      setTimeout(() => this.type(), this.speed);
    } else {
      this.index = 0;
      this.textIndex = (this.textIndex + 1) % this.texts.length;
      this.element.innerHTML = "";
      setTimeout(() => this.type(), this.speed);
    }
  }
}

const qualityElement = document.getElementById("quality");
const TEXTS = ["Креативность ", "Эффективность ", "Индивидуальность "];
const SPEED = 85;

const typewriter = new Typewriter(qualityElement, TEXTS, SPEED);
typewriter.start();

Строки сложить в массив. Завести два индекса - текущей строки и её последнего отображаемого символа. Если при увеличении количества отображаемых символов выходим за границу строки - переключаемся на следующую строку и сбрасываем счётчик символов.

Куда, что и с какой задержкой будем печатать:

const el = document.querySelector('p');
const strings = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];
const delay = 100;

Печатаем:

function Typewriter(el, strings, delay) {
  let i = 0;
  let length = 0;

  return setInterval(() => {
    if (++length > strings[i].length) {
      i = -~i % strings.length;
      length = 0;
    }

    el.textContent = strings[i].slice(0, length);
  }, delay);
}


const intervalId = Typewriter(el, strings, delay);
// хотим остановить, делаем так: clearInterval(intervalId);

или

function Typewriter(el, strings, delay) {
  let timeoutId = null;

  (function step(i, length) {
    length = -~length % -~strings[i].length;
    i = (i + !length) % strings.length;
    el.innerText = strings[i].substring(0, length);
    timeoutId = setTimeout(step, delay, i, length);
  })(0, 0);

  return () => clearTimeout(timeoutId);
}


const stop = Typewriter(el, strings, delay);
// хотим остановить, делаем так: stop();

String(number).padStart(2,'0')
согласно последним стандартам