Better toggle logo

coatless · coatless · commit 98a3703e6340 · 2025-12-03T13:56:39.000-06:00
diff --git a/README.md b/README.md
@@ -1,12 +1,7 @@
-# toggle: Show/Hide Code Output <img src="docs/toggle-logo.svg" align ="right" alt="" width ="150"/>
+# toggle: Show/Hide Code Output <img src="docs/toggle-animated-logo.svg" align ="right" alt="" width ="150"/>
 
 The `toggle` extension allows you to toggle between showing code with output or just code by itself in Quarto HTML documents by adding a convenient toggle button that appears when hovering over code blocks, similar to the copy button.
 
-> [!IMPORTANT]
-> 
-> GIF HERE
->
-
 ## Installation
 
 To install the `toggle` extension, follow these steps:
diff --git a/docs/_quarto.yml b/docs/_quarto.yml
@@ -7,7 +7,7 @@ website:
   repo-url: https://github.com/coatless-quarto/toggle/
   repo-actions: [edit, issue]
   sidebar:
-    logo: "toggle-logo.svg"
+    logo: "toggle-animated-logo.svg"
     logo-alt: "A hexagon logo for the toggle Quarto extension."
     style: "floating"
     search: true
diff --git a/docs/index.qmd b/docs/index.qmd
@@ -7,11 +7,6 @@ format:
 
 The `toggle` extension allows you to toggle between showing code with output or just code by itself in Quarto HTML documents by adding a convenient toggle button that appears when hovering over code blocks, similar to the copy button.
 
-> [!IMPORTANT]
-> 
-> GIF HERE
->
-
 ## Installation
 
 To install the `toggle` extension, follow these steps:
