sevgi-showcase 0.95.0 → 0.98.2

data/lib/sevgi/showcase/minitest/suite.rb

@@ -1,53 +1,55 @@
 # frozen_string_literal: true
 
 module Sevgi
-  # Minitest helpers used by the showcase component.
-  # @api private
-  module Test
-    # Showcase script suite collection.
+  module Showcase
+    # Minitest helpers used by the showcase component.
     # @api private
-    class Suite
-      # Creates a suite from a showcase root directory.
-      # @param rootdir [String] showcase root directory
-      # @return [void]
-      def initialize(rootdir)
-        @scripts = load(rootdir)
-      end
-
-      # Returns scripts belonging to a suite.
-      # @param suite [String, Symbol] suite name
-      # @return [Array<Sevgi::Test::Script>]
-      def [](suite)
-        (@cache ||= {})[suite] ||= @scripts.select { |script| script.suite == suite.to_s }
-      end
-
-      # Returns all suite names.
-      # @return [Array<String>]
-      def suites
-        @suites ||= @scripts.map(&:suite).uniq
-      end
-
-      # Suite names that are expected to be invalid examples.
-      NON_VALIDS = ["gotcha"].freeze
-
-      # Returns scripts expected to be invalid.
-      # @return [Array<Sevgi::Test::Script>]
-      def non_valids
-        NON_VALIDS.map { self[it] }.flatten
-      end
-
-      # Returns scripts expected to render successfully.
-      # @return [Array<Sevgi::Test::Script>]
-      def valids
-        suites.reject { NON_VALIDS.include?(it) }.map { self[it] }.flatten
-      end
-
-      alias to_a valids
-
-      private
-
-      def load(rootdir)
-        ::Dir["#{rootdir}/**/*.sevgi"].grep_v(%r{(/_|/lib/|/library/)}).map { Script.new(it) }
+    module Test
+      # Showcase script suite collection.
+      # @api private
+      class Suite
+        # Creates a suite from a showcase root directory.
+        # @param rootdir [String] showcase root directory
+        # @return [void]
+        def initialize(rootdir)
+          @scripts = load(rootdir)
+        end
+
+        # Returns scripts belonging to a suite.
+        # @param suite [String, Symbol] suite name
+        # @return [Array<Sevgi::Showcase::Test::Script>]
+        def [](suite)
+          (@cache ||= {})[suite] ||= @scripts.select { |script| script.suite == suite.to_s }
+        end
+
+        # Returns all suite names.
+        # @return [Array<String>]
+        def suites
+          @suites ||= @scripts.map(&:suite).uniq
+        end
+
+        # Suite names that are expected to be invalid examples.
+        NON_VALIDS = ["gotcha"].freeze
+
+        # Returns scripts expected to be invalid.
+        # @return [Array<Sevgi::Showcase::Test::Script>]
+        def non_valids
+          NON_VALIDS.map { self[it] }.flatten
+        end
+
+        # Returns scripts expected to render successfully.
+        # @return [Array<Sevgi::Showcase::Test::Script>]
+        def valids
+          suites.reject { NON_VALIDS.include?(it) }.map { self[it] }.flatten
+        end
+
+        alias to_a valids
+
+        private
+
+        def load(rootdir)
+          ::Dir["#{rootdir}/**/*.sevgi"].grep_v(%r{(/_|/lib/|/library/)}).map { Script.new(it) }
+        end
       end
     end
   end

data/lib/sevgi/showcase/minitest.rb

@@ -3,3 +3,9 @@
 require_relative "minitest/script"
 require_relative "minitest/shell"
 require_relative "minitest/suite"
+
+module Sevgi
+  module Showcase
+    private_constant :Test
+  end
+end

data/lib/sevgi/showcase/version.rb

@@ -4,6 +4,6 @@ module Sevgi
   # Showcase component namespace.
   module Showcase
     # Current showcase component version.
-    VERSION = "0.95.0"
+    VERSION = "0.98.2"
   end
 end

data/lib/sevgi/showcase.rb

@@ -2,7 +2,4 @@
 
 require "sevgi"
 
-require_relative "showcase/dark"
-require_relative "showcase/minitest"
-
 require_relative "showcase/version"

data/srv/checkers.sevgi

