How to lay out such elements (text, through the letters of which the picture is visible; a button, an arrow inside it that goes beyond the border of the button)?

Question

css

Good day to all!

How to lay out such elements:

1. The first letters of the text are highlighted in a different color (Active Trust logo)
2. The text through the symbols of which the picture is visible (The Active Trust heading comes after "Digital-agency")
3. Incomplete underlining of the Active Trust Heading (like border- bottom is not suitable).
4. Text folded into a circle, through the characters of which a visible picture is visible (in the second block Digital Agency Active Trust)
5. Button, inside which is a picture or an arrow symbol, the end of which goes beyond this button.

Answer 1

svg + css + html
1. ::first-letter
2. https://codepen.io/phpcodertech/pen/ZEQYBgQ
3. ::afer
4. https://css-tricks.com/snippets/svg/curved- text-al...
5. ::after, ::before and others like them
In general, there are more than 1 implementation options for each question. I recommend, as always, to smoke specifications - at least mdn. I took the answers not from my head, but from Google - if you haven’t been banned there, you can see)