CSS SVG Wave shape - css

Question

that's the result I'm trying to achieve
and here's what I've done: https://codepen.io/demedos/pen/gjQNOM
HTML structure:
.container
.header
.page-1
#wave
#dot
#text
There is some problem though:
Items are positioned using absolute positioning, while I want them anchored to the main wavy line
Containers are smaller than their content
I want the line to be at 50% of the screen, filling the above space with its background color

Answer 1

Here's a solution using a little bit of Javascript. I've simplified your example to keep things clear.
I want the line to be at 50% of the screen, filling the above space with its background color
We use a vertical flex box arrangement to fill the height of the screen.
We set the viewBox to fit the wave curve and let the browser do normal SVG centering.
We use a very tall wave path and rely on SVG overflowing to make the wave fill to the top of the cell.
We use SVGPathElement.getPointAtLength() to calculate the correct position on the path for each dot.
function positionDot(dotId, fractionAlongWave) {
// Get a reference to the "wave-curve" path.
var waveCurve = document.getElementById("wave-curve");
// Get the length of that path
var curveLength = waveCurve.getTotalLength();
// Get the position of a point that is "fractionAlongWave" along that path
var pointOnCurve = waveCurve.getPointAtLength(curveLength * fractionAlongWave);
// Update the dot position
var dot = document.getElementById(dotId);
dot.setAttribute("cx", pointOnCurve.x);
dot.setAttribute("cy", pointOnCurve.y);
}
// Position the first dot 25% the way along the curve
positionDot("dot1", 0.25);
// Position the second dot 90% of the way along the curve
positionDot("dot2", 0.90);
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
width: 640px;
height: 100vh;
margin: 0 auto;
border: 1px solid blue;
}
.header {
background-color: #333835;
}
.page-1 {
flex: 1;
border: 1px solid red;
position: relative;
}
.page-1 svg {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid red;
}
#wave {
fill:#333835;
}
#dot1,
#dot2 {
fill:#e05a5a;
}
<div class='container'>
<div class='header'>
header
</div>
<div class='page-1'>
<!-- Set the viewBox to match the curve part of the wave.
Then we can rely on the browser to centre the SVG (and thus the curve) in the parent container. -->
<svg viewBox="0 342 1366 283">
<defs>
<!-- A copy of the curve part of the wave, which we will use to calculate
the correct position of the dot using getPointAtLength(). -->
<path id="wave-curve" d="M0,342c595,0,813,283,1366,283"/>
</defs>
<!-- SVGs are "overflow: visible" by default.
If we make this path extend vertically a long way, it will fill to the
top of the SVG no matter how high the page is. -->
<path id="wave" d="M0,342c595,0,813,283,1366,283 V -10000 H 0 Z"/>
<circle id="dot1" cx="0" cy="0" r="12.5"/>
<circle id="dot2" cx="0" cy="0" r="12.5"/>
</svg>
</div>
</div>