@@ -0,0 +1,79 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+module CheckerBoard
+  extend SVG::Module
+
+  BOARD_MARGIN = 50
+  CELL_SIZE = 100
+  PIECE_SIZE = 80
+  SIZE = (CELL_SIZE * 8) + (BOARD_MARGIN * 2)
+
+  STYLE = {
+    ".board-frame" => { fill: "#d1bfa7", stroke: "#6a3f2b" },
+    ".inner-frame" => {
+      fill: "#6a3f2b",
+      stroke: "#6a3f2b",
+      "stroke-width": (BOARD_MARGIN * 0.7).round
+    },
+    ".cell" => { stroke: "white", "stroke-width": 1 },
+    ".light.cell" => { fill: "#d4a76f" },
+    ".dark.cell" => { fill: "#6a3f2b" },
+    ".piece" => {
+      filter: "drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.5))",
+      stroke: "none"
+    },
+    ".light.piece" => { fill: "#f5f5f5" },
+    ".dark.piece" => { fill: "#333" }
+  }.freeze
+
+  base do # Draw the board.
+    css STYLE
+
+    square class: "board-frame", length: SIZE
+    square class: "inner-frame", x: BOARD_MARGIN, y: BOARD_MARGIN,
+           length: SIZE - (BOARD_MARGIN * 2)
+
+    8.times do |row|
+      8.times do |col|
+        square class: "#{(row + col).even? ? "dark" : "light"} cell",
+               x: (col * CELL_SIZE) + BOARD_MARGIN,
+               y: (row * CELL_SIZE) + BOARD_MARGIN,
+               length: CELL_SIZE
+      end
+    end
+  end
+
+  def call(placement)
+    center = BOARD_MARGIN + (CELL_SIZE / 2)
+
+    placement.each do |tone, rows|
+      rows.each do |row, cols|
+        cols.each do |col|
+          circle class: "#{tone} piece",
+                 cx: (col * CELL_SIZE) + center,
+                 cy: (row * CELL_SIZE) + center,
+                 r: PIECE_SIZE / 2
+        end
+      end
+    end
+  end
+end
+
+placement = {
+  dark: {
+    0 => [1, 3, 5, 7],
+    1 => [0, 2, 4, 6]
+  },
+  light: {
+    6 => [1, 3, 5, 7],
+    7 => [0, 2, 4, 6]
+  }
+}
+
+SVG :minimal,
+    width: CheckerBoard::SIZE,
+    height: CheckerBoard::SIZE,
+    viewBox: "0 0 #{CheckerBoard::SIZE} #{CheckerBoard::SIZE}" do
+  Call CheckerBoard, placement
+end.Save

data/srv/checkers.svg

