#4 dynamic giraffe

s9a · Oct 4, 2024 · 8dafb49 · 8dafb49
1 parent 5c09c22
commit 8dafb49
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,9 @@
-## [illbang color remixer](https://s9a.page/illbang)
+## [illbang graphic remixer](https://s9a.page/illbang)
 
-[FEAT tape](https://s9a.page/tape) and [color input](index.html)
+### FEAT
 
+* [tape colors](https://s9a.page/tape)
+* [semantic HTML color inputs](index.html)
+* [varam URL synergy](https://ryanve.github.io/varam)
+* [**fun**ction](deejay.js)
+* SVG
diff --git a/deejay.js b/deejay.js
@@ -3,13 +3,39 @@
 !function(n,m){function t(b){var d=!1,c=new f(b);b=m.querySelectorAll("[data-varam]");p(b,function(e){var h=e.getAttribute("data-varam");(h=h&&h.match(u))&&p(h,function(q){var v=c.get(q);d=r(e.style,"--"+q,v)||d})});a.state=c.toString();return d}function k(){return!1}function w(){return a(location.search)}function x(){return a("")}function r(b,d,c){var e=b.getPropertyValue(d);(e=c?e===c:!e)||b.setProperty(d,c);return!e}function p(b,d){for(var c=b.length;c--;)d(b[c])}var u=/\S+/g,f=n.URLSearchParams,
 a=f?t:k,g=(m.querySelector||k).call(m,"meta[name=varam][content]");g=g&&g.content;var l="string"==typeof g;a.flow=f?w:k;a.fresh=r;a.help=function(){console.dir(a);return a.state};a.reset=f?x:k;a.state="";f&&a(l?l&&g:location.search);a.meta=l?a.state:!1;a.via=l?"meta":"flow";n.varam=a;"undefined"!=typeof module&&module.exports&&(module.exports=a)}(window,document);
 
-// ¡!
-!function(urchin) {
-  if (urchin) new urchin(
-    location.search
-  ).forEach(function(hex, ki) {
-    var input = this[ki]
+// ¡! fragile
+!function(willow, duende, search) {
+  function zef(f) { f(0) }
+  function reset(elephant, name, value) {
+    var ph = elephant.style
+    ph.setProperty("--" + name, value)
+  }
+
+  var animal = willow.requestAnimationFrame || zef
+  var urchin = willow.URLSearchParams
+  var morf = duende.querySelector("form")
+  var bttm = morf.querySelector("button")
+
+  if (urchin) new urchin(search)
+    .forEach(function(hex, ki) {
+    var input = morf[ki]
     var value = input && input.value
     if (value !== hex) input.value = hex
-  }, document.querySelector("form"))
-}(window.URLSearchParams)
+  })
+
+  morf.addEventListener("change", function(e) {
+    var input = e.target
+    var name = input.name
+    var value = input.value
+    var label = input.parentNode
+    animal(function() {
+      reset(label, name, value)
+      reset(bttm, name, value)
+    })  
+  })
+
+  duende.title = "illbang ¡! remixyz"
+}(window, document, location.search);
+
+
+
diff --git a/freestyle.css b/freestyle.css
@@ -87,14 +87,14 @@
 
 .cone {
   --tape-remix: conic-gradient(
-    var(--tape-play) 0,
-    var(--tape-play) 25%,
-    var(--tape-loud) 25%,
-    var(--tape-loud) 50%,
+    var(--tape-loud) 0,
+    var(--tape-loud) 30%,
+    var(--tape-bluv) 30%,
+    var(--tape-bluv) 50%,
     var(--tape-luvu) 50%,
-    var(--tape-luvu) 75%,
-    var(--tape-bluv) 75%,
-    var(--tape-bluv) 100%
+    var(--tape-luvu) 80%,
+    var(--tape-play) 80%,
+    var(--tape-play) 100%
   );
 }
 
@@ -170,12 +170,32 @@ footer {
   margin: 0 auto 1em;
   contain: layout;
   display: flex;
+  align-content: center;
+}
+
+a svg {
+  min-width: 3.618rem;
+  max-width: 100%;
+  height: auto;
+}
+
+kbd {
+  filter: hue-rotate(0deg);
+  font-size: 1.618em;
+  padding-inline: 0.5ch;
+}
+
+a {
+  padding: 1ch;
+}
+
+[href="?"] {
+  cursor: grab;
 }
 
 a,
 button {
   border: thick dashed;
-  padding: 1ch;
   border-top-color: var(--tape-play);
   border-right-color: var(--tape-loud);
   border-bottom-color: var(--tape-bluv);
@@ -190,7 +210,6 @@ button {
 }
 
 button:hover {
-  cursor: url(#illbang);
   cursor: zoom-in;
   text-decoration-style: double;
 }
@@ -215,10 +234,6 @@ figcaption {
 }
 
 @media (orientation: portrait) {
-  button { 
-    flex-basis: 100%;
-  }
-
   code {
     align-items: center;
     writing-mode: vertical-rl;

diff --git a/index.html b/index.html
@@ -2,17 +2,19 @@
 <html lang="en" class="tape-flow tape-blaq" data-varam="tape-watt tape-play tape-loud tape-luvu tape-blaq tape-bluv">
 <meta charset="utf-8">
 
-<title>illbang color remixer</title>
+<title>illbang ¡! remixer</title>
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="theme-color" content="#0e0e0e">
 <meta name="color-scheme" content="dark light">
-<meta name="description" content="illbang svg color remixer">
+<meta name="description" content="color fill svg">
 
 <link rel="stylesheet" href="freestyle.css">
 <link rel="prev" href="https://github.com/s9a/interweb">
 <link rel="prev" href="https://ryanve.dev/illbang">
 <link rel="icon" href="illbang.svg">
+<link rel="license" href="LICENSE.md">
+<link rel="home" href="https://s9a.page">
 
 <figure>
   <svg
@@ -55,12 +57,34 @@ <h1>illbang color remixer</h1>
         <code>watt</code>
         <input type="color" name="tape-watt" value="#e0e0e0">
       </label>
-      <button class="tape-blaq">
-        remix
+      <button class="tape-blaq" aria-label="remix">
+        <svg
+          class="tape-blaq"
+          width="20vmax"
+          height="20vmax"
+          viewBox="0 0 2400 2400"
+          xmlns="http://www.w3.org/2000/svg"
+          >
+          <title>¡!</title>
+          <rect class="tape-luvu" x="617" y="800" width="300" height="1300" />
+          <rect class="tape-play" x="617" y="300" width="300" height="300" />
+          <rect class="tape-loud" x="1483" y="300" width="300" height="1300" />
+          <rect class="tape-bluv" x="1483" y="1800" width="300" height="300" />
+        </svg>
       </button>
       <footer>
-        <a href="?" class="tape-blaq">reset</a>
-        <a href="https://s9a.page/tape" class="tape-blaq">tape</a>
+        <a href="?" class="tape-play" aria-label="reset"><kbd>♻️</kbd></a>
+        <a href="https://s9a.page/tape" class="tape-bluv" aria-label="tape">
+          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 500">
+            <title>tape</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>
       </footer>
     </form>
   </figcaption>