mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-10 02:25:56 +00:00
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.
This commit is contained in:
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user