this took me too long so I come here for help. I want to have multiple lines like this, connected to the text. But they dont on other monitor sizes. Anyone who can help??
:root {
--color-background: black;
--color-on-background: white;
}
body {
width: 100vw;
height: auto;
background-color: var(--color-background);
}
.hero_page {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.hero_page_title {
font-family: title;
font-size: 25vh;
fill: var(--color-on-background);
text-align: center;
text-anchor: middle;
dominant-baseline: middle;
}
.line {
fill: none;
stroke: var(--color-on-background);
stroke-width: 0.3vh;
}
.filled {
fill: var(--color-on-background);
stroke: none;
}<html>
<body>
<div class="hero_page">
<svg width="100vw" height="100vh" viewbox="0 0 2000 1000" preserveAspectRatio="xMidYMid meet">
<polyline class="line" points="0,170 300,170 320,192 370,192 390,170 600,170 691,400"></polyline>
<text class="hero_page_title" x="50%" y="50%">OSKAR KOPČIL</text>
</svg>
</div>
</body>
</html>