@@ -0,0 +1,117 @@
+<svg width="900" height="900" viewBox="0 0 900 900">
+  <style type="text/css">
+    <![CDATA[
+      .board-frame {
+        fill: #d1bfa7;
+        stroke: #6a3f2b;
+      }
+      .inner-frame {
+        fill: #6a3f2b;
+        stroke: #6a3f2b;
+        stroke-width: 35;
+      }
+      .cell {
+        stroke: white;
+        stroke-width: 1;
+      }
+      .light.cell {
+        fill: #d4a76f;
+      }
+      .dark.cell {
+        fill: #6a3f2b;
+      }
+      .piece {
+        filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.5));
+        stroke: none;
+      }
+      .light.piece {
+        fill: #f5f5f5;
+      }
+      .dark.piece {
+        fill: #333;
+      }
+    ]]>
+  </style>
+  <rect width="900" height="900" class="board-frame"/>
+  <rect width="800" height="800" class="inner-frame" x="50" y="50"/>
+  <rect width="100" height="100" class="dark cell" x="50" y="50"/>
+  <rect width="100" height="100" class="light cell" x="150" y="50"/>
+  <rect width="100" height="100" class="dark cell" x="250" y="50"/>
+  <rect width="100" height="100" class="light cell" x="350" y="50"/>
+  <rect width="100" height="100" class="dark cell" x="450" y="50"/>
+  <rect width="100" height="100" class="light cell" x="550" y="50"/>
+  <rect width="100" height="100" class="dark cell" x="650" y="50"/>
+  <rect width="100" height="100" class="light cell" x="750" y="50"/>
+  <rect width="100" height="100" class="light cell" x="50" y="150"/>
+  <rect width="100" height="100" class="dark cell" x="150" y="150"/>
+  <rect width="100" height="100" class="light cell" x="250" y="150"/>
+  <rect width="100" height="100" class="dark cell" x="350" y="150"/>
+  <rect width="100" height="100" class="light cell" x="450" y="150"/>
+  <rect width="100" height="100" class="dark cell" x="550" y="150"/>
+  <rect width="100" height="100" class="light cell" x="650" y="150"/>
+  <rect width="100" height="100" class="dark cell" x="750" y="150"/>
+  <rect width="100" height="100" class="dark cell" x="50" y="250"/>
+  <rect width="100" height="100" class="light cell" x="150" y="250"/>
+  <rect width="100" height="100" class="dark cell" x="250" y="250"/>
+  <rect width="100" height="100" class="light cell" x="350" y="250"/>
+  <rect width="100" height="100" class="dark cell" x="450" y="250"/>
+  <rect width="100" height="100" class="light cell" x="550" y="250"/>
+  <rect width="100" height="100" class="dark cell" x="650" y="250"/>
+  <rect width="100" height="100" class="light cell" x="750" y="250"/>
+  <rect width="100" height="100" class="light cell" x="50" y="350"/>
+  <rect width="100" height="100" class="dark cell" x="150" y="350"/>
+  <rect width="100" height="100" class="light cell" x="250" y="350"/>
+  <rect width="100" height="100" class="dark cell" x="350" y="350"/>
+  <rect width="100" height="100" class="light cell" x="450" y="350"/>
+  <rect width="100" height="100" class="dark cell" x="550" y="350"/>
+  <rect width="100" height="100" class="light cell" x="650" y="350"/>
+  <rect width="100" height="100" class="dark cell" x="750" y="350"/>
+  <rect width="100" height="100" class="dark cell" x="50" y="450"/>
+  <rect width="100" height="100" class="light cell" x="150" y="450"/>
+  <rect width="100" height="100" class="dark cell" x="250" y="450"/>
+  <rect width="100" height="100" class="light cell" x="350" y="450"/>
+  <rect width="100" height="100" class="dark cell" x="450" y="450"/>
+  <rect width="100" height="100" class="light cell" x="550" y="450"/>
+  <rect width="100" height="100" class="dark cell" x="650" y="450"/>
+  <rect width="100" height="100" class="light cell" x="750" y="450"/>
+  <rect width="100" height="100" class="light cell" x="50" y="550"/>
+  <rect width="100" height="100" class="dark cell" x="150" y="550"/>
+  <rect width="100" height="100" class="light cell" x="250" y="550"/>
+  <rect width="100" height="100" class="dark cell" x="350" y="550"/>
+  <rect width="100" height="100" class="light cell" x="450" y="550"/>
+  <rect width="100" height="100" class="dark cell" x="550" y="550"/>
+  <rect width="100" height="100" class="light cell" x="650" y="550"/>
+  <rect width="100" height="100" class="dark cell" x="750" y="550"/>
+  <rect width="100" height="100" class="dark cell" x="50" y="650"/>
+  <rect width="100" height="100" class="light cell" x="150" y="650"/>
+  <rect width="100" height="100" class="dark cell" x="250" y="650"/>
+  <rect width="100" height="100" class="light cell" x="350" y="650"/>
+  <rect width="100" height="100" class="dark cell" x="450" y="650"/>
+  <rect width="100" height="100" class="light cell" x="550" y="650"/>
+  <rect width="100" height="100" class="dark cell" x="650" y="650"/>
+  <rect width="100" height="100" class="light cell" x="750" y="650"/>
+  <rect width="100" height="100" class="light cell" x="50" y="750"/>
+  <rect width="100" height="100" class="dark cell" x="150" y="750"/>
+  <rect width="100" height="100" class="light cell" x="250" y="750"/>
+  <rect width="100" height="100" class="dark cell" x="350" y="750"/>
+  <rect width="100" height="100" class="light cell" x="450" y="750"/>
+  <rect width="100" height="100" class="dark cell" x="550" y="750"/>
+  <rect width="100" height="100" class="light cell" x="650" y="750"/>
+  <rect width="100" height="100" class="dark cell" x="750" y="750"/>
+  <circle class="dark piece" cx="200" cy="100" r="40"/>
+  <circle class="dark piece" cx="400" cy="100" r="40"/>
+  <circle class="dark piece" cx="600" cy="100" r="40"/>
+  <circle class="dark piece" cx="800" cy="100" r="40"/>
+  <circle class="dark piece" cx="100" cy="200" r="40"/>
+  <circle class="dark piece" cx="300" cy="200" r="40"/>
+  <circle class="dark piece" cx="500" cy="200" r="40"/>
+  <circle class="dark piece" cx="700" cy="200" r="40"/>
+  <circle class="light piece" cx="200" cy="700" r="40"/>
+  <circle class="light piece" cx="400" cy="700" r="40"/>
+  <circle class="light piece" cx="600" cy="700" r="40"/>
+  <circle class="light piece" cx="800" cy="700" r="40"/>
+  <circle class="light piece" cx="100" cy="800" r="40"/>
+  <circle class="light piece" cx="300" cy="800" r="40"/>
+  <circle class="light piece" cx="500" cy="800" r="40"/>
+  <circle class="light piece" cx="700" cy="800" r="40"/>
+</svg>

