DEV Community 👩‍💻👨‍💻

mixbo
mixbo

Posted on

Simple way set watermark background image with SVG

Alt Text

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}")`;

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs