Как сделать градиентную обводку символов в css? / А точнее - как сделать прозрачной внутреннюю часть символа?

Question

Делая по макету странницу столкнулся с этим: это даже не обводка - а оформление шрифта (обводка отсутствует). Задача - сделать такое в css

Answer 1

Пожалуйста

body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url(/img/1.jpg);
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.transpText {
  font-weight: bold;
  text-align: center;
  font-size: 200px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 10px orange;
}

<p class="transpText">
  02
</p>

Answer 2

Пожалуйста! Вам осталось лишь поменять цвет градиента

body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("https://img5.goodfon.ru/wallpaper/big/8/8b/linii-background-fon-geometriia.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#05a" />
                <stop offset="100%" stop-color="#0a5" />
            </linearGradient>
        </defs>
        <style>
            .myStyle {
                font: 250px sans-serif;
                fill-opacity: 0;
                font-weight: bold;
                stroke-width: 12;
                stroke: url(#linear);
                dominant-baseline: middle;
                text-anchor: middle;
            }
        </style>
        <text x="50%" y="50%" class="myStyle">02</text>
    </svg>
</body>

БЛОГ НА HUSL

Как сделать градиентную обводку символов в css? / А точнее - как сделать прозрачной внутреннюю часть символа?

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