Simple way set watermark background image with SVG

ihavecoke profile image mixbo ・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

Posted on Jun 3 by:

ihavecoke profile



Web developer in Longbridge


markdown guide