data/srv/clover.sevgi

@@ -0,0 +1,19 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+CLOVER = <<~PATH
+  m 0,10 c 5.53264,0 10,-4.479747 10,-10 -5.52589,0 -10,4.488702 -10,10
+PATH
+
+CENTER = 13
+SIZE = 26
+
+SVG :minimal, width: SIZE, height: SIZE do
+  rect width: SIZE, height: SIZE, rx: 0.75, fill: "white"
+  defs { path id: "Clover", d: CLOVER, fill: "purple" }
+
+  4.times do |quarter|
+    leaf = use href: "#Clover", x: CENTER, y: CENTER - 10
+    leaf.Rotate quarter * 90, CENTER, CENTER
+  end
+end.Save

data/srv/clover.svg

@@ -0,0 +1,11 @@
+<svg width="26" height="26">
+  <rect width="26" height="26" rx="0.75" fill="white"/>
+  <defs>
+    <path id="Clover" d="m 0,10 c 5.53264,0 10,-4.479747 10,-10 -5.52589,0 -10,4.488702 -10,10
+" fill="purple"/>
+  </defs>
+  <use href="#Clover" x="13" y="3"/>
+  <use href="#Clover" x="13" y="3" transform="rotate(90, 13, 13)"/>
+  <use href="#Clover" x="13" y="3" transform="rotate(180, 13, 13)"/>
+  <use href="#Clover" x="13" y="3" transform="rotate(270, 13, 13)"/>
+</svg>

data/srv/clover.yml

@@ -0,0 +1,3 @@
+dark:
+  purple: "#e5c39c"
+  white: "#222222"

data/srv/copperplate.sevgi

@@ -0,0 +1,50 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+COLS = 15
+MULTIPLE = 5
+ROWS = 10
+SLANT = 55
+UNIT = 6
+
+canvas = SVG.Canvas width: COLS * UNIT, height: ROWS * UNIT
+grid = Grid canvas, unit: UNIT, multiple: MULTIPLE
+
+module Guidesheet
+  extend SVG::Module
+
+  FRAME = 0.6
+
+  STYLE = {
+    ".angle" => { fill: "none", stroke: "green", "stroke-width": 0.12 },
+    ".frame" => { fill: "none", stroke: "blue", "stroke-width": FRAME },
+    ".major" => { fill: "none", stroke: "blue", "stroke-width": 0.4 },
+    ".minor" => { fill: "none", stroke: "magenta", "stroke-width": 0.12 }
+  }.freeze
+
+  base { css STYLE }
+
+  def call(grid)
+    layer id: "Slants" do
+      TileY "slant-row", n: grid.y.n, d: grid.y.u do
+        Hatch grid.rowbox, angle: -SLANT, step: grid.x.su, class: %w[angle slant]
+      end
+    end
+
+    layer id: "Squares" do
+      Draw grid.x.minor.lines, class: %w[rule minor horizontal]
+      Draw grid.y.minor.lines, class: %w[rule minor vertical]
+      Draw grid.x.major.lines, class: %w[rule major horizontal]
+      Draw grid.y.major.lines, class: %w[rule major vertical]
+    end
+
+    rect x: FRAME / 2, y: FRAME / 2,
+         width: grid.width - FRAME, height: grid.height - FRAME,
+         class: %w[frame rule]
+  end
+end
+
+SVG :inkscape, canvas, "shape-rendering": "geometricPrecision" do
+  rect width: "100%", height: "100%", fill: "white"
+  Layer! Guidesheet, grid, attributes: { id: "Guides" }
+end.Save

