SVG and CSS Gradient background

dabblet.css

/**
 * SVG and CSS Gradient background
 */
html,body{
  padding:0;
  margin:0;
  height:100%;
  background-color:#000;
}
body{  
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MCcgaGVpZ2h0PSc5NCc+DQogICAgPHBvbHlsaW5lIGZpbGw9J25vbmUnIHN0cm9rZT0nI0ZGRkZGRicgc3Ryb2tlLXdpZHRoPScyJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIHBvaW50cz0nMzYuNTU2LDExLjUgMTMuNTU2LDQ3IDM2LjU1Niw4Mi40OTkgJyAvPg0KPC9zdmc+DQo="), radial-gradient(ellipse at center, #7691d7 0%, #1f3774 100%);
    box-shadow:inset 50px 50px 150px 0px rgba(0, 0, 0, 0.5), inset -50px -50px 150px 0px rgba(0, 0, 0, 0.5);
    background-size:auto, 100%;
    background-repeat: repeat, no-repeat;
    background-position: center center;
}
h1{
  margin:0;
  padding:10px;
  color:#fff;
  width:50%;
  position:absolute;
  left:50%;
  top:50%;
  text-align:center;
  transform: translate(-50%, -50%);
  background:rgba(0,0,0,0.7);
  border-radius:10px;
}

dabblet.html

<h1>This is an SVG and CSS Gradient background</h1>

dabblet.js

console.log("doesn't this work in IE9! #FFS");

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"javascript"}