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
Top comments (0)