fill svg graphic #77

Author: ryanve

README.md

@@ -174,15 +174,29 @@ having `tape-flow` on your root or body to flow color thru the whole page
 <button class="tape-flap tape-flow">Cancel</button>
 ```
 
-## [imagine](https://developer.mozilla.org/CSS/gradient)
+## [imagine](https://s9a.page/tape#imagine)
+
+
+### [gradients](https://developer.mozilla.org/Web/CSS/gradient)
 
 ```css
-:root {
-  --tape-remix: radial-gradient(coral, violet);
-}
+--tape-remix: linear-gradient(
+  var(--tape-play),
+  var(--tape-loud),
+  var(--tape-luvu),
+  var(--tape-bluv)
+);
 ```
 
-## [filter](https://developer.mozilla.org/CSS/filter)
+```css
+--tape-remix: radial-gradient(coral, violet);
+```
+
+```css
+--tape-remix: conic-gradient(plum, coral, pink);
+```
+
+## [filter](https://developer.mozilla.org/Web/CSS/filter)
 
 ```css
 :focus {
@@ -206,7 +220,19 @@ having `tape-flow` on your root or body to flow color thru the whole page
 }
 ```
 
+## [fill](https://developer.mozilla.org/Web/CSS/fill)
+
+[`fill`](https://s9a.page/tape#fill) [SVG shapes](https://s9a.page/tape/tape.svg) [with colors](#palette)
+
+```svg
+<circle r="111" fill="var(--tape-play)" />
+```
+
+```svg
+<circle r="333" class="tape-play" />
+```
+
 ## [producing](https://s9a.page/tapes)
 ### [hello tape](https://s9a.page/hellotape) <br> [bye shame](https://webmural.com/shame) <br> [lettuce remixit](https://s9a.page) <br> [lifeforce](https://webmural.com/milf) <br> [lavatory](https://webmural.com/tlfr)
 
-### [octopus](https://octopus.boo) [moonchild](https://github.com/s9a/tape/commit/5072a403673a6f93a156527acc7fdeef01404ba4)
+### [octopus](https://octopus.boo) [moonchild](https://github.com/s9a/tape/commit/5072a403673a6f93a156527acc7fdeef01404ba4)

demo.css

@@ -61,6 +61,7 @@ a:hover {
 }
 
 /* N.E.R.D. ÷ MCR */
+.omg:hover { cursor: grab }
 .mold { font: unset }
 .bold { font-weight: bold }
 .moan { margin: auto }
@@ -105,4 +106,4 @@ html {
 .vol0 { font-size: 0 }
 .vol1 { font-size: var(--vol1) }
 .vol2 { font-size: var(--vol2) }
-.vol3 { font-size: var(--vol3) }
+.vol3 { font-size: var(--vol3) }

index.html

@@ -167,7 +167,7 @@ <h1 class="vol3 paz">
     <a class="tape-flow bold" href="https://webmural.com/airwaves">mo̊sh</a>
   </figcaption>
   <p class="vol2 moan" style="--tape-play:deeppink">
-    <a class="tape-loud" style="--tape-loud:#bea" href="https://s9a.page/mochi">fi̊ller</a><br>
+    <a class="tape-loud" style="--tape-loud:#ec0" href="https://s9a.page/mochi">player</a><br>
     <a class="tape-play" href="https://s9a.page/c11y">ampuller</a><br>
     <a class="tape-bluv" href="https://s9a.page/v11y" style="--tape-bluv:orchid">
       spi̊ller
@@ -179,7 +179,24 @@ <h1 class="vol3 paz">
   </p>
 </figure>
 
+<figure class="tape-bluv tape-flow pad moan nemo">
+  <figcaption class="vol3 moby">
+    <a class="tape-flow bold" href="https://s9a.page/illbang">fill</a>
+  </figcaption>
+  <a href="tape.svg" class="tape-bluv omg" aria-label="tape">
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 500">
+      <title>tape sampler</title>
+      <rect class="tape-bluv" x="0" width="800" height="500" />
+      <circle class="tape-play" cx="220" cy="250" r="360" />
+      <circle class="tape-watt" cx="220" cy="250" r="120" />
+      <circle class="tape-loud" cx="220" cy="250" r="60" />
+      <circle class="tape-bluv" cx="580" cy="250" r="120" />
+      <circle class="tape-luvu" cx="580" cy="250" r="60" />
+    </svg>
+  </a>
+</figure>
+
 <footer class="tape-flow moan nemo vol3 bold" style="--tape-play:deeppink">
   <a class="tape-play" href="https://s9a.page">s9a</a>
   <a href="https://github.com/s9a/tape">tḁpe</a>
-</footer>
+</footer>

tape.css

@@ -36,6 +36,7 @@
   color: var(--tape-blaq) !important;
   background-color: var(--tape-mix) !important;
   background-image: var(--tape-remix);
+  fill: var(--tape-mix);
   filter: var(--tape-filter);
 }