Как сделать такой текст?

Question

Всем привет! Как можно реализовать такой текст с помощью svg или css?

Answer 1

в CSS используя mix-blend-mode

пример:

b{
background: url(some_image.png);
}
h1{
mix-blend-mode: lighten;
}

    <b><h1>abcd</h1></b>

рабочий пример и песочница есть там: https://webref.ru/css/mix-blend-mode

Answer 2

Можно что-то такое, но как повернуть, я не придумал. Если только через path вместо ellipse, но я не уверен, получится ли там responsive.

div {
  font-size: 2em;
  white-space: pre-wrap;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  word-spacing: .5em;
  line-height: 1.5em;
  font-weight: bold;
  font-family: sans-serif;
  width: fit-content;
  margin: auto;
  position: relative;
}

div::before, div::after {
  content: attr(aria-label);
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}

div::before {
  color: transparent;
}

div::after {
  position: absolute;
  inset: 0;
  clip-path: ellipse(40% 35%);
}

<div aria-label="Текст
Текст текст текст
И ещё текст"></div>

БЛОГ НА HUSL

Как сделать такой текст?

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