ignis8 icon
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
<!-- =========================================================================
IGNIS-8 Emblem: Simplified Fire & Wireless Remote Favicon Shield
Palette: 100% Strict Gruvbox Dark Match
Style: Vibrant, Geometric, Cyber-Tactical, High-Contrast
OUTSIDE TRANSPARENT, INSIDE DARK GRAY.
Previously a borderless rectangle in Gruvbox bg0 (#282828) sat under
the entire image. The emblem thus carried a gray plate that remained
visible next to the frame — in the light GitHub theme as a gray box,
in the header of the control view as an edge against its own
background.
The gray now sits exclusively INSIDE the border/outline: It is the
fill of exactly the same rectangle that also carries the green
contour. The fill edge thereby lies under the inner half of the
contour and is not visible; beyond the contour the area stays free.
For the maskable PWA purpose that is unsuitable — there the home
screen cuts its own shape out of the image and needs a full-surface
plate. This version therefore lives separately in
favicon-maskable.svg, see manifest.json.
========================================================================= -->
<defs>
<!-- Silhouette of the emblem: the OUTER EDGE of the border/outline.
x/y 12 and 488 x 488 result from the frame rectangle (24, 464)
plus half the contour width (12); the radius correspondingly 48 + 12.
The clipping is not decoration. The shield group extends roughly
10 units beyond the outer edge at the bottom — on a gray background
that would look like a shield overlapping the frame, without a
background it would be a freely floating yellow tip. -->
<clipPath id="ignis8-frame">
<rect x="12" y="12" width="488" height="488" rx="60" />
</clipPath>
</defs>
<g clip-path="url(#ignis8-frame)">
<!-- 1. Border/outline (Gruvbox Bright Green #b8bb26) with dark gray
inner surface (Gruvbox bg0). Both on ONE element so that the
fill edge necessarily lies under the contour. -->
<rect x="24" y="24" width="464" height="464" rx="48"
fill="#282828"
stroke="#b8bb26"
stroke-width="24" />
<!-- 2. Radio waves in the upper right corner (Gruvbox Bright Green #b8bb26) -->
<g id="wireless-corner" fill="none" stroke="#b8bb26" stroke-width="16" stroke-linecap="round">
<!-- Signal center (corner point) -->
<circle cx="430" cy="82" r="12" fill="#b8bb26" stroke="none" />
<!-- First radio wave -->
<path d="M 370 82 A 60 60 0 0 0 430 142" />
<!-- Second radio wave -->
<path d="M 310 82 A 120 120 0 0 0 430 202" stroke-width="18" />
<!-- Third radio wave -->
<path d="M 250 82 A 180 180 0 0 0 430 262" stroke-width="20" />
</g>
<!--
3. Shield & fire group (Slightly offset toward the lower left,
to perfectly balance the radio waves at the top right)
-->
<g id="shield-core-group" transform="translate(-35, 35) scale(0.92)">
<!-- Fire brigade shield (Gruvbox Dark Hard #1d2021) with yellow border (#fabd2f) -->
<path d="M 256 120
C 200 110, 150 135, 110 155
C 95 245, 95 335, 120 395
C 145 455, 210 492, 256 507
C 302 492, 367 455, 392 395
C 417 335, 417 245, 402 155
C 362 135, 312 110, 256 120 Z"
fill="#1d2021"
stroke="#fabd2f"
stroke-width="20"
stroke-linejoin="round" />
<!--
Vibrant, intensely glowing fire (Pure Gruvbox accents)
Outer: Bright Red (#fb4934) | Middle: Bright Orange (#fe8019) | Inner: Bright Yellow (#fabd2f)
-->
<g id="vibrant-fire">
<!-- Outer flame (Gruvbox Red) -->
<path d="M 256 180
C 190 250, 150 290, 150 360
C 150 415, 190 435, 256 435
C 322 435, 362 415, 362 360
C 362 290, 322 250, 256 180 Z"
fill="#fb4934" />
<!-- Middle flame (Gruvbox Orange) -->
<path d="M 256 215
C 205 275, 175 310, 175 370
C 175 415, 205 425, 256 425
C 307 425, 337 415, 337 370
C 337 310, 307 275, 256 215 Z"
fill="#fe8019" />
<!-- Inner flame (Gruvbox Yellow) -->
<path d="M 256 250
C 220 295, 200 325, 200 375
C 200 410, 222 415, 256 415
C 290 415, 312 410, 312 375
C 312 325, 292 295, 256 250 Z"
fill="#fabd2f" />
</g>
<!-- The "8" as an endless ribbon (Gruvbox Light-Cream #fbf1c7) -->
<g id="number-eight">
<!-- Dark mask for optical separation from the bright fire (#1d2021) -->
<path d="M 256 310
C 228 310, 228 250, 256 250
C 284 250, 284 310, 256 310
C 220 310, 220 395, 256 395
C 292 395, 292 310, 256 310"
fill="none"
stroke="#1d2021"
stroke-width="56"
stroke-linecap="round"
stroke-linejoin="round" />
<!-- Foreground loop -->
<path d="M 256 310
C 228 310, 228 250, 256 250
C 284 250, 284 310, 256 310
C 220 310, 220 395, 256 395
C 292 395, 292 310, 256 310"
fill="none"
stroke="#fbf1c7"
stroke-width="26"
stroke-linecap="round"
stroke-linejoin="round" />
</g>
</g>
</g>
</svg>
Richard's Blog