cleanup svg to use global defined patterns

Author: jscottsmith

examples/components/Intro/hemispheres.svg

@@ -18,11 +18,11 @@ const Marquee = () => (
                 className={style.text}
                 offsetYMax={70}
                 offsetYMin={-70}
-                offsetXMax={-20}
-                offsetXMin={20}
+                offsetXMax={-30}
+                offsetXMin={30}
             >
                 <h1>
-                    Slide
+                    Horizontal
                 </h1>
             </Parallax>
             <Parallax

examples/components/Intro/ring-of-dots.svg

@@ -10,13 +10,14 @@
     flex-flow: column wrap;
     justify-content: space-between;
     align-items: center;
-    height: 50vh;
-    margin-bottom: 25vh;
+    min-height: 50vh;
+    margin-bottom: 50vh;
 }
 
 :local(.divider) {
     display: block;
     width: 100%;
+    margin-bottom: 25vh;
 }
 
 :local(.container) {

examples/components/Marquee/Marquee.js

@@ -5,9 +5,14 @@ import {
     Marquee,
     TriangleGrid,
     Overlap,
+    Svg,
 } from 'components';
+
 import style from './ParallaExample.scss';
 
+import noisePattern from '!!raw-loader!../shared/noise-pattern.svg';
+import dotPattern from '!!raw-loader!../shared/dot-pattern.svg';
+
 export default class ParallaxExample extends Component {
 
     render() {
@@ -18,6 +23,9 @@ export default class ParallaxExample extends Component {
                 <Marquee />
                 <Overlap />
                 <TriangleGrid />
+
+                <Svg svg={noisePattern} />
+                <Svg svg={dotPattern} />
             </div>
         );
     }

examples/components/Marquee/Marquee.scss

@@ -4,5 +4,9 @@
 
 :local(.root) {
 	display: block;
-	height: auto;
+	svg {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
 }

examples/components/Marquee/box-bg.svg

@@ -1,5 +1,7 @@
 export Intro from './Intro/Intro.js';
 export IntroCopy from './IntroCopy/IntroCopy.js';
 export Marquee from './Marquee/Marquee.js';
-export Svg from './Svg/Svg.js';
 export ParallaxExample from './ParallaxExample/ParallaxExample.js';
+export Svg from './Svg/Svg.js';
+export Overlap from './Overlap/Overlap.js';
+export TriangleGrid from './TriangleGrid/TriangleGrid.js';