ARTICLE AD BOX
The problem it that the text doesn't cut off like 2nd image there is some text and there is the "din" "ordin" How would I write the code that does this cutting automatically?
I tried to code this myself, but it didn't work (code below)
I want it to automatically set as the background and look like the image down bellow.
Figure 1
Figure 2
(function(){
const name = 'fjordin';
const bgColor = 'hsl(210 80% 45%)';
const repeat = (word, times) => Array(times).fill(word).join(' ');
const line1 = repeat(name, 100);
const line2 = 'din ' + repeat(name, 100) + ' fjor';
const line3 = 'ordin ' + repeat(name, 100);
const svg = `<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200px'>
<text x='15' y='27%' fill='white' font-size='4rem' font-weight='600' opacity='0.1' font-family='Roobert,Helvetica Neue,Helvetica,Arial,sans-serif'>${line1}</text>
<text x='5' y='60%' fill='white' font-size='4rem' font-weight='600' opacity='0.1' font-family='Roobert,Helvetica Neue,Helvetica,Arial,sans-serif'>${line2}</text>
<text x='0' y='93%' fill='white' font-size='4rem' font-weight='600' opacity='0.1' font-family='Roobert,Helvetica Neue,Helvetica,Arial,sans-serif'>${line3}</text>
</svg>`;
const encoded = encodeURIComponent(svg)
.replace(/'/g, '%27').replace(/"/g, '%22');
const css = `
background-color: ${bgColor};
background-image: url("data:image/svg+xml,${encoded}");
background-repeat: repeat;
background-size: auto;
`;
document.documentElement.style.setProperty('--generated-bg', css);
document.body.style.cssText += css;
})();
