Simple way set watermark background image with SVG

If you set page background with watermark like post screenshot. you can follow my code :)

// js

const markTemplate = (name) => {
  return `<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgba(45,45,45,0.08)' font-size='18'>${name}</text></svg>`;
};

const base64Mark = btoa(markTemplate("ihavecoke"));

document.body.style.backgroundImage = `url("data:image/svg+xml;base64,${base64Mark}")`;

All is done, you can copy code then paste to chrome devtools console tab run it. dev.to background will changed :)

Refactor marketTemplate method custom more SVG attributes like font-size, width, height etc aslo good idea.

If you need same features hope help you :)

PS: You can found online Demo