rob
/
brighter-trading
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add SVG diagrams for all 61 candlestick patterns 

Each pattern now has a visual representation showing the characteristic
candlestick formations. SVGs include:
- Single candle patterns (Doji, Hammer, Marubozu, etc.)
- Two candle patterns (Engulfing, Harami, Kicking, etc.)
- Three+ candle patterns (Morning/Evening Star, Three Soldiers, etc.)

Visual elements use green (#00C853) for bullish candles, red (#FF5252)
for bearish candles, and gray (#888) for neutral/indecision candles.
Dashed lines indicate key price levels where relevant.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rob 2026-03-08 12:15:53 -03:00
parent e98861a7fb
commit 1e203a1159
1 changed files with 253 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
src/templates/new_indicator_popup.html
View File

@ -395,51 +395,117 @@ const indicatorInfo = {
}, },
'CDL_2CROWS': { 'CDL_2CROWS': {
description: 'Two Crows - Bearish reversal with gap up followed by two bearish candles, second engulfing first.', description: 'Two Crows - Bearish reversal with gap up followed by two bearish candles, second engulfing first.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="30" width="14" height="35" fill="#00C853" stroke="#333"/>
<line x1="15" y1="25" x2="15" y2="30" stroke="#333" stroke-width="2"/>
<rect x="32" y="12" width="12" height="15" fill="#FF5252" stroke="#333"/>
<line x1="38" y1="27" x2="38" y2="32" stroke="#333" stroke-width="2"/>
<rect x="54" y="8" width="16" height="25" fill="#FF5252" stroke="#333"/>
<line x1="62" y1="33" x2="62" y2="40" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_3LINESTRIKE': { 'CDL_3LINESTRIKE': {
description: 'Three Line Strike - Three candles in trend direction followed by opposite candle that engulfs all three.', description: 'Three Line Strike - Three candles in trend direction followed by opposite candle that engulfs all three.',
svg: null svg: `<svg width="120" height="80" viewBox="0 0 120 80">
<rect x="5" y="45" width="12" height="22" fill="#00C853" stroke="#333"/>
<rect x="22" y="35" width="12" height="22" fill="#00C853" stroke="#333"/>
<rect x="39" y="25" width="12" height="22" fill="#00C853" stroke="#333"/>
<rect x="56" y="20" width="16" height="55" fill="#FF5252" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_3OUTSIDE': { 'CDL_3OUTSIDE': {
description: 'Three Outside Up/Down - Engulfing pattern confirmed by third candle continuing in reversal direction.', description: 'Three Outside Up/Down - Engulfing pattern confirmed by third candle continuing in reversal direction.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="25" width="12" height="30" fill="#FF5252" stroke="#333"/>
<rect x="30" y="15" width="18" height="50" fill="#00C853" stroke="#333" stroke-width="2"/>
<rect x="58" y="10" width="14" height="35" fill="#00C853" stroke="#333"/>
</svg>`
}, },
'CDL_3STARSINSOUTH': { 'CDL_3STARSINSOUTH': {
description: 'Three Stars in South - Rare bullish reversal with three decreasing bearish candles showing exhaustion.', description: 'Three Stars in South - Rare bullish reversal with three decreasing bearish candles showing exhaustion.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="15" width="14" height="40" fill="#FF5252" stroke="#333"/>
<line x1="15" y1="55" x2="15" y2="68" stroke="#333" stroke-width="2"/>
<rect x="32" y="35" width="12" height="25" fill="#FF5252" stroke="#333"/>
<line x1="38" y1="60" x2="38" y2="68" stroke="#333" stroke-width="2"/>
<rect x="54" y="50" width="10" height="12" fill="#FF5252" stroke="#333"/>
<line x1="59" y1="62" x2="59" y2="68" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_ABANDONEDBABY': { 'CDL_ABANDONEDBABY': {
description: 'Abandoned Baby - Strong reversal with doji that gaps away from both surrounding candles.', description: 'Abandoned Baby - Strong reversal with doji that gaps away from both surrounding candles.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="15" width="14" height="35" fill="#FF5252" stroke="#333"/>
<line x1="15" y1="50" x2="15" y2="58" stroke="#333" stroke-width="2"/>
<line x1="38" y1="62" x2="38" y2="75" stroke="#333" stroke-width="2"/>
<line x1="32" y1="68" x2="44" y2="68" stroke="#333" stroke-width="3"/>
<rect x="58" y="25" width="14" height="35" fill="#00C853" stroke="#333"/>
<line x1="65" y1="18" x2="65" y2="25" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_ADVANCEBLOCK': { 'CDL_ADVANCEBLOCK': {
description: 'Advance Block - Three bullish candles with decreasing bodies showing weakening momentum.', description: 'Advance Block - Three bullish candles with decreasing bodies showing weakening momentum.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="40" width="14" height="30" fill="#00C853" stroke="#333"/>
<rect x="32" y="28" width="12" height="22" fill="#00C853" stroke="#333"/>
<line x1="38" y1="22" x2="38" y2="28" stroke="#333" stroke-width="2"/>
<rect x="54" y="18" width="10" height="15" fill="#00C853" stroke="#333"/>
<line x1="59" y1="12" x2="59" y2="18" stroke="#333" stroke-width="2"/>
<line x1="59" y1="33" x2="59" y2="38" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_BELTHOLD': { 'CDL_BELTHOLD': {
description: 'Belt Hold - Single candle opening at extreme (high/low) and closing near opposite end.', description: 'Belt Hold - Single candle opening at extreme (high/low) and closing near opposite end.',
svg: null svg: `<svg width="60" height="80" viewBox="0 0 60 80">
<rect x="20" y="10" width="20" height="55" fill="#00C853" stroke="#333" stroke-width="2"/>
<line x1="30" y1="65" x2="30" y2="72" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_BREAKAWAY': { 'CDL_BREAKAWAY': {
description: 'Breakaway - Five candle reversal starting with gap and ending with candle breaking the pattern.', description: 'Breakaway - Five candle reversal starting with gap and ending with candle breaking the pattern.',
svg: null svg: `<svg width="130" height="80" viewBox="0 0 130 80">
<rect x="5" y="35" width="12" height="30" fill="#FF5252" stroke="#333"/>
<rect x="22" y="18" width="10" height="12" fill="#FF5252" stroke="#333"/>
<rect x="37" y="15" width="10" height="10" fill="#FF5252" stroke="#333"/>
<rect x="52" y="12" width="10" height="12" fill="#FF5252" stroke="#333"/>
<rect x="67" y="20" width="14" height="45" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_CLOSINGMARUBOZU': { 'CDL_CLOSINGMARUBOZU': {
description: 'Closing Marubozu - Marubozu with no shadow on closing end, showing strong conviction.', description: 'Closing Marubozu - Marubozu with no shadow on closing end, showing strong conviction.',
svg: null svg: `<svg width="60" height="80" viewBox="0 0 60 80">
<rect x="20" y="10" width="20" height="55" fill="#00C853" stroke="#333" stroke-width="2"/>
<line x1="30" y1="65" x2="30" y2="72" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_CONCEALBABYSWALL': { 'CDL_CONCEALBABYSWALL': {
description: 'Concealing Baby Swallow - Rare four-candle bullish reversal pattern.', description: 'Concealing Baby Swallow - Rare four-candle bullish reversal pattern.',
svg: null svg: `<svg width="120" height="80" viewBox="0 0 120 80">
<rect x="5" y="10" width="12" height="35" fill="#FF5252" stroke="#333"/>
<rect x="22" y="25" width="12" height="35" fill="#FF5252" stroke="#333"/>
<rect x="39" y="40" width="10" height="20" fill="#FF5252" stroke="#333"/>
<line x1="44" y1="60" x2="44" y2="68" stroke="#333" stroke-width="2"/>
<rect x="54" y="15" width="14" height="55" fill="#FF5252" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_COUNTERATTACK': { 'CDL_COUNTERATTACK': {
description: 'Counter Attack - Two opposite-colored candles closing at the same price level.', description: 'Counter Attack - Two opposite-colored candles closing at the same price level.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="12" y="15" width="16" height="35" fill="#FF5252" stroke="#333"/>
<line x1="20" y1="50" x2="20" y2="60" stroke="#333" stroke-width="2"/>
<rect x="42" y="50" width="16" height="20" fill="#00C853" stroke="#333"/>
<line x1="50" y1="40" x2="50" y2="50" stroke="#333" stroke-width="2"/>
<line x1="8" y1="50" x2="72" y2="50" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
</svg>`
}, },
'CDL_DOJISTAR': { 'CDL_DOJISTAR': {
description: 'Doji Star - Doji that gaps away from previous candle, indicating potential reversal.', description: 'Doji Star - Doji that gaps away from previous candle, indicating potential reversal.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="12" y="25" width="16" height="40" fill="#00C853" stroke="#333"/>
<line x1="20" y1="18" x2="20" y2="25" stroke="#333" stroke-width="2"/>
<line x1="50" y1="8" x2="50" y2="25" stroke="#333" stroke-width="2"/>
<line x1="42" y1="12" x2="58" y2="12" stroke="#333" stroke-width="3"/>
</svg>`
}, },
'CDL_DRAGONFLYDOJI': { 'CDL_DRAGONFLYDOJI': {
description: 'Dragonfly Doji - Doji with long lower shadow and no upper shadow. Bullish signal.', description: 'Dragonfly Doji - Doji with long lower shadow and no upper shadow. Bullish signal.',
@ -450,11 +516,23 @@ const indicatorInfo = {
}, },
'CDL_EVENINGDOJISTAR': { 'CDL_EVENINGDOJISTAR': {
description: 'Evening Doji Star - Bearish three-candle reversal with doji as the middle star.', description: 'Evening Doji Star - Bearish three-candle reversal with doji as the middle star.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="30" width="14" height="38" fill="#00C853" stroke="#333"/>
<line x1="15" y1="25" x2="15" y2="30" stroke="#333" stroke-width="2"/>
<line x1="41" y1="8" x2="41" y2="25" stroke="#333" stroke-width="2"/>
<line x1="34" y1="12" x2="48" y2="12" stroke="#333" stroke-width="3"/>
<rect x="60" y="18" width="14" height="38" fill="#FF5252" stroke="#333"/>
<line x1="67" y1="56" x2="67" y2="65" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_GAPSIDESIDEWHITE': { 'CDL_GAPSIDESIDEWHITE': {
description: 'Gap Side-by-Side White - Continuation pattern with gap and two similar bullish candles.', description: 'Gap Side-by-Side White - Continuation pattern with gap and two similar bullish candles.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="35" width="14" height="30" fill="#00C853" stroke="#333"/>
<line x1="15" y1="30" x2="15" y2="35" stroke="#333" stroke-width="2"/>
<rect x="32" y="15" width="12" height="25" fill="#00C853" stroke="#333"/>
<rect x="50" y="15" width="12" height="25" fill="#00C853" stroke="#333"/>
</svg>`
}, },
'CDL_GRAVESTONEDOJI': { 'CDL_GRAVESTONEDOJI': {
description: 'Gravestone Doji - Doji with long upper shadow and no lower shadow. Bearish signal.', description: 'Gravestone Doji - Doji with long upper shadow and no lower shadow. Bearish signal.',
@ -472,7 +550,11 @@ const indicatorInfo = {
}, },
'CDL_HARAMICROSS': { 'CDL_HARAMICROSS': {
description: 'Harami Cross - Harami pattern where the second candle is a doji.', description: 'Harami Cross - Harami pattern where the second candle is a doji.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="10" y="15" width="20" height="50" fill="#FF5252" stroke="#333" stroke-width="2"/>
<line x1="50" y1="32" x2="50" y2="48" stroke="#333" stroke-width="2"/>
<line x1="42" y1="40" x2="58" y2="40" stroke="#333" stroke-width="3"/>
</svg>`
}, },
'CDL_HIGHWAVE': { 'CDL_HIGHWAVE': {
description: 'High Wave - Candle with very long upper and lower shadows, showing extreme indecision.', description: 'High Wave - Candle with very long upper and lower shadows, showing extreme indecision.',
@ -483,35 +565,73 @@ const indicatorInfo = {
}, },
'CDL_HIKKAKE': { 'CDL_HIKKAKE': {
description: 'Hikkake - Inside bar followed by false breakout and reversal.', description: 'Hikkake - Inside bar followed by false breakout and reversal.',
svg: null svg: `<svg width="120" height="80" viewBox="0 0 120 80">
<rect x="5" y="20" width="14" height="40" fill="#888" stroke="#333"/>
<rect x="24" y="30" width="10" height="20" fill="#888" stroke="#333"/>
<rect x="39" y="25" width="10" height="15" fill="#FF5252" stroke="#333"/>
<rect x="54" y="35" width="12" height="30" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_HIKKAKEMOD': { 'CDL_HIKKAKEMOD': {
description: 'Modified Hikkake - Hikkake variation with specific confirmation requirements.', description: 'Modified Hikkake - Hikkake variation with specific confirmation requirements.',
svg: null svg: `<svg width="130" height="80" viewBox="0 0 130 80">
<rect x="5" y="20" width="14" height="40" fill="#888" stroke="#333"/>
<rect x="24" y="30" width="10" height="20" fill="#888" stroke="#333"/>
<rect x="39" y="25" width="10" height="15" fill="#FF5252" stroke="#333"/>
<rect x="54" y="28" width="10" height="12" fill="#888" stroke="#333"/>
<rect x="69" y="35" width="12" height="30" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_HOMINGPIGEON': { 'CDL_HOMINGPIGEON': {
description: 'Homing Pigeon - Bullish harami variant where both candles are bearish.', description: 'Homing Pigeon - Bullish harami variant where both candles are bearish.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="10" y="15" width="18" height="45" fill="#FF5252" stroke="#333" stroke-width="2"/>
<rect x="42" y="28" width="12" height="22" fill="#FF5252" stroke="#333"/>
</svg>`
}, },
'CDL_IDENTICAL3CROWS': { 'CDL_IDENTICAL3CROWS': {
description: 'Identical Three Crows - Three bearish candles each opening at previous close.', description: 'Identical Three Crows - Three bearish candles each opening at previous close.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="10" width="14" height="20" fill="#FF5252" stroke="#333"/>
<rect x="32" y="30" width="14" height="20" fill="#FF5252" stroke="#333"/>
<rect x="56" y="50" width="14" height="20" fill="#FF5252" stroke="#333"/>
<line x1="8" y1="30" x2="32" y2="30" stroke="#888" stroke-width="1" stroke-dasharray="2,2"/>
<line x1="32" y1="50" x2="56" y2="50" stroke="#888" stroke-width="1" stroke-dasharray="2,2"/>
</svg>`
}, },
'CDL_INNECK': { 'CDL_INNECK': {
description: 'In-Neck - Bearish continuation where second candle closes just at first candle low.', description: 'In-Neck - Bearish continuation where second candle closes just at first candle low.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="12" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
<line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
<rect x="42" y="50" width="14" height="15" fill="#00C853" stroke="#333"/>
<line x1="49" y1="40" x2="49" y2="50" stroke="#333" stroke-width="2"/>
<line x1="8" y1="55" x2="72" y2="55" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
</svg>`
}, },
'CDL_KICKING': { 'CDL_KICKING': {
description: 'Kicking - Two marubozu candles of opposite color with gap between them.', description: 'Kicking - Two marubozu candles of opposite color with gap between them.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="10" y="35" width="18" height="35" fill="#FF5252" stroke="#333" stroke-width="2"/>
<rect x="42" y="10" width="18" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_KICKINGBYLENGTH': { 'CDL_KICKINGBYLENGTH': {
description: 'Kicking By Length - Kicking pattern where direction is determined by longer marubozu.', description: 'Kicking By Length - Kicking pattern where direction is determined by longer marubozu.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="10" y="40" width="16" height="28" fill="#FF5252" stroke="#333"/>
<rect x="42" y="10" width="20" height="42" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_LADDERBOTTOM': { 'CDL_LADDERBOTTOM': {
description: 'Ladder Bottom - Five-candle bullish reversal at end of downtrend.', description: 'Ladder Bottom - Five-candle bullish reversal at end of downtrend.',
svg: null svg: `<svg width="130" height="80" viewBox="0 0 130 80">
<rect x="5" y="10" width="12" height="18" fill="#FF5252" stroke="#333"/>
<rect x="22" y="22" width="12" height="18" fill="#FF5252" stroke="#333"/>
<rect x="39" y="34" width="12" height="18" fill="#FF5252" stroke="#333"/>
<rect x="56" y="46" width="12" height="18" fill="#FF5252" stroke="#333"/>
<rect x="73" y="30" width="14" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_LONGLEGGEDDOJI': { 'CDL_LONGLEGGEDDOJI': {
description: 'Long-Legged Doji - Doji with very long shadows both above and below.', description: 'Long-Legged Doji - Doji with very long shadows both above and below.',
@ -522,75 +642,167 @@ const indicatorInfo = {
}, },
'CDL_LONGLINE': { 'CDL_LONGLINE': {
description: 'Long Line Candle - Candle with unusually long body relative to recent candles.', description: 'Long Line Candle - Candle with unusually long body relative to recent candles.',
svg: null svg: `<svg width="60" height="80" viewBox="0 0 60 80">
<rect x="20" y="8" width="20" height="60" fill="#00C853" stroke="#333" stroke-width="2"/>
<line x1="30" y1="68" x2="30" y2="74" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_MATCHINGLOW': { 'CDL_MATCHINGLOW': {
description: 'Matching Low - Two candles with identical lows, potential support/reversal.', description: 'Matching Low - Two candles with identical lows, potential support/reversal.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="12" y="20" width="16" height="35" fill="#FF5252" stroke="#333"/>
<line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
<rect x="42" y="30" width="16" height="25" fill="#FF5252" stroke="#333"/>
<line x1="50" y1="55" x2="50" y2="65" stroke="#333" stroke-width="2"/>
<line x1="8" y1="55" x2="72" y2="55" stroke="#00C853" stroke-width="2" stroke-dasharray="4,2"/>
</svg>`
}, },
'CDL_MATHOLD': { 'CDL_MATHOLD': {
description: 'Mat Hold - Five-candle bullish continuation with small retracement.', description: 'Mat Hold - Five-candle bullish continuation with small retracement.',
svg: null svg: `<svg width="130" height="80" viewBox="0 0 130 80">
<rect x="5" y="40" width="14" height="30" fill="#00C853" stroke="#333" stroke-width="2"/>
<rect x="24" y="32" width="10" height="12" fill="#FF5252" stroke="#333"/>
<rect x="39" y="28" width="10" height="12" fill="#FF5252" stroke="#333"/>
<rect x="54" y="30" width="10" height="12" fill="#FF5252" stroke="#333"/>
<rect x="69" y="18" width="14" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_MORNINGDOJISTAR': { 'CDL_MORNINGDOJISTAR': {
description: 'Morning Doji Star - Bullish three-candle reversal with doji as the middle star.', description: 'Morning Doji Star - Bullish three-candle reversal with doji as the middle star.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="15" width="14" height="38" fill="#FF5252" stroke="#333"/>
<line x1="15" y1="53" x2="15" y2="60" stroke="#333" stroke-width="2"/>
<line x1="41" y1="58" x2="41" y2="72" stroke="#333" stroke-width="2"/>
<line x1="34" y1="65" x2="48" y2="65" stroke="#333" stroke-width="3"/>
<rect x="60" y="25" width="14" height="38" fill="#00C853" stroke="#333"/>
<line x1="67" y1="18" x2="67" y2="25" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_ONNECK': { 'CDL_ONNECK': {
description: 'On-Neck - Bearish continuation where second candle closes exactly at first candle low.', description: 'On-Neck - Bearish continuation where second candle closes exactly at first candle low.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="12" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
<line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
<rect x="42" y="52" width="14" height="13" fill="#00C853" stroke="#333"/>
<line x1="49" y1="42" x2="49" y2="52" stroke="#333" stroke-width="2"/>
<line x1="8" y1="55" x2="72" y2="55" stroke="#FF5252" stroke-width="2" stroke-dasharray="4,2"/>
</svg>`
}, },
'CDL_RICKSHAWMAN': { 'CDL_RICKSHAWMAN': {
description: 'Rickshaw Man - Long-legged doji with open and close at the center.', description: 'Rickshaw Man - Long-legged doji with open and close at the center.',
svg: null svg: `<svg width="60" height="80" viewBox="0 0 60 80">
<line x1="30" y1="5" x2="30" y2="75" stroke="#333" stroke-width="2"/>
<line x1="18" y1="40" x2="42" y2="40" stroke="#333" stroke-width="4"/>
</svg>`
}, },
'CDL_RISEFALL3METHODS': { 'CDL_RISEFALL3METHODS': {
description: 'Rising/Falling Three Methods - Five-candle continuation with small retracement candles.', description: 'Rising/Falling Three Methods - Five-candle continuation with small retracement candles.',
svg: null svg: `<svg width="130" height="80" viewBox="0 0 130 80">
<rect x="5" y="35" width="16" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
<rect x="26" y="30" width="10" height="15" fill="#FF5252" stroke="#333"/>
<rect x="41" y="32" width="10" height="15" fill="#FF5252" stroke="#333"/>
<rect x="56" y="35" width="10" height="15" fill="#FF5252" stroke="#333"/>
<rect x="71" y="15" width="16" height="40" fill="#00C853" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_SEPARATINGLINES': { 'CDL_SEPARATINGLINES': {
description: 'Separating Lines - Continuation with opposite-colored candle opening at same price.', description: 'Separating Lines - Continuation with opposite-colored candle opening at same price.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="12" y="30" width="16" height="35" fill="#FF5252" stroke="#333"/>
<rect x="42" y="30" width="16" height="35" fill="#00C853" stroke="#333"/>
<line x1="8" y1="30" x2="72" y2="30" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
</svg>`
}, },
'CDL_SHORTLINE': { 'CDL_SHORTLINE': {
description: 'Short Line Candle - Candle with unusually short body relative to recent candles.', description: 'Short Line Candle - Candle with unusually short body relative to recent candles.',
svg: null svg: `<svg width="60" height="80" viewBox="0 0 60 80">
<line x1="30" y1="25" x2="30" y2="55" stroke="#333" stroke-width="2"/>
<rect x="22" y="36" width="16" height="8" fill="#888" stroke="#333"/>
</svg>`
}, },
'CDL_STALLEDPATTERN': { 'CDL_STALLEDPATTERN': {
description: 'Stalled Pattern - Three bullish candles where third shows exhaustion (small body at top).', description: 'Stalled Pattern - Three bullish candles where third shows exhaustion (small body at top).',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="45" width="14" height="25" fill="#00C853" stroke="#333"/>
<rect x="32" y="30" width="14" height="25" fill="#00C853" stroke="#333"/>
<rect x="56" y="22" width="12" height="10" fill="#00C853" stroke="#333"/>
<line x1="62" y1="15" x2="62" y2="22" stroke="#333" stroke-width="2"/>
<line x1="62" y1="32" x2="62" y2="40" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_STICKSANDWICH': { 'CDL_STICKSANDWICH': {
description: 'Stick Sandwich - Two candles with matching closes sandwiching an opposite candle.', description: 'Stick Sandwich - Two candles with matching closes sandwiching an opposite candle.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="25" width="14" height="30" fill="#FF5252" stroke="#333"/>
<rect x="32" y="15" width="14" height="30" fill="#00C853" stroke="#333"/>
<rect x="56" y="25" width="14" height="30" fill="#FF5252" stroke="#333"/>
<line x1="4" y1="55" x2="75" y2="55" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
</svg>`
}, },
'CDL_TAKURI': { 'CDL_TAKURI': {
description: 'Takuri - Dragonfly doji variant with very long lower shadow, strong bullish signal.', description: 'Takuri - Dragonfly doji variant with very long lower shadow, strong bullish signal.',
svg: null svg: `<svg width="60" height="80" viewBox="0 0 60 80">
<line x1="30" y1="15" x2="30" y2="72" stroke="#333" stroke-width="2"/>
<rect x="24" y="15" width="12" height="6" fill="#00C853" stroke="#333"/>
</svg>`
}, },
'CDL_TASUKIGAP': { 'CDL_TASUKIGAP': {
description: 'Tasuki Gap - Gap continuation pattern where third candle partially fills the gap.', description: 'Tasuki Gap - Gap continuation pattern where third candle partially fills the gap.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="40" width="14" height="28" fill="#00C853" stroke="#333"/>
<rect x="32" y="15" width="14" height="25" fill="#00C853" stroke="#333"/>
<rect x="56" y="28" width="14" height="22" fill="#FF5252" stroke="#333"/>
<line x1="4" y1="40" x2="75" y2="40" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
</svg>`
}, },
'CDL_THRUSTING': { 'CDL_THRUSTING': {
description: 'Thrusting - Bearish continuation similar to in-neck but closing slightly higher.', description: 'Thrusting - Bearish continuation similar to in-neck but closing slightly higher.',
svg: null svg: `<svg width="80" height="80" viewBox="0 0 80 80">
<rect x="12" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
<line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
<rect x="42" y="45" width="14" height="18" fill="#00C853" stroke="#333"/>
<line x1="49" y1="38" x2="49" y2="45" stroke="#333" stroke-width="2"/>
<line x1="8" y1="35" x2="72" y2="35" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
</svg>`
}, },
'CDL_TRISTAR': { 'CDL_TRISTAR': {
description: 'Tri-Star - Three consecutive doji candles signaling major reversal.', description: 'Tri-Star - Three consecutive doji candles signaling major reversal.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<line x1="18" y1="25" x2="18" y2="55" stroke="#333" stroke-width="2"/>
<line x1="10" y1="40" x2="26" y2="40" stroke="#333" stroke-width="3"/>
<line x1="45" y1="18" x2="45" y2="45" stroke="#333" stroke-width="2"/>
<line x1="37" y1="32" x2="53" y2="32" stroke="#333" stroke-width="3"/>
<line x1="72" y1="22" x2="72" y2="52" stroke="#333" stroke-width="2"/>
<line x1="64" y1="37" x2="80" y2="37" stroke="#333" stroke-width="3"/>
</svg>`
}, },
'CDL_UNIQUE3RIVER': { 'CDL_UNIQUE3RIVER': {
description: 'Unique Three River - Rare bullish reversal with three specific candle formations.', description: 'Unique Three River - Rare bullish reversal with three specific candle formations.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="15" width="14" height="40" fill="#FF5252" stroke="#333"/>
<line x1="15" y1="55" x2="15" y2="65" stroke="#333" stroke-width="2"/>
<rect x="32" y="38" width="12" height="20" fill="#FF5252" stroke="#333"/>
<line x1="38" y1="58" x2="38" y2="68" stroke="#333" stroke-width="2"/>
<rect x="54" y="32" width="12" height="12" fill="#00C853" stroke="#333"/>
</svg>`
}, },
'CDL_UPSIDEGAP2CROWS': { 'CDL_UPSIDEGAP2CROWS': {
description: 'Upside Gap Two Crows - Bearish reversal with gap up followed by two engulfing bearish candles.', description: 'Upside Gap Two Crows - Bearish reversal with gap up followed by two engulfing bearish candles.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="35" width="14" height="35" fill="#00C853" stroke="#333"/>
<line x1="15" y1="28" x2="15" y2="35" stroke="#333" stroke-width="2"/>
<rect x="32" y="15" width="12" height="15" fill="#FF5252" stroke="#333"/>
<rect x="54" y="12" width="16" height="25" fill="#FF5252" stroke="#333" stroke-width="2"/>
</svg>`
}, },
'CDL_XSIDEGAP3METHODS': { 'CDL_XSIDEGAP3METHODS': {
description: 'Side Gap Three Methods - Continuation pattern with gap being filled by third candle.', description: 'Side Gap Three Methods - Continuation pattern with gap being filled by third candle.',
svg: null svg: `<svg width="100" height="80" viewBox="0 0 100 80">
<rect x="8" y="25" width="14" height="30" fill="#00C853" stroke="#333"/>
<rect x="32" y="10" width="14" height="25" fill="#00C853" stroke="#333"/>
<rect x="56" y="18" width="14" height="32" fill="#FF5252" stroke="#333"/>
<line x1="4" y1="25" x2="75" y2="25" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
</svg>`
} }
}; };