diff --git a/src/HexGrid.js b/src/HexGrid.js
index 42d0c4a..63431dc 100644
--- a/src/HexGrid.js
+++ b/src/HexGrid.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 
 class HexGrid extends Component {
   static propTypes = {
+    preserveAspectRatio: PropTypes.string,
     width: PropTypes.oneOfType([
       PropTypes.string.isRequired,
-      PropTypes.number.isRequired,
+      PropTypes.number.isRequired
     ]),
     height: PropTypes.oneOfType([
       PropTypes.string.isRequired,
-      PropTypes.number.isRequired,
+      PropTypes.number.isRequired
     ]),
     viewBox: PropTypes.string,
     children: PropTypes.node.isRequired
@@ -18,13 +19,22 @@ class HexGrid extends Component {
   static defaultProps = {
     width: 800,
     height: 600,
-    viewBox: "-50 -50 100 100"
+    viewBox: "-50 -50 100 100",
+    preserveAspectRatio: "xMidYMid meet"
   }
 
   render() {
-    const { width, height, viewBox } = this.props
+    const { width, height, viewBox, preserveAspectRatio } = this.props
     return (
-      <svg className="grid" width={width} height={height} viewBox={viewBox} version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        className="grid"
+        preserveAspectRatio={preserveAspectRatio}
+        width={width}
+        height={height}
+        viewBox={viewBox}
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         {this.props.children}
       </svg>
     );
diff --git a/src/Pattern.js b/src/Pattern.js
index 6c39d0a..eec3935 100644
--- a/src/Pattern.js
+++ b/src/Pattern.js
@@ -1,24 +1,25 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import HexUtils from './HexUtils';
 import Point from './models/Point';
 
 class Pattern extends Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
-    size: PropTypes.object
+    size: PropTypes.object,
+    patternUnits: PropTypes.string
   };
   static defaultProps = {
-    size: new Point(10, 10)
+    size: new Point(10, 10),
+    patternUnits: 'objectBoundingBox'
   };
 
   render() {
-    const { id, link, size } = this.props;
+    const { id, link, size, patternUnits } = this.props;
 
     return (
       <defs>
-        <pattern id={id} patternUnits="objectBoundingBox" x={0} y={0} width={size.x} height={size.y}>
+        <pattern id={id} patternUnits={patternUnits} x={0} y={0} width={size.x} height={size.y}>
           <image xlinkHref={link} x={0} y={0} width={size.x*2} height={size.y*2} />
         </pattern>
       </defs>