mask experiment

by Richard Hunter

HTML

<div class="alpha">
    <div class="alpha-inner">
     
            <h2>hello i love you</h2> 
            <h3>goodbye</h3>
        <p>jldjf jdlkfjd </p>
           <p>jldjf jdlkfjd </p>
           <p>jldjf jdlkfjd </p>
           <p>jldjf jdlkfjd </p>
           <p>jldjf jdlkfjd </p>
            <p>jldjf jdlkfjd </p>

      
    
    </div>
<svg width="100%"
	height="100%"
	viewBox="0 0  1885.4 1066">
    <path class="st1" d="M468.4,0C458.3,0.6,372,23,221.1,558.5c0,0-94.6,387.1-221.1,507.3v0.2h1408v-0.2
			c126.5-120.2,221.1-507.3,221.1-507.3C1779.9,23,1866.3,0.6,1876.4,0H468.4z" fill='orange' />
</svg>
</div>
<div class='beta'>
    </beta>

SCSS

svg {
    
    width : 100%;
}
.alpha {
    float : left;
    z-index : 1;
    width : 160vh;
    font-size : 6px;
    position : relative;
    border  : solid 1px grey;
}
.alpha-inner {

    position : absolute;
    overflow : visible;
    text-align : center;
    right : 50%;
    & > * {
        position : relative;
        left : 50%;
    }

}
.beta {

    width : 30%;
    height : 200px;
    transform : translate(-100px);
    float : left;
    background : yellow;
}