heatmap-builder 0.2.0 → 0.4.3

data/lib/heatmap_builder/color_helpers.rb

@@ -1,170 +1,150 @@
 module HeatmapBuilder
   module ColorHelpers
-    private
+    class << self
+      def score_to_color(score, colors:)
+        return colors.first if score == 0
 
-    def score_to_color(score, colors:)
-      # Generate color palette if colors is a hash
-      if colors.is_a?(Hash)
-        colors = generate_color_palette(colors[:from], colors[:to], colors[:steps])
+        max_color_index = colors.length - 1
+        color_index = 1 + (score - 1) % max_color_index
+        colors[color_index]
       end
 
-      return colors.first if score == 0
+      def adjust_lightness(hex_color, factor:)
+        rgb = hex_to_rgb(hex_color)
+        oklch = rgb_to_oklch(*rgb)
 
-      max_color_index = colors.length - 1
-      color_index = 1 + (score - 1) % max_color_index
-      colors[color_index]
-    end
+        darker_oklch = [oklch[0] * factor, oklch[1], oklch[2]]
+        darker_rgb = oklch_to_rgb(*darker_oklch)
 
-    def darker_color(hex_color, factor: 0.9)
-      rgb = hex_to_rgb(hex_color)
-      oklch = rgb_to_oklch(*rgb)
+        rgb_to_hex(*darker_rgb)
+      end
 
-      # Reduce lightness (L component) by factor
-      darker_oklch = [oklch[0] * factor, oklch[1], oklch[2]]
-      darker_rgb = oklch_to_rgb(*darker_oklch)
+      def make_color_inactive(hex_color)
+        rgb = hex_to_rgb(hex_color)
+        oklch = rgb_to_oklch(*rgb)
 
-      rgb_to_hex(*darker_rgb)
-    end
+        inactive_oklch = [
+          oklch[0] * 0.85, # Slightly reduce lightness
+          oklch[1] * 0.4,  # Significantly reduce chroma (saturation)
+          oklch[2]         # Keep hue unchanged
+        ]
 
-    def make_color_inactive(hex_color)
-      # Convert to OKLCH for blending
-      rgb = hex_to_rgb(hex_color)
-      oklch = rgb_to_oklch(*rgb)
-
-      # Reduce chroma (saturation) to make it more muted
-      # Also slightly reduce lightness
-      inactive_oklch = [
-        oklch[0] * 0.85,  # Slightly reduce lightness
-        oklch[1] * 0.4,   # Significantly reduce chroma (saturation)
-        oklch[2]          # Keep hue unchanged
-      ]
-
-      inactive_rgb = oklch_to_rgb(*inactive_oklch)
-      rgb_to_hex(*inactive_rgb)
-    end
+        inactive_rgb = oklch_to_rgb(*inactive_oklch)
+        rgb_to_hex(*inactive_rgb)
+      end
 
-    def rgb_to_oklch(r, g, b)
-      # Convert to linear RGB first
-      r_linear = srgb_to_linear(r / 255.0)
-      g_linear = srgb_to_linear(g / 255.0)
-      b_linear = srgb_to_linear(b / 255.0)
-
-      # Linear RGB to OKLab using the Oklab transformation matrix
-      l = 0.4122214708 * r_linear + 0.5363325363 * g_linear + 0.0514459929 * b_linear
-      m = 0.2119034982 * r_linear + 0.6806995451 * g_linear + 0.1073969566 * b_linear
-      s = 0.0883024619 * r_linear + 0.2817188376 * g_linear + 0.6299787005 * b_linear
-
-      # Apply cube root
-      l_root = (l >= 0) ? l**(1.0 / 3) : -((-l)**(1.0 / 3))
-      m_root = (m >= 0) ? m**(1.0 / 3) : -((-m)**(1.0 / 3))
-      s_root = (s >= 0) ? s**(1.0 / 3) : -((-s)**(1.0 / 3))
-
-      # Convert to OKLab
-      ok_l = 0.2104542553 * l_root + 0.7936177850 * m_root - 0.0040720468 * s_root
-      ok_a = 1.9779984951 * l_root - 2.4285922050 * m_root + 0.4505937099 * s_root
-      ok_b = 0.0259040371 * l_root + 0.7827717662 * m_root - 0.8086757660 * s_root
-
-      # Convert OKLab to OKLCH
-      chroma = Math.sqrt(ok_a * ok_a + ok_b * ok_b)
-      hue = Math.atan2(ok_b, ok_a) * 180.0 / Math::PI
-      hue += 360 if hue < 0
-
-      [ok_l, chroma, hue]
-    end
+      def generate_color_palette(from_color, to_color, steps)
+        from_rgb = hex_to_rgb(from_color)
+        to_rgb = hex_to_rgb(to_color)
 
