update

zumerlab · Oct 17, 2023 · 6cedd77 · 6cedd77
1 parent e097248
commit 6cedd77
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 22 deletions.
diff --git a/examples/spread.html b/examples/spread.html
@@ -9,9 +9,7 @@
       body {
         font-family: 'Lucida Sans', Verdana, sans-serif;
       }
-      .gooey {
-        filter: url('#fancy-goo');
-      }
+
     </style>
   </head>
   <body style="background-color: slategray;">
@@ -58,7 +56,7 @@
         <div class="o-orbiter o-sm" style="background-color: rgb(227, 16, 65);"></div>
         <div class="o-orbiter o-sm" style="background-color: rgb(227, 16, 65);"></div>
       </div>
-      <div class="o-orbit gooey">
+      <div class="o-orbit o-filter-gooey">
         <div class="o-orbiter o-md" style="background-color: rgb(194, 212, 29);">1</div>
         <div class="o-orbiter o-md" style="background-color: rgb(194, 212, 29);"></div>
         <div class="o-orbiter o-md" style="background-color: rgb(194, 212, 29);"></div>
@@ -89,15 +87,7 @@
         <div class="o-orbiter o-md" style="background-color: rgb(194, 212, 29);">20</div>
       </div>
     </div>
-<svg>
-  <defs>
-    <filter id="fancy-goo">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
-      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
-      <feComposite in="SourceGraphic" in2="goo" operator="atop" />
-    </filter>
-  </defs>
-</svg>
+
   </body>
 
 </html>
diff --git a/notes.md b/notes.md
@@ -94,8 +94,9 @@ LAS MINIMAS ARC TEXT
 ### css first
 
 ### COSAS PARA AHORA
->>>>> TITULOS // LABELS PARA ORBITS sector y container
->>>>>> .CONTENT NO RADIAL GRID no capsule
+>>>>> TITULOS y LABELS PARA ORBITS sector y container
+>>>>>> .CONTENT para sector y orbiters
+>>>>>> knob armar
 ok .PROGRESS
 .KNOB: asegurar que el selector queda enmedio del grosos del progress seria lower by deafult
 ok .svg-markers
@@ -122,19 +123,19 @@ o-title o label?
 
 
 ### COSAS PARA DESPUES
-elipse usar container perspective.
-
-alternativamente se puede pensar en orbit eliptical con orbinters aliptical usando sen y cos
-o-comet
+OK elipse usar container perspective para tener todo cool
+OK alternativamente se puede pensar en orbit eliptical con orbinters aliptical usando sen y cos
+OK GOEY EFFECT
+data-o* para JS
 
 CSS TYPES PARA ANIMAR (SOLO CHROME pero sale en breve en firefox)
 
 
 
-ok GOEY EFFECT
+
 TEXTO CURVO (JS)
-data-o* para JS
-ok separar el test como repo independiente para testeo local (y luego remoto as service con server less?)
+
+OK separar el test como repo independiente para testeo local (y luego remoto as service con server less?)
 
 los estilos en clases o las variables en clases?
 

diff --git a/src/orbit-base.scss b/src/orbit-base.scss
@@ -3,5 +3,6 @@
 @import './components/_base';
 @import './layouts/radial-grid';
 @import './utilities/content';
+@import './utilities/filter-gooey';
 @import './layouts/media-queries';
 
diff --git a/src/utilities/_filter-gooey.scss b/src/utilities/_filter-gooey.scss
@@ -0,0 +1,11 @@
+.o-orbit.o-filter-gooey{
+    filter: url('data:image/svg+xml,\
+    <svg xmlns="http://www.w3.org/2000/svg">\
+    <filter id="fancy-goo">\
+    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />\
+    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />\
+    <feComposite in="SourceGraphic" in2="goo" operator="atop" />\
+    </filter>\
+    </svg>#fancy-goo')
+}
+