DEV Community

loading...

Simple way set watermark background image with SVG

mixbo
Web developer in Longbridge
・1 min read

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

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

Discussion (0)

Forem Open with the Forem app