-    def oklch_to_rgb(ok_l, chroma, hue)
-      # Convert OKLCH to OKLab
-      hue_rad = hue * Math::PI / 180.0
-      ok_a = chroma * Math.cos(hue_rad)
-      ok_b = chroma * Math.sin(hue_rad)
-
-      # OKLab to linear RGB
-      l_root = ok_l + 0.3963377774 * ok_a + 0.2158037573 * ok_b
-      m_root = ok_l - 0.1055613458 * ok_a - 0.0638541728 * ok_b
-      s_root = ok_l - 0.0894841775 * ok_a - 1.2914855480 * ok_b
-
-      # Cube the values
-      l = l_root * l_root * l_root
-      m = m_root * m_root * m_root
-      s = s_root * s_root * s_root
-
-      # Convert to linear RGB
-      r_linear = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s
-      g_linear = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s
-      b_linear = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
-
-      # Convert to sRGB
-      r = linear_to_srgb(r_linear)
-      g = linear_to_srgb(g_linear)
-      b = linear_to_srgb(b_linear)
-
-      # Clamp to 0-255 and convert to integers
-      r = (r * 255).clamp(0, 255).round
-      g = (g * 255).clamp(0, 255).round
-      b = (b * 255).clamp(0, 255).round
-
-      [r, g, b]
-    end
+        from_oklch = rgb_to_oklch(*from_rgb)
+        to_oklch = rgb_to_oklch(*to_rgb)
 
-    def srgb_to_linear(component)
-      (component <= 0.04045) ? component / 12.92 : ((component + 0.055) / 1.055)**2.4
-    end
+        colors = []
+        (0...steps).each do |i|
+          ratio = i.to_f / (steps - 1)
+          interpolated_oklch = interpolate_oklch(from_oklch, to_oklch, ratio)
+          interpolated_rgb = oklch_to_rgb(*interpolated_oklch)
+          colors << rgb_to_hex(*interpolated_rgb)
+        end
 
-    def linear_to_srgb(component)
-      (component <= 0.0031308) ? component * 12.92 : 1.055 * (component**(1.0 / 2.4)) - 0.055
-    end
+        colors
+      end
+
+      private
+
+      def rgb_to_oklch(r, g, b)
+        r_linear = srgb_to_linear(r / 255.0)
+        g_linear = srgb_to_linear(g / 255.0)
+        b_linear = srgb_to_linear(b / 255.0)
+
+        l = 0.4122214708 * r_linear + 0.5363325363 * g_linear + 0.0514459929 * b_linear
+        m = 0.2119034982 * r_linear + 0.6806995451 * g_linear + 0.1073969566 * b_linear
+        s = 0.0883024619 * r_linear + 0.2817188376 * g_linear + 0.6299787005 * b_linear
+
+        l_root = (l >= 0) ? l**(1.0 / 3) : -((-l)**(1.0 / 3))
+        m_root = (m >= 0) ? m**(1.0 / 3) : -((-m)**(1.0 / 3))
+        s_root = (s >= 0) ? s**(1.0 / 3) : -((-s)**(1.0 / 3))
 