diff --git a/docs/toggle-animated-logo.svg b/docs/toggle-animated-logo.svg
@@ -0,0 +1,108 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2521 2911">
+  <defs>
+    <linearGradient id="quartoBlue" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#4a90d9"/>
+      <stop offset="100%" style="stop-color:#2d5f91"/>
+    </linearGradient>
+    <linearGradient id="chartGrad" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#75aadb" stop-opacity="0.3"/>
+      <stop offset="100%" style="stop-color:#a8d4ff" stop-opacity="0.8"/>
+    </linearGradient>
+    <filter id="innerShadow">
+      <feOffset dx="0" dy="4"/>
+      <feGaussianBlur stdDeviation="6" result="offset-blur"/>
+      <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
+      <feFlood flood-color="#1a3a5c" flood-opacity="0.4" result="color"/>
+      <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
+      <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
+    </filter>
+    <filter id="chevronGlow">
+      <feGaussianBlur stdDeviation="6" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="textShadow">
+      <feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#1a3a5c" flood-opacity="0.5"/>
+    </filter>
+  </defs>
+  
+  <!-- Hexagon Background -->
+  <path d="M2443.1,776.1l-178.1-102.9c-252.8-183.2-693.3-408.3-1004.5-579.9-353.4,202.8-724.6,418.3-1007.6,581.6l-175,101.2v1365.6l1182.6,682.8,1182.6-682.8V776.1Z" fill="url(#quartoBlue)"/>
+  
+  <!-- Hexagon Border -->
+  <path d="M2443.1,776.1l-178.1-102.9c-252.8-183.2-693.3-408.3-1004.5-579.9-353.4,202.8-724.6,418.3-1007.6,581.6l-175,101.2v1365.6l1182.6,682.8,1182.6-682.8V776.1Z" fill="none" stroke="#75aadb" stroke-width="10"/>
+  
+  <!-- Code block -->
+  <rect x="560" y="700" width="1400" height="520" rx="25" fill="#1e3a52" filter="url(#innerShadow)"/>
+  <rect x="560" y="700" width="1400" height="520" rx="25" fill="none" stroke="#4a7ba8" stroke-width="4"/>
+  
+  <!-- Toggle chevron button in upper right of code block -->
+  <g transform="translate(1850, 820)">
+    <circle cx="0" cy="0" r="70" fill="#14293a" stroke="#75aadb" stroke-width="5"/>
+    
+    <!-- Down chevron - with rotation animation (clockwise/right) -->
+    <g>
+      <animateTransform 
+        attributeName="transform" 
+        type="rotate" 
+        values="0;0;-180;-180;0;0" 
+        keyTimes="0;0.2;0.3;0.7;0.8;1"
+        dur="4s" 
+        repeatCount="indefinite"/>
+      <path d="M-28 -10 L0 18 L28 -10" fill="none" stroke="#a8d4ff" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" filter="url(#chevronGlow)"/>
+    </g>
+  </g>
+  
+  <!-- Code lines -->
+  <rect x="660" y="800" width="280" height="36" rx="8" fill="#75aadb"/>
+  <rect x="970" y="800" width="420" height="36" rx="8" fill="#4a7ba8" opacity="0.5"/>
+  
+  <rect x="710" y="880" width="380" height="36" rx="8" fill="#a8d4ff"/>
+  <rect x="1120" y="880" width="240" height="36" rx="8" fill="#4a7ba8" opacity="0.5"/>
+  
+  <rect x="710" y="960" width="500" height="36" rx="8" fill="#75aadb" opacity="0.8"/>
+  
+  <rect x="660" y="1040" width="180" height="36" rx="8" fill="#75aadb"/>
+  
+  <!-- Output block (with fade animation) -->
+  <g>
+    <animate 
+      attributeName="opacity" 
+      values="1;1;0;0;1;1" 
+      keyTimes="0;0.2;0.3;0.7;0.8;1"
+      dur="4s" 
+      repeatCount="indefinite"/>
+    
+    <rect x="560" y="1260" width="1400" height="520" rx="25" fill="#2a4a5e" opacity="0.6"/>
+    <rect x="560" y="1260" width="1400" height="520" rx="25" fill="none" stroke="#4a7ba8" stroke-width="3" opacity="0.6"/>
+    
+    <!-- Chart/Graph area -->
+    <g transform="translate(660, 1320)">
+      <!-- Chart background grid lines -->
+      <line x1="0" y1="0" x2="1200" y2="0" stroke="#4a7ba8" stroke-width="1" opacity="0.3"/>
+      <line x1="0" y1="110" x2="1200" y2="110" stroke="#4a7ba8" stroke-width="1" opacity="0.3"/>
+      <line x1="0" y1="220" x2="1200" y2="220" stroke="#4a7ba8" stroke-width="1" opacity="0.3"/>
+      <line x1="0" y1="330" x2="1200" y2="330" stroke="#4a7ba8" stroke-width="1" opacity="0.3"/>
+      
+      <!-- Area chart fill -->
+      <path d="M0 330 L0 250 L200 200 L400 270 L600 130 L800 180 L1000 70 L1200 110 L1200 330 Z" fill="url(#chartGrad)"/>
+      
+      <!-- Line chart -->
+      <path d="M0 250 L200 200 L400 270 L600 130 L800 180 L1000 70 L1200 110" fill="none" stroke="#a8d4ff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+      
+      <!-- Data points -->
+      <circle cx="0" cy="250" r="14" fill="#ffffff"/>
+      <circle cx="200" cy="200" r="14" fill="#ffffff"/>
+      <circle cx="400" cy="270" r="14" fill="#ffffff"/>
+      <circle cx="600" cy="130" r="14" fill="#ffffff"/>
+      <circle cx="800" cy="180" r="14" fill="#ffffff"/>
+      <circle cx="1000" cy="70" r="14" fill="#ffffff"/>
+      <circle cx="1200" cy="110" r="14" fill="#ffffff"/>
+    </g>
+  </g>
+  
+  <!-- Text: toggle - bolder weight with shadow -->
+  <text x="1260" y="2300" text-anchor="middle" font-family="'Fira Code', 'Source Code Pro', monospace" font-size="300" font-weight="700" fill="#ffffff" filter="url(#textShadow)">toggle</text>
+</svg>
diff --git a/docs/toggle-logo.svg b/docs/toggle-logo.svg
diff --git a/docs/toggle-static-logo.svg b/docs/toggle-static-logo.svg
