the code for this heading seen in first img

[Rēsh-1]

i stole this shit from the oceanbound theme

[Rēsh-1]

<h1>test</h1>

<style>

/* credits to EstrellaYoshite for the heading + theme ref */

:root {
 --heading-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Cpath d='M1 6a5 5 0 0 0 5-5 5 5 0 0 0 5 5 5 5 0 0 0-5 5 5 5 0 0 0-5-5z' style='fill:none;stroke:%23000;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none'/%3E%3C/svg%3E");
} /* yes you'll need a heading mask for this, which is the sparkle seen next to the name */

h1 {
    display: flex;
    align-items: center;
    column-gap: 0.325rem;
    color: #000;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 2.675em;
    line-height: 1;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0.425em;
}
:is(h1)::before,
:is(h1)::after {
    content: "";
    display: block;
    height: 0.1rem;
    min-width: 2.5rem;
    flex-grow: 1;
    background: currentColor;
    order: 1;
}
:is(h1)::before {
    flex-grow: 0;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    -webkit-mask-image: var(--heading-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--heading-mask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

</style>