-    def interpolate_oklch(oklch1, oklch2, ratio)
-      # Handle hue interpolation (shortest path around the circle)
-      hue1, hue2 = oklch1[2], oklch2[2]
-      hue_diff = hue2 - hue1
+        ok_l = 0.2104542553 * l_root + 0.7936177850 * m_root - 0.0040720468 * s_root
+        ok_a = 1.9779984951 * l_root - 2.4285922050 * m_root + 0.4505937099 * s_root
+        ok_b = 0.0259040371 * l_root + 0.7827717662 * m_root - 0.8086757660 * s_root
 
-      # Take shorter path around the circle
-      if hue_diff > 180
-        hue_diff -= 360
-      elsif hue_diff < -180
-        hue_diff += 360
+        chroma = Math.sqrt(ok_a * ok_a + ok_b * ok_b)
+        hue = Math.atan2(ok_b, ok_a) * 180.0 / Math::PI
+        hue += 360 if hue < 0
+
+        [ok_l, chroma, hue]
       end
 
-      interpolated_hue = hue1 + hue_diff * ratio
-      interpolated_hue += 360 if interpolated_hue < 0
-      interpolated_hue -= 360 if interpolated_hue >= 360
+      def oklch_to_rgb(ok_l, chroma, hue)
+        hue_rad = hue * Math::PI / 180.0
+        ok_a = chroma * Math.cos(hue_rad)
+        ok_b = chroma * Math.sin(hue_rad)
 
-      [
-        oklch1[0] + (oklch2[0] - oklch1[0]) * ratio, # L (lightness)
-        oklch1[1] + (oklch2[1] - oklch1[1]) * ratio, # C (chroma)
-        interpolated_hue                              # H (hue)
-      ]
-    end
+        l_root = ok_l + 0.3963377774 * ok_a + 0.2158037573 * ok_b
+        m_root = ok_l - 0.1055613458 * ok_a - 0.0638541728 * ok_b
+        s_root = ok_l - 0.0894841775 * ok_a - 1.2914855480 * ok_b
 
-    def hex_to_rgb(hex_color)
-      hex = hex_color.delete("#")
-      r = hex[0..1].to_i(16)
-      g = hex[2..3].to_i(16)
-      b = hex[4..5].to_i(16)
-      [r, g, b]
-    end
+        l = l_root * l_root * l_root
+        m = m_root * m_root * m_root
+        s = s_root * s_root * s_root
 
-    def rgb_to_hex(r, g, b)
-      "#%02x%02x%02x" % [r, g, b]
-    end
+        r_linear = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s
+        g_linear = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s
+        b_linear = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
 
-    def generate_color_palette(from_color, to_color, steps)
-      from_rgb = hex_to_rgb(from_color)
-      to_rgb = hex_to_rgb(to_color)
+        r = linear_to_srgb(r_linear)
+        g = linear_to_srgb(g_linear)
+        b = linear_to_srgb(b_linear)
 
-      from_oklch = rgb_to_oklch(*from_rgb)
-      to_oklch = rgb_to_oklch(*to_rgb)
+        r = (r * 255).clamp(0, 255).round
+        g = (g * 255).clamp(0, 255).round
+        b = (b * 255).clamp(0, 255).round
 
-      colors = []
-      (0...steps).each do |i|
-        ratio = i.to_f / (steps - 1)
-        interpolated_oklch = interpolate_oklch(from_oklch, to_oklch, ratio)
-        interpolated_rgb = oklch_to_rgb(*interpolated_oklch)
-        colors << rgb_to_hex(*interpolated_rgb)
+        [r, g, b]
       end
 
