background base64 generator 2

by Dörnesz Tamás

HTML

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100' height='100'>
<filter id='n' x='0' y='0'>
<feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='10' stitchTiles='stitch'/>
</filter>
<rect width='100' height='100' filter="url(#n)" opacity='0.3'/>
</svg>

<!-- This is used for output -->
<div id="demo"><pre id="code">
[base64]
</pre></div>

CSS

html {
  height: 100%; width: 100%;
  background:#040404;
}
#demo {
  position: absolute;
  top: 0px; left: 0px;
  right: 0px; bottom: 0px;
}
#code {
  border: 1px solid #000;
  background-color: rgba(255,255,255,0.95);
  padding: 0.5em;
  margin: 1em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
svg {
  display: none;
}

JavaScript

// Short script to encode our SVG in base64
// This can be reversed using window.atob('base64')
var code = document.getElementById('code');
var demo = document.getElementById('demo');
var svg = document.getElementsByTagName('svg')[0];

// Convert the SVG node to HTML.
var div = document.createElement('div');
div.appendChild(svg.cloneNode(true));

// Encode the SVG as base64
var b64 = 'data:image/svg+xml;base64,'+window.btoa(div.innerHTML);
var url = 'url("' + b64 + '")';
code.innerHTML = 'Base64 CSS (for cross-browser compatibility)\n\nbackground-image: ' + url + ';';
demo.style.backgroundImage = url;