<a href="/" class="logo__link">
    <span class="logo__name-pseudo">Piranhas</span>
    <span class="logo__name-top">Piranhas</span>
    <span class="logo__name-bottom">Piranhas</span>
</a>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #120a8f;
}
.logo__link {
position: relative;
color: #ffff00;
font-family: Outfit, Helvetica, sans-serif;
font-style: italic;
font-size: 5rem;
font-weight: 900;
text-decoration: none;
}
.logo__name-top {
position: absolute;
top: 0;
right: 0.05em;
clip-path: inset(0% -5% round(down, 40%, 1px) 0%);
}
.logo__name-bottom {
position: absolute;
top: 0;
right: 0;
clip-path: inset(round(down, 60%, 1px) -5% 0% 0%);
}
.logo__name-pseudo {
    visibility: hidden;
}