-      colors
+      def srgb_to_linear(component)
+        (component <= 0.04045) ? component / 12.92 : ((component + 0.055) / 1.055)**2.4
+      end
+
+      def linear_to_srgb(component)
+        (component <= 0.0031308) ? component * 12.92 : 1.055 * (component**(1.0 / 2.4)) - 0.055
+      end
+
+      def interpolate_oklch(oklch1, oklch2, ratio)
+        hue1, hue2 = oklch1[2], oklch2[2]
+        hue_diff = hue2 - hue1
+
+        if hue_diff > 180
+          hue_diff -= 360
+        elsif hue_diff < -180
+          hue_diff += 360
+        end
+
+        interpolated_hue = hue1 + hue_diff * ratio
+        interpolated_hue += 360 if interpolated_hue < 0
+        interpolated_hue -= 360 if interpolated_hue >= 360
+
+        [
+          oklch1[0] + (oklch2[0] - oklch1[0]) * ratio,
+          oklch1[1] + (oklch2[1] - oklch1[1]) * ratio,
+          interpolated_hue
+        ]
+      end
+
+      def hex_to_rgb(hex_color)
+        hex = hex_color.delete("#")
+        r = hex[0..1].to_i(16)
+        g = hex[2..3].to_i(16)
+        b = hex[4..5].to_i(16)
+        [r, g, b]
+      end
+
+      def rgb_to_hex(r, g, b)
+        "#%02x%02x%02x" % [r, g, b]
+      end
     end
   end
 end

data/lib/heatmap_builder/svg_helpers.rb

@@ -4,7 +4,7 @@ module HeatmapBuilder
 
     def svg_element(tag, attributes = {}, &block)
       attr_string = attributes.map do |key, value|
-        "#{kebab_case(key)}=\"#{value}\""
+        "#{kebab_case(key)}=\"#{escape_xml(value.to_s)}\""
       end.join(" ")
 
       attr_string = " #{attr_string}" unless attr_string.empty?
@@ -35,7 +35,7 @@ module HeatmapBuilder
         font_family: "Arial, sans-serif"
       }
 
-      svg_element("text", {x: x, y: y}.merge(default_attrs).merge(attributes)) { content }
+      svg_element("text", {x: x, y: y}.merge(default_attrs).merge(attributes)) { escape_xml(content) }
     end
 
     def svg_container(width:, height:, &block)
@@ -50,14 +50,21 @@ module HeatmapBuilder
       key.to_s.tr("_", "-")
     end
 
-    def cell_border(x, y, color, cell_size:, border_width:, corner_radius:)
+    def escape_xml(str)
+      str.gsub("&", "&amp;").gsub("<", "&lt;").gsub(">", "&gt;").gsub('"', "&quot;")
+    end
+
+    def cell_border(x, y, color, cell_size:, border_width:, corner_radius:, border_lightness_factor: 0.9)
       return "" unless border_width > 0
+      # A factor of 1 leaves the color unchanged, so the border matches the
+      # fill exactly and would be invisible. Skip drawing it entirely.
+      return "" if border_lightness_factor == 1
 
       inset = border_width / 2.0
       border_x = x + inset
       border_y = y + inset
       border_size = cell_size - border_width
