From c41338d10631d0ec47d005745c88d0bc6c2d8216 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Thu, 6 Aug 2026 10:59:23 +0100
Subject: [PATCH] docs(brand): add the animated Pulse mark as a canonical asset

The Pulse mark is three concentric shapes, a blue disc, a white stroked
ring and a white centre dot. Only the static form was ever published, so
the dashboard-icons entry for Pulse (homarr-labs/dashboard-icons#1526)
was drawn by hand from a screenshot and shipped two circles instead of
three, with the ring flattened into a solid disc and the centre dot
missing entirely. Every Homepage dashboard rendering `icon: pulse.svg`
shows that approximation rather than the real mark.

Publish the animated mark alongside the static one so downstream icon
sets have a canonical file to mirror instead of an eyeballed redraw.
Geometry matches docs/images/pulse-logo.svg exactly, the ring pulses on
a 2s cycle from the true centre of the viewBox, and the animation holds
still under prefers-reduced-motion.
---
 docs/images/pulse-logo-animated.svg | 30 +++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 docs/images/pulse-logo-animated.svg

diff --git a/docs/images/pulse-logo-animated.svg b/docs/images/pulse-logo-animated.svg
new file mode 100644
index 000000000..793e8835f
--- /dev/null
+++ b/docs/images/pulse-logo-animated.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <title>Pulse Logo</title>
+  <style>
+    @keyframes pulse-ring {
+      0%, 100% { opacity: 0.92; transform: scale(1); }
+      50%      { opacity: 0.55; transform: scale(1.1); }
+    }
+    .pulse-ring {
+      animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      transform-box: view-box;
+      transform-origin: center;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pulse-ring { animation: none; }
+    }
+    /* Default (light mode) colors */
+    .pulse-bg { fill: #2563eb; }     /* blue-600 */
+    .pulse-fg { fill: #ffffff; }
+    .pulse-stroke { stroke: #ffffff; }
+    /* Dark mode colors */
+    @media (prefers-color-scheme: dark) {
+      .pulse-bg { fill: #3b82f6; }   /* blue-500 */
+      .pulse-fg { fill: #dbeafe; }   /* blue-100 */
+      .pulse-stroke { stroke: #dbeafe; }
+    }
+  </style>
+  <circle class="pulse-bg" cx="128" cy="128" r="122"/>
+  <circle class="pulse-ring pulse-stroke" cx="128" cy="128" r="84" fill="none" stroke-width="14" opacity="0.92"/>
+  <circle class="pulse-fg" cx="128" cy="128" r="26"/>
+</svg>