Problem with duplicate SVG in multiple pages and z-indexing

I am loading an SVG text effect into a couple of pages and I have the problem of multiple SVGs now loading into the header - I understand why but not how to fix it.

I am putting the SVG markup into the text editor, so with several pages using it I have several copies in the header.

You can see the effect here as 'future ready': https://leslieh7.sg-host.com/

This is the SVG markup:

<mark><span>future-ready</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 60" preserveaspectratio="none" stroke="#e6176f" stroke-opacity="0"></svg><br /><path d="m 3.518915,27.827324 c 55.429038,4.081 111.581115,5.822 167.117815,2.867 22.70911,-1.208 45.39827,-0.601 68.126,-0.778 28.38172,-0.223 56.76078,-1.024 85.13721,-1.33 24.17378,-0.261 48.4273,0.571 72.58114,0.571"></path><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 60" preserveaspectratio="none" stroke="#e6176f" stroke-opacity="0.35"></svg></mark>

This is the CSS I am using:

mark {
    position: relative;
    display: inline-block;
    background: none;
    font-family: Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman",serif;
    /* Responsive typography */
    line-height: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
    outline: none;
    color: #000;
    color: rgba(0, 0, 0, 0.9);
    text-decoration: none;
    white-space: nowrap;
}

span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 0.1em;
    pointer-events: none;
}

svg {
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    z-index: -1;
    overflow: hidden;
    margin: auto;
    padding: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 54px;
    /* height from "svg" x 1.125 */
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 400ms ease-in-out;
/*   transition-delay: 1000ms; */
  animation: 2s ease-in;
    will-change: stroke-dashoffset;
    pointer-events: none;
}

svg:first-of-type {
    width: 105.5%;
    height: 104%;
    transform: skewX(-17deg);
}

svg:last-of-type {
    width: 104%;
    transform: skewX(-12deg);
}

/* mark:hover > svg {
    stroke-dashoffset: 0;
} */

mark > svg {
    stroke-dashoffset: 0;
}

My second problem is that the SVG file is covering the entirety of the page and preventing the cookie consent button from working.

Pages not loading the SVG are not experiencing the same problem: https://leslieh7.sg-host.com/contact/

I'm just beginning to learn about SVG so any advice on how I can load this file once and manage the z-indexing would be really appreciated.

Cheers,

Sven