-      border_color = darker_color(color)
+      border_color = ColorHelpers.adjust_lightness(color, factor: border_lightness_factor)
       border_radius = (corner_radius > 0) ? [corner_radius - inset, 0].max : 0
 
       svg_rect(

data/lib/heatmap_builder/value_conversion.rb

@@ -32,11 +32,9 @@ module HeatmapBuilder
     end
 
     def convert_value_to_score(value, **params)
-      value = value_min if value.nil?
-
       if options[:value_to_score]
         score = options[:value_to_score].call(
-          value: value,
+          value: value.nil? ? value_min : value,
           min: value_min,
           max: value_max,
           max_score: color_count - 1,
@@ -50,14 +48,20 @@ module HeatmapBuilder
         return score
       end
 
+      # Score 0 is reserved for empty cells (zero or missing values). Any
+      # non-zero value maps into 1..max_score so even the smallest activity is
+      # visibly distinct from an empty day.
+      return 0 if value.nil? || value.zero?
+
+      max_score = color_count - 1
       clamped_value = value.clamp(value_min, value_max)
 
       if value_min == value_max
-        0
+        max_score
       else
         range = value_max - value_min
         normalized = (clamped_value - value_min).to_f / range
-        (normalized * (color_count - 1)).round
+        1 + (normalized * (max_score - 1)).round
       end
     end
   end

data/lib/heatmap_builder/version.rb

@@ -1,3 +1,3 @@
 module HeatmapBuilder
-  VERSION = "0.2.0"
+  VERSION = "0.4.3"
 end

metadata

@@ -1,55 +1,55 @@
 --- !ruby/object:Gem::Specification
 name: heatmap-builder
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.4.3
 platform: ruby
 authors:
 - Alex Musayev
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-10-02 00:00:00.000000000 Z
+date: 2026-06-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '2.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '2.0'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '13.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '13.0'
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '5.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '5.0'
 - !ruby/object:Gem::Dependency
@@ -102,8 +102,11 @@ files:
 - bin/generate_examples
 - bin/setup
 - examples/calendar_blue_ocean.svg
+- examples/calendar_cell_borders.svg
 - examples/calendar_default.svg
 - examples/calendar_github_style.svg
+- examples/calendar_month_spacing_rounded.svg
+- examples/calendar_no_borders.svg
 - examples/calendar_purple_vibes.svg
 - examples/calendar_red_to_green.svg
 - examples/calendar_rounded_corners.svg
@@ -111,22 +114,10 @@ files:
 - examples/calendar_sunday_start.svg
 - examples/calendar_warm_sunset.svg
 - examples/calendar_with_outside_cells.svg
-- examples/large_cells.svg
-- examples/linear_blue_ocean.svg
-- examples/linear_github_green.svg
-- examples/linear_neon_gradient.svg
-- examples/linear_purple_vibes.svg
-- examples/linear_red_to_green.svg
-- examples/linear_rounded_corners.svg
-- examples/linear_rounded_corners_max_radius.svg
-- examples/linear_warm_sunset.svg
-- examples/weekly_progress.svg
 - heatmap-builder.gemspec
 - lib/heatmap-builder.rb
-- lib/heatmap_builder/builder.rb
-- lib/heatmap_builder/calendar_heatmap_builder.rb
+- lib/heatmap_builder/calendar.rb
 - lib/heatmap_builder/color_helpers.rb
-- lib/heatmap_builder/linear_heatmap_builder.rb
 - lib/heatmap_builder/svg_helpers.rb
 - lib/heatmap_builder/value_conversion.rb
 - lib/heatmap_builder/version.rb
@@ -146,7 +137,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '3.0'
+      version: '3.3'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="

data/examples/large_cells.svg

@@ -1 +0,0 @@
-<svg width="251" height="35" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="35" height="35" fill="#9be9a8"/><rect x="0.5" y="0.5" width="34" height="34" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="17" y="24.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#000000">1</text><rect x="36" y="0" width="35" height="35" fill="#40c463"/><rect x="36.5" y="0.5" width="34" height="34" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="53" y="24.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#000000">2</text><rect x="72" y="0" width="35" height="35" fill="#30a14e"/><rect x="72.5" y="0.5" width="34" height="34" fill="none" stroke="#108d3b" stroke-width="1"/><text x="89" y="24.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#000000">3</text><rect x="108" y="0" width="35" height="35" fill="#216e39"/><rect x="108.5" y="0.5" width="34" height="34" fill="none" stroke="#0d602c" stroke-width="1"/><text x="125" y="24.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#000000">4</text><rect x="144" y="0" width="35" height="35" fill="#9be9a8"/><rect x="144.5" y="0.5" width="34" height="34" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="161" y="24.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#000000">5</text><rect x="180" y="0" width="35" height="35" fill="#40c463"/><rect x="180.5" y="0.5" width="34" height="34" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="197" y="24.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#000000">6</text><rect x="216" y="0" width="35" height="35" fill="#30a14e"/><rect x="216.5" y="0.5" width="34" height="34" fill="none" stroke="#108d3b" stroke-width="1"/><text x="233" y="24.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#000000">7</text></svg>

data/examples/linear_blue_ocean.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" fill="#f0f9ff"/><rect x="0.5" y="0.5" width="17" height="17" fill="none" stroke="#d0d9df" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" fill="#bae6fd"/><rect x="19.5" y="0.5" width="17" height="17" fill="none" stroke="#9dc9df" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" fill="#7dd3fc"/><rect x="38.5" y="0.5" width="17" height="17" fill="none" stroke="#62b8e0" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" fill="#38bdf8"/><rect x="57.5" y="0.5" width="17" height="17" fill="none" stroke="#03a5df" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" fill="#0ea5e9"/><rect x="76.5" y="0.5" width="17" height="17" fill="none" stroke="#008fd2" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" fill="#bae6fd"/><rect x="95.5" y="0.5" width="17" height="17" fill="none" stroke="#9dc9df" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" fill="#7dd3fc"/><rect x="114.5" y="0.5" width="17" height="17" fill="none" stroke="#62b8e0" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" fill="#38bdf8"/><rect x="133.5" y="0.5" width="17" height="17" fill="none" stroke="#03a5df" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" fill="#0ea5e9"/><rect x="152.5" y="0.5" width="17" height="17" fill="none" stroke="#008fd2" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" fill="#bae6fd"/><rect x="171.5" y="0.5" width="17" height="17" fill="none" stroke="#9dc9df" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/linear_github_green.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" fill="#ebedf0"/><rect x="0.5" y="0.5" width="17" height="17" fill="none" stroke="#ccced1" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" fill="#9be9a8"/><rect x="19.5" y="0.5" width="17" height="17" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" fill="#40c463"/><rect x="38.5" y="0.5" width="17" height="17" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" fill="#30a14e"/><rect x="57.5" y="0.5" width="17" height="17" fill="none" stroke="#108d3b" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" fill="#216e39"/><rect x="76.5" y="0.5" width="17" height="17" fill="none" stroke="#0d602c" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" fill="#9be9a8"/><rect x="95.5" y="0.5" width="17" height="17" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" fill="#40c463"/><rect x="114.5" y="0.5" width="17" height="17" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" fill="#30a14e"/><rect x="133.5" y="0.5" width="17" height="17" fill="none" stroke="#108d3b" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" fill="#216e39"/><rect x="152.5" y="0.5" width="17" height="17" fill="none" stroke="#0d602c" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" fill="#9be9a8"/><rect x="171.5" y="0.5" width="17" height="17" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/linear_neon_gradient.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" fill="#00ffff"/><rect x="0.5" y="0.5" width="17" height="17" fill="none" stroke="#00e0e1" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" fill="#00dbff"/><rect x="19.5" y="0.5" width="17" height="17" fill="none" stroke="#00c0e3" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" fill="#96a6ff"/><rect x="38.5" y="0.5" width="17" height="17" fill="none" stroke="#808fe5" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" fill="#db69ff"/><rect x="57.5" y="0.5" width="17" height="17" fill="none" stroke="#c351e6" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" fill="#ff1493"/><rect x="76.5" y="0.5" width="17" height="17" fill="none" stroke="#e6007f" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" fill="#00dbff"/><rect x="95.5" y="0.5" width="17" height="17" fill="none" stroke="#00c0e3" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" fill="#96a6ff"/><rect x="114.5" y="0.5" width="17" height="17" fill="none" stroke="#808fe5" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" fill="#db69ff"/><rect x="133.5" y="0.5" width="17" height="17" fill="none" stroke="#c351e6" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" fill="#ff1493"/><rect x="152.5" y="0.5" width="17" height="17" fill="none" stroke="#e6007f" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" fill="#00dbff"/><rect x="171.5" y="0.5" width="17" height="17" fill="none" stroke="#00c0e3" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/linear_purple_vibes.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" fill="#f3e8ff"/><rect x="0.5" y="0.5" width="17" height="17" fill="none" stroke="#d4c9e0" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" fill="#d8b4fe"/><rect x="19.5" y="0.5" width="17" height="17" fill="none" stroke="#bd9ae2" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" fill="#c084fc"/><rect x="38.5" y="0.5" width="17" height="17" fill="none" stroke="#a96de3" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" fill="#a855f7"/><rect x="57.5" y="0.5" width="17" height="17" fill="none" stroke="#953fe1" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" fill="#9333ea"/><rect x="76.5" y="0.5" width="17" height="17" fill="none" stroke="#8316d7" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" fill="#d8b4fe"/><rect x="95.5" y="0.5" width="17" height="17" fill="none" stroke="#bd9ae2" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" fill="#c084fc"/><rect x="114.5" y="0.5" width="17" height="17" fill="none" stroke="#a96de3" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" fill="#a855f7"/><rect x="133.5" y="0.5" width="17" height="17" fill="none" stroke="#953fe1" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" fill="#9333ea"/><rect x="152.5" y="0.5" width="17" height="17" fill="none" stroke="#8316d7" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" fill="#d8b4fe"/><rect x="171.5" y="0.5" width="17" height="17" fill="none" stroke="#bd9ae2" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/linear_red_to_green.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" fill="#f5f5f5"/><rect x="0.5" y="0.5" width="17" height="17" fill="none" stroke="#d5d5d5" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" fill="#ff9999"/><rect x="19.5" y="0.5" width="17" height="17" fill="none" stroke="#e48081" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" fill="#f7ad6a"/><rect x="38.5" y="0.5" width="17" height="17" fill="none" stroke="#dc9450" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" fill="#d2c768"/><rect x="57.5" y="0.5" width="17" height="17" fill="none" stroke="#b8ad4d" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" fill="#99dd99"/><rect x="76.5" y="0.5" width="17" height="17" fill="none" stroke="#7fc27f" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" fill="#ff9999"/><rect x="95.5" y="0.5" width="17" height="17" fill="none" stroke="#e48081" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" fill="#f7ad6a"/><rect x="114.5" y="0.5" width="17" height="17" fill="none" stroke="#dc9450" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" fill="#d2c768"/><rect x="133.5" y="0.5" width="17" height="17" fill="none" stroke="#b8ad4d" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" fill="#99dd99"/><rect x="152.5" y="0.5" width="17" height="17" fill="none" stroke="#7fc27f" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" fill="#ff9999"/><rect x="171.5" y="0.5" width="17" height="17" fill="none" stroke="#e48081" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/linear_rounded_corners.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" rx="2" fill="#ebedf0"/><rect x="0.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#ccced1" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" rx="2" fill="#9be9a8"/><rect x="19.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" rx="2" fill="#40c463"/><rect x="38.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" rx="2" fill="#30a14e"/><rect x="57.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#108d3b" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" rx="2" fill="#216e39"/><rect x="76.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#0d602c" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" rx="2" fill="#9be9a8"/><rect x="95.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" rx="2" fill="#40c463"/><rect x="114.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" rx="2" fill="#30a14e"/><rect x="133.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#108d3b" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" rx="2" fill="#216e39"/><rect x="152.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#0d602c" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" rx="2" fill="#9be9a8"/><rect x="171.5" y="0.5" width="17" height="17" rx="1.5" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/linear_rounded_corners_max_radius.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" rx="9" fill="#ebedf0"/><rect x="0.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#ccced1" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" rx="9" fill="#9be9a8"/><rect x="19.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" rx="9" fill="#40c463"/><rect x="38.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" rx="9" fill="#30a14e"/><rect x="57.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#108d3b" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" rx="9" fill="#216e39"/><rect x="76.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#0d602c" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" rx="9" fill="#9be9a8"/><rect x="95.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" rx="9" fill="#40c463"/><rect x="114.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" rx="9" fill="#30a14e"/><rect x="133.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#108d3b" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" rx="9" fill="#216e39"/><rect x="152.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#0d602c" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" rx="9" fill="#9be9a8"/><rect x="171.5" y="0.5" width="17" height="17" rx="8.5" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/linear_warm_sunset.svg

@@ -1 +0,0 @@
-<svg width="189" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" fill="#fef3e2"/><rect x="0.5" y="0.5" width="17" height="17" fill="none" stroke="#ded3c3" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" fill="#fed7aa"/><rect x="19.5" y="0.5" width="17" height="17" fill="none" stroke="#e0ba8e" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" fill="#fdba74"/><rect x="38.5" y="0.5" width="17" height="17" fill="none" stroke="#e19f59" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="57" y="0" width="18" height="18" fill="#fb923c"/><rect x="57.5" y="0.5" width="17" height="17" fill="none" stroke="#e17a1a" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="76" y="0" width="18" height="18" fill="#f97316"/><rect x="76.5" y="0.5" width="17" height="17" fill="none" stroke="#e05c00" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" fill="#fed7aa"/><rect x="95.5" y="0.5" width="17" height="17" fill="none" stroke="#e0ba8e" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">5</text><rect x="114" y="0" width="18" height="18" fill="#fdba74"/><rect x="114.5" y="0.5" width="17" height="17" fill="none" stroke="#e19f59" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">6</text><rect x="133" y="0" width="18" height="18" fill="#fb923c"/><rect x="133.5" y="0.5" width="17" height="17" fill="none" stroke="#e17a1a" stroke-width="1"/><text x="142" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">7</text><rect x="152" y="0" width="18" height="18" fill="#f97316"/><rect x="152.5" y="0.5" width="17" height="17" fill="none" stroke="#e05c00" stroke-width="1"/><text x="161" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">8</text><rect x="171" y="0" width="18" height="18" fill="#fed7aa"/><rect x="171.5" y="0.5" width="17" height="17" fill="none" stroke="#e0ba8e" stroke-width="1"/><text x="180" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">9</text></svg>

data/examples/weekly_progress.svg

@@ -1 +0,0 @@
-<svg width="132" height="18" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="18" height="18" fill="#ebedf0"/><rect x="0.5" y="0.5" width="17" height="17" fill="none" stroke="#ccced1" stroke-width="1"/><text x="9" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text><rect x="19" y="0" width="18" height="18" fill="#9be9a8"/><rect x="19.5" y="0.5" width="17" height="17" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="28" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="38" y="0" width="18" height="18" fill="#30a14e"/><rect x="38.5" y="0.5" width="17" height="17" fill="none" stroke="#108d3b" stroke-width="1"/><text x="47" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">3</text><rect x="57" y="0" width="18" height="18" fill="#40c463"/><rect x="57.5" y="0.5" width="17" height="17" fill="none" stroke="#1dac4d" stroke-width="1"/><text x="66" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">2</text><rect x="76" y="0" width="18" height="18" fill="#216e39"/><rect x="76.5" y="0.5" width="17" height="17" fill="none" stroke="#0d602c" stroke-width="1"/><text x="85" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">4</text><rect x="95" y="0" width="18" height="18" fill="#9be9a8"/><rect x="95.5" y="0.5" width="17" height="17" fill="none" stroke="#7fcc8d" stroke-width="1"/><text x="104" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">1</text><rect x="114" y="0" width="18" height="18" fill="#ebedf0"/><rect x="114.5" y="0.5" width="17" height="17" fill="none" stroke="#ccced1" stroke-width="1"/><text x="123" y="11.8" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#000000">0</text></svg>