bullet_card.txt

bullet = 
// set a percentage for underachieving score
VAR _bad = .5 // set a percentage for sat score
VAR _sat = .75 // target will be 100%
VAR _target = 1 // max width set at 500 in case actual is over 100%
VAR _max_width = 500 // set actual percentage
VAR _actual = 1.2 // figure out ratio for underperforming area
VAR b_ratio = _bad * _max_width // figure out ratio for sat area
VAR s_ratio = _sat * _max_width // figure out ratio for target line
VAR t_ratio = _target * _max_width // figure out ratio for actual and ensure it is not larger than default width of svg
VAR a_ratio =
    IF ( ( _actual * _max_width ) > 600, 600, _actual * _max_width ) // concat the svg together
VAR svg = "data:image/svg+xml;utf8,<svg width=""600"" height=""200"" viewBox=""0 0 600 200"" fill=""none"" xmlns=""http://www.w3.org/2000/svg"">
<rect width=""600"" height=""200"" fill=""white""/>
<rect y=""50"" width=""" & b_ratio & """ height=""100"" fill=""#353535""/>
<rect x=""" & b_ratio & """ y=""50"" width=""" & ( s_ratio - b_ratio ) & """ height=""100"" fill=""#3C6E71""/>
<rect y=""75"" width=""" & a_ratio & """ height=""50"" fill=""#D9D9D9""/>
<line x1=""" & t_ratio & """ y1=""62"" x2=""" & t_ratio & """ y2=""138"" stroke=""#284B63"" stroke-width=""5""/>
</svg>"
RETURN
    svg