From 82678f9c5852e220d607d33c82a494116bab0bc9 Mon Sep 17 00:00:00 2001 From: Richard Sauer Date: Wed, 8 Apr 2026 13:09:54 +1000 Subject: [PATCH] Replace burner pulse with flame SVG animation --- templates/editor.html | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/templates/editor.html b/templates/editor.html index e414b50..1719347 100644 --- a/templates/editor.html +++ b/templates/editor.html @@ -849,8 +849,25 @@ function renderSchematic() { } const cc = col||'var(--green)'; if (eq.anim === 'burner') { - g.appendChild(mkSvgEl('circle', {'class':'anim-overlay burner-glow', id:'sim-'+eq.id, - cx:eq.x, cy:eq.y, r:r+4, fill:'none', stroke:col||'var(--amber)', 'stroke-width':'4'})); + // Flame SVG with flicker animation + const fg = mkSvgEl('g', {'class':'anim-overlay', id:'sim-'+eq.id}); + fg.setAttribute('transform', `translate(${eq.x},${eq.y})`); + // Outer flame (orange) + fg.appendChild(mkSvgEl('path', { + d:`M 0 ${-r*0.3} Q ${-r*0.5} ${-r*0.8} ${-r*0.2} ${-r*1.2} Q 0 ${-r*1.5} ${r*0.2} ${-r*1.2} Q ${r*0.5} ${-r*0.8} 0 ${-r*0.3} Z`, + fill:'var(--amber)', opacity:'0.8', 'class':'burner-glow' + })); + // Inner flame (red-orange) + fg.appendChild(mkSvgEl('path', { + d:`M 0 ${-r*0.2} Q ${-r*0.25} ${-r*0.5} ${-r*0.1} ${-r*0.85} Q 0 ${-r*1.05} ${r*0.1} ${-r*0.85} Q ${r*0.25} ${-r*0.5} 0 ${-r*0.2} Z`, + fill:'var(--red)', opacity:'0.9', 'class':'burner-glow', style:'animation-delay:0.2s' + })); + // Core (bright) + fg.appendChild(mkSvgEl('ellipse', { + cx:0, cy: -r*0.4, rx: r*0.12, ry: r*0.25, + fill:'#ffdd44', opacity:'0.9', 'class':'burner-glow', style:'animation-delay:0.4s' + })); + g.appendChild(fg); } else if (eq.anim === 'fan') { // Fan: 4 curved blades spinning inside the circle const ag = mkSvgEl('g', {'class':'anim-overlay', id:'sim-'+eq.id});