data/srv/copperplate.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" standalone="no"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:_="http://sevgi.roktas.dev"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  shape-rendering="geometricPrecision"
+  width="90.0mm"
+  height="60.0mm"
+  viewBox="0 0 90 60"
+>
+  <rect width="100%" height="100%" fill="white"/>
+  <g id="Guides" inkscape:groupmode="layer" sodipodi:insensitive="true">
+    <style type="text/css">
+      <![CDATA[
+        .angle {
+          fill: none;
+          stroke: green;
+          stroke-width: 0.12;
+        }
+        .frame {
+          fill: none;
+          stroke: blue;
+          stroke-width: 0.6;
+        }
+        .major {
+          fill: none;
+          stroke: blue;
+          stroke-width: 0.4;
+        }
+        .minor {
+          fill: none;
+          stroke: magenta;
+          stroke-width: 0.12;
+        }
+      ]]>
+    </style>
+    <g id="Slants" inkscape:groupmode="layer">
+      <defs>
+        <g id="slant-row">
+          <path d="M 90 28.376891 L 88.863487 30" class="angle slant"/>
+          <path d="M 90 17.91621 L 81.538839 30" class="angle slant"/>
+          <path d="M 90 7.455529 L 74.214192 30" class="angle slant"/>
+          <path d="M 87.89577 0 L 66.889544 30" class="angle slant"/>
+          <path d="M 80.571123 0 L 59.564897 30" class="angle slant"/>
+          <path d="M 73.246475 0 L 52.240249 30" class="angle slant"/>
+          <path d="M 65.921828 0 L 44.915602 30" class="angle slant"/>
+          <path d="M 58.59718 0 L 37.590954 30" class="angle slant"/>
+          <path d="M 51.272533 0 L 30.266307 30" class="angle slant"/>
+          <path d="M 43.947885 0 L 22.941659 30" class="angle slant"/>
+          <path d="M 36.623238 0 L 15.617012 30" class="angle slant"/>
+          <path d="M 29.29859 0 L 8.292364 30" class="angle slant"/>
+          <path d="M 21.973943 0 L 0.967716 30" class="angle slant"/>
+          <path d="M 14.649295 0 L 0 20.921362" class="angle slant"/>
+          <path d="M 7.324648 0 L 0 10.460681" class="angle slant"/>
+        </g>
+      </defs>
+      <use id="slant-row-1" href="#slant-row" class="tile-row-1 tile-row-first"/>
+      <use id="slant-row-2" href="#slant-row" class="tile-row-2 tile-row-last" y="30"/>
+    </g>
+    <g id="Squares" inkscape:groupmode="layer">
+      <path d="M 0 0 L 90 0" class="rule minor horizontal"/>
+      <path d="M 0 6 L 90 6" class="rule minor horizontal"/>
+      <path d="M 0 12 L 90 12" class="rule minor horizontal"/>
+      <path d="M 0 18 L 90 18" class="rule minor horizontal"/>
+      <path d="M 0 24 L 90 24" class="rule minor horizontal"/>
+      <path d="M 0 30 L 90 30" class="rule minor horizontal"/>
+      <path d="M 0 36 L 90 36" class="rule minor horizontal"/>
+      <path d="M 0 42 L 90 42" class="rule minor horizontal"/>
+      <path d="M 0 48 L 90 48" class="rule minor horizontal"/>
+      <path d="M 0 54 L 90 54" class="rule minor horizontal"/>
+      <path d="M 0 60 L 90 60" class="rule minor horizontal"/>
+      <path d="M 0 0 L 0 60" class="rule minor vertical"/>
+      <path d="M 6 0 L 6 60" class="rule minor vertical"/>
+      <path d="M 12 0 L 12 60" class="rule minor vertical"/>
+      <path d="M 18 0 L 18 60" class="rule minor vertical"/>
+      <path d="M 24 0 L 24 60" class="rule minor vertical"/>
+      <path d="M 30 0 L 30 60" class="rule minor vertical"/>
+      <path d="M 36 0 L 36 60" class="rule minor vertical"/>
+      <path d="M 42 0 L 42 60" class="rule minor vertical"/>
+      <path d="M 48 0 L 48 60" class="rule minor vertical"/>
+      <path d="M 54 0 L 54 60" class="rule minor vertical"/>
+      <path d="M 60 0 L 60 60" class="rule minor vertical"/>
+      <path d="M 66 0 L 66 60" class="rule minor vertical"/>
+      <path d="M 72 0 L 72 60" class="rule minor vertical"/>
+      <path d="M 78 0 L 78 60" class="rule minor vertical"/>
+      <path d="M 84 0 L 84 60" class="rule minor vertical"/>
+      <path d="M 90 0 L 90 60" class="rule minor vertical"/>
+      <path d="M 0 0 L 90 0" class="rule major horizontal"/>
+      <path d="M 0 30 L 90 30" class="rule major horizontal"/>
+      <path d="M 0 60 L 90 60" class="rule major horizontal"/>
+      <path d="M 0 0 L 0 60" class="rule major vertical"/>
+      <path d="M 30 0 L 30 60" class="rule major vertical"/>
+      <path d="M 60 0 L 60 60" class="rule major vertical"/>
+      <path d="M 90 0 L 90 60" class="rule major vertical"/>
+    </g>
+    <rect x="0.3" y="0.3" width="89.4" height="59.4" class="frame rule"/>
+  </g>
+</svg>

