RAX7

Держи, немного поправил один из своих старых набросков.

Принцип работы примерно, как описал Максим Морев в своем ответе.

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

"emmet.syntaxProfiles": {
  "html": {
    "inline_break": 1
  }
},

.text p {
  display: inline-block;
  position: relative;
}

.text p::before {
  content: '';
  position: absolute;
  left: -30px;
  right: -30px;
  top: -10px;
  height: 6px;
  background: radial-gradient(circle, #000 2px, transparent 3px) space center / 10px 6px;
  opacity: 0.3;
}

Убери из названия слово banner, adBlock и Ghostery блочат загрузку этого изображения.

Старый edge не поддерживает свойство transform-box из-за чего transform: rotate(XXdeg) работает не так, как было задумано. Пофиксить можно используя старый трюк для вращения объекта вокруг нужной точки https://developer.mozilla.org/en-US/docs/Web/API/C... (там метод для канвас, но также работает и в svg).
На примере поправил .man-hand.

Для удобства вычисления transform: translate используй инструменты разработчика в хроме: выдели нужный path и в консоле введи $0.getBBox().x + $0.getBBox().width/2 - получишь значение для сдвига по оси X. По оси Y используй $0.getBBox().y + $0.getBBox().height/2

Так?

.wrapper {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.test2 {
  width: calc(100% - 2 * 100px - 2 * 5px); /* 100% - left - right - marginLeft - marginRight */
  margin: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

https://github.com/emmetio/npp

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

Дождись когда page.render отрисует pdfку на холсте, после этого уже можно будет использовать canvas.toDataURL.

const renderTask = page.render(renderContext).promise;

renderTask.then(() => {
  var img = new Image();
  img.src = canvas.toDataURL();
  img.onload = () => document.body.appendChild(img);
});

Открой картинку (gradient_copy.png) в фотошопе и обрежь у нее прозрачные края.