Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<!-- Edit this and the preview will update automatically. -->
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100'>
<rect width='56' height='100' fill='#f8d203'/>
<path d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='#fff629' stroke-width='2'/>
<path d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='#ffe503' stroke-width='2'/>
</svg>
<!-- https://github.com/progers/Patterns-Gallery -->
<!-- Do not edit below, just used for the preview. -->
<div id="code">
[base64]
</div>
<style>
#code {
  border: 1px solid #000;
  background-color: rgba(255,255,255,.9);
  font-family: monospace;
  margin: 1em;
  padding: .5em;
  word-break: break-all;
}
svg { display: none; }
html { width: 100%; height: 100%; }
</style>
<script>
// Encode an SVG element as a base64 data uri.
function svgToBase64Image(svgElement) {
  var div = document.createElement('div');
  div.appendChild(svgElement.cloneNode(true));
  var b64 = window.btoa(div.innerHTML);
  return 'data:image/svg+xml;base64,' + b64;
}
var svgs = document.getElementsByTagName('svg');
var urls = [];
for (var i = 0; i < svgs.length; i++)
  urls.push('url("' + svgToBase64Image(svgs[i]) + '")');
var url = urls.join(',');
var msg = 'Base64 CSS image (for cross-browser support):' +
          '<br><br>background: ' + url + ';';
document.getElementById('code').innerHTML = msg;
document.body.style.background = url;
</script>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
progerspro
0viewers