data/srv/copperplate.yml

@@ -0,0 +1,5 @@
+dark:
+  blue: "#60a5fa"
+  green: "#4ade80"
+  magenta: "#f472b6"
+  white: "#222222"

data/srv/{gear-wheel.sevgi → gear.sevgi}

@@ -1,27 +1,25 @@
 #!/usr/bin/env -S ruby -S sevgi
 # frozen_string_literal: true
 
-GEAR_STYLE = {
-  fill: "#333",
+STYLE = {
+  fill: "purple",
+  mask: "url(#hole)",
   stroke: "none"
 }.freeze
 
 SVG :minimal, width: 100, height: 100, viewBox: "0 0 100 100" do
-  rect x: 0, y: 0, width: 100, height: 100, fill: "lightgreen"
-
   mask id: "hole",
        maskUnits: "userSpaceOnUse",
        maskContentUnits: "userSpaceOnUse",
        x: 0, y: 0, width: 100, height: 100 do
-    rect x: 0, y: 0, width: 100, height: 100, fill: "white"
+    square length: 100, fill: "white"
     circle cx: 50, cy: 50, r: 15, fill: "black"
   end
 
-  circle cx: 50, cy: 50, r: 30, mask: "url(#hole)", **GEAR_STYLE
+  circle cx: 50, cy: 50, r: 30, **STYLE
 
   [0, 45, 90, 135].each do |angle|
-    rect x: 45, y: 10, width: 10, height: 80,
-         mask: "url(#hole)", transform: "rotate(#{angle} 50 50)",
-         **GEAR_STYLE
+    tooth = rect x: 45, y: 10, width: 10, height: 80, **STYLE
+    tooth.Rotate angle, 50, 50
   end
 end.Save

data/srv/gear.svg

@@ -0,0 +1,11 @@
+<svg width="100" height="100" viewBox="0 0 100 100">
+  <mask id="hole" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+    <rect width="100" height="100" fill="white"/>
+    <circle cx="50" cy="50" r="15" fill="black"/>
+  </mask>
+  <circle cx="50" cy="50" r="30" fill="purple" mask="url(#hole)" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" fill="purple" mask="url(#hole)" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" fill="purple" mask="url(#hole)" stroke="none" transform="rotate(45, 50, 50)"/>
+  <rect x="45" y="10" width="10" height="80" fill="purple" mask="url(#hole)" stroke="none" transform="rotate(90, 50, 50)"/>
+  <rect x="45" y="10" width="10" height="80" fill="purple" mask="url(#hole)" stroke="none" transform="rotate(135, 50, 50)"/>
+</svg>

data/srv/gear.yml

@@ -0,0 +1,2 @@
+dark:
+  purple: "#e5c39c"

data/srv/{grid-cells.sevgi → grid.sevgi}

@@ -1,23 +1,23 @@
 #!/usr/bin/env -S ruby -S sevgi
 # frozen_string_literal: true
 
-CELL_SIZE = 20
+SIZE = 20
 COLORS = %w[#FF6961 #77DD77 #FFD700].freeze
-COLS = 8
-ROWS = 3
+COLS = 9
+ROWS = 4
 
 SVG :minimal,
-    width: COLS * CELL_SIZE,
-    height: ROWS * CELL_SIZE,
-    viewBox: "0 0 #{COLS * CELL_SIZE} #{ROWS * CELL_SIZE}" do
+    width: COLS * SIZE,
+    height: ROWS * SIZE,
+    viewBox: "0 0 #{COLS * SIZE} #{ROWS * SIZE}" do
   css ".cell" => { stroke: "white" }
 
   COLS.times do |col|
     ROWS.times do |row|
       rect class: "cell",
-           x: col * CELL_SIZE, y: row * CELL_SIZE,
-           width: CELL_SIZE, height: CELL_SIZE,
-           rx: (CELL_SIZE * 0.1).round,
+           x: col * SIZE, y: row * SIZE,
+           width: SIZE, height: SIZE,
+           rx: (SIZE * 0.1).round,
            fill: COLORS[(col + row) % COLORS.length]
     end
   end