DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Oldest comments (0)

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!