From 982c1f64755a71a1e83a148af0a3756839205d64 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <github@joshua.seigler.net>
Date: Sun, 7 Jan 2018 03:08:30 -0500
Subject: [PATCH] :zap: Make Rothkogenerator more paintlike

---
 src/static/art/rothko.svg | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/static/art/rothko.svg b/src/static/art/rothko.svg
index 15b9756..b8c85a1 100644
--- a/src/static/art/rothko.svg
+++ b/src/static/art/rothko.svg
@@ -10,8 +10,15 @@
       <feGaussianBlur stdDeviation="2 0" />
       <feDisplacementMap in2="turbulenceFat" scale="-10"/>
     </filter>
+    <filter id="paintMaskFilter">
+      <feTurbulence seed="0" type="fractalNoise" baseFrequency="0.02 0.1" numOctaves="4"/>
+      <feColorMatrix type="matrix" values="0.5 0 0 0 0.5   0 0.5 0 0 0.5   0 0 0.5 0 0.5   0 0 0 0 1" />
+    </filter>
+    <mask id="paintMask">
+      <rect x="0" y="0" width="300" height="400" fill="white" filter="url(#paintMaskFilter)"></rect>
+    </mask>
   </defs>
-  <svg viewBox="0 0 300 400" x="0" y="0" width="300" height="400" id="rects" filter="url(#paint)"></svg>
+  <svg id="rects" viewBox="0 0 300 400" x="0" y="0" width="300" height="400" filter="url(#paint)"></svg>
   <script type="text/javascript">
     <![CDATA[
       function randomHsl() {
@@ -31,7 +38,6 @@
           color: randomHsl(),
           height: Math.random(),
           width: mainWidth + (Math.random() < 0.2 ? Math.random() * 100 - 50 : 0),
-          opacity: 1 - Math.pow(Math.random(), 5),
           x: null,
           y: null
         };
@@ -62,7 +68,9 @@
         newRect.setAttributeNS(null, 'height', shapes[i].height);
         newRect.setAttributeNS(null, 'width', shapes[i].width);
         newRect.setAttributeNS(null, 'fill', shapes[i].color);
-        newRect.setAttributeNS(null, 'opacity', shapes[i].opacity);
+        if (i > 0) {
+          newRect.setAttributeNS(null, 'mask', 'url(#paintMask)');
+        }
         domRects.appendChild(newRect);
       }
     ]]>