<svg width="100%" height="100%">
  
  <pattern id="pattern-circles" 
           x="0" 
           y="0" 
           width="20" 
           height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
     <circle id="pattern-circle" cx="10" cy="10" r="10" fill= "#f06d06" />
  </pattern>
  
  <rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" />
  
</svg>

body,
html {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

svg {
  display: block;
}

var pattern = $("#pattern-circles");
var circle = $("#pattern-circle");

var PatternTester = function() {
  this.patternUnits = 'userSpaceOnUse';
  this.patternContentUnits = 'userSpaceOnUse';
  
  this.patternX = 0;
  this.patternY = 0;
  this.patternHeight = 20;
  this.patternWidth = 20;
  
  this.circleCX = 10;
  this.circleCY = 10;
  this.circleR = 10;
};

var text = new PatternTester();
var gui = new dat.GUI();

var patternXController = gui.add(text, 'patternX', 0, 50);
var patternYController = gui.add(text, 'patternY', 0, 50);
var patternWidthController = gui.add(text, 'patternWidth', 0, 50);
var patternHeightController = gui.add(text, 'patternHeight', 0, 50);

var cirlcleCXController = gui.add(text, 'circleCX', 0, 50);
var cirlcleCYController = gui.add(text, 'circleCY', 0, 50);
var cirlcleRController = gui.add(text, 'circleR', 0, 50);

var patternUnitsController = gui.add(text, 'patternUnits', ['userSpaceOnUse', 'objectBoundingBox']);
var patternContentUnitsController = gui.add(text, 'patternContentUnits', ['userSpaceOnUse', 'objectBoundingBox']);

patternUnitsController.onChange(function(value) {
  pattern[0].setAttribute("patternUnits", value);
});
patternContentUnitsController.onChange(function(value) {
  pattern[0].setAttribute("patternContentUnits", value);
});
patternXController.onChange(function(value) {
  pattern.attr("x", value);
});
patternYController.onChange(function(value) {
  pattern.attr("y", value);
});
patternWidthController.onChange(function(value) {
  pattern.attr("width", value);
});
patternHeightController.onChange(function(value) {
  pattern.attr("height", value);
});
cirlcleCXController.onChange(function(value) {
  circle.attr("cx", value);
});
cirlcleCYController.onChange(function(value) {
  circle.attr("cy", value);
});
cirlcleRController.onChange(function(value) {
  circle.attr("r", value);
});