sevgi-showcase 0.73.2 → 0.94.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2dc7c21825c07ed66a185187025a0fd58969df58105d0d55ba4da7ec3d1f78f
-  data.tar.gz: 53a825990707906e4386cf104b8d83d13d33bd41752496044fd65b1493c1b9cf
+  metadata.gz: 36b54e0f7d4b51e0815f49a28194c841e5e56ace94742c2598f95dcf4677e72c
+  data.tar.gz: b31295af208cee2aa2aad3061556f9848190c78610733510e73dd557b541995e
 SHA512:
-  metadata.gz: bc0bd992d47b00eac1a4bd65f5835759c04e0b657bcb459109362ee0dab2bad0ec35090ce03223c64a45740f860352c26d56f286945793fb80377886246201f7
-  data.tar.gz: bd1f18ae77d395b4905b233bea49e80e5c2c6c68545847cc0a4b0a4a6668f2a1bcd3edcf9248b45e6613e80a5029399197428b9a801bbc95e7be997195fdf918
+  metadata.gz: 646bd6e535ee9c3d61efbc49ee0e443dec23af2e94cd5b16210bae05f0a70e1a68cbf75272efbcb1d9b2af7ab84d55a2fca470b8bb15f4a806b99822bc30432e
+  data.tar.gz: 7ff66e247c4d5f0a98dd9fd69b27ee7e14088f67390482fd596630d1a21067fc9c9a16983af747201f44479bba547bb36f8001af26486adb0d2e1d2be5ed1f08

data/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Changelog
+
+Sevgi Showcase follows the root Sevgi release notes:
+https://github.com/roktas/sevgi/blob/main/CHANGELOG.md

data/LICENSE

@@ -0,0 +1,5 @@
+Sevgi Showcase is distributed under the GNU General Public License v3.0 or later.
+
+SPDX-License-Identifier: GPL-3.0-or-later
+
+Full project license: https://github.com/roktas/sevgi/blob/main/LICENSE

data/README.md

@@ -0,0 +1,53 @@
+# Sevgi Showcase
+
+Executable examples, rendered outputs, and documentation-site support.
+
+## Install
+
+```sh
+gem install sevgi-showcase
+```
+
+## Require
+
+```ruby
+require "sevgi/showcase"
+```
+
+## Example
+
+```ruby
+suite = Sevgi::Test::Suite.new("srv")
+suite.valids.map(&:name)
+```
+
+## Ruby compatibility
+
+Requires Ruby 3.4.0 or newer. CI verifies Ruby 3.4 and the current development Ruby from `.ruby-version`.
+
+## Native prerequisites
+
+Showcase examples use the top-level Sevgi stack. SVG-only examples need no native export gems.
+
+PDF/PNG export workflows match `sevgi-sundries` and require the optional Ruby gems `cairo`, `rsvg2`, and `hexapdf`.
+On Debian/Ubuntu:
+
+```sh
+sudo apt-get update
+sudo apt-get install -y libcairo2-dev libgdk-pixbuf-2.0-dev libgirepository1.0-dev libglib2.0-dev librsvg2-dev pkg-config
+gem install cairo rsvg2 hexapdf
+```
+
+On macOS with Homebrew:
+
+```sh
+brew install cairo gdk-pixbuf gobject-introspection librsvg pkg-config
+gem install cairo rsvg2 hexapdf
+```
+
+## Links
+
+- Documentation: https://sevgi.roktas.dev
+- API documentation: https://www.rubydoc.info/gems/sevgi-showcase
+- Source: https://github.com/roktas/sevgi/tree/main/showcase
+- Changelog: https://github.com/roktas/sevgi/blob/main/CHANGELOG.md

data/lib/sevgi/showcase/dark.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Sevgi
+  module Showcase
+    # Applies dark-theme color mappings to showcase source files.
+    # @api private
+    module Dark
+      extend self
+
+      # Applies a color mapping to source text.
+      # @param source [String] source text
+      # @param mapping [Hash{String => String}] source color to dark color mapping
+      # @return [String] transformed source text
+      # @raise [Sevgi::ArgumentError] when a mapping key is not found
+      def apply(source, mapping)
+        applied = Hash.new(0)
+        content = replace_quoted(source, mapping, applied)
+        content = replace_percent_words(content, mapping, applied)
+        missing = mapping.keys.reject { applied[it].positive? }
+
+        ArgumentError.("Unapplied dark mapping(s): #{missing.join(", ")}") unless missing.empty?
+
+        content
+      end
+
+      # Applies a color mapping to a source file and preserves its mode.
+      # @param source [String] source file path
+      # @param target [String] target file path
+      # @param mapping [Hash{String => String}] source color to dark color mapping
+      # @return [String] target file path
+      # @raise [Sevgi::ArgumentError] when a mapping key is not found
+      def apply_file(source, target, mapping)
+        target.tap do
+          File.write(target, apply(File.read(source), mapping))
+          File.chmod(File.stat(source).mode & 0o777, target)
+        end
+      end
+
+      private
+
+      def replace_percent_words(source, mapping, applied)
+        source.gsub(/%[wW]\[[^\]]*\]/m) do |literal|
+          mapping.reduce(literal) do |text, (key, value)|
+            text.gsub(/(^|[\s\[])(#{Regexp.escape(key)})(?=$|[\s\]])/) do
+              applied[key] += 1
+              "#{Regexp.last_match(1)}#{value}"
+            end
+          end
+        end
+      end
+
+      def replace_quoted(source, mapping, applied)
+        source.gsub(/(?<quote>["'])(?<value>.*?)\k<quote>/) do |literal|
+          key = Regexp.last_match[:value]
+          value = mapping[key]
+          next literal unless value
+
+          applied[key] += 1
+          "#{Regexp.last_match[:quote]}#{value}#{Regexp.last_match[:quote]}"
+        end
+      end
+    end
+  end
+end

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

@@ -1,38 +1,70 @@
 # frozen_string_literal: true
 
 module Sevgi
+  # Minitest helpers used by the showcase component.
+  # @api private
   module Test
+    # Executable showcase script descriptor.
+    # @api private
     class Script
+      # @return [String] absolute script path
       attr_reader :file
 
+      # Creates a script descriptor.
+      # @param file [String] executable .sevgi file
+      # @return [void]
+      # @raise [Sevgi::ArgumentError] when the file is missing or not executable
       def initialize(file) = @file = ::File.expand_path(sanitize(file))
 
+      # Returns the script directory.
+      # @return [String]
       def dir = @dir ||= ::File.dirname(file)
 
+      # Returns the script basename.
+      # @return [String]
       def file! = ::File.basename(file)
 
+      # Returns the script name without extension.
+      # @return [String]
       def name = @name ||= ::File.basename(file, ".*")
 
+      # @overload run(*args)
+      #   Runs the script directly.
+      #   @param args [Array<String>] extra command arguments
+      #   @return [Sevgi::Test::Shell::Result]
       def run(*) = Shell.run(file, *)
 
+      # Returns the script suite name.
+      # @return [String]
       def suite = @suite ||= ::File.basename(dir)
 
+      # Reports whether the expected SVG output exists.
+      # @return [Boolean]
       def svg? = ::File.exist?(svg)
 
+      # Returns the expected SVG output path.
+      # @return [String]
       def svg = @svg ||= ::File.expand_path("#{dir}/#{name}.svg")
 
+      # Returns the expected SVG output basename.
+      # @return [String]
       def svg! = ::File.basename(svg)
 
+      # Returns the optional YAML metadata path.
+      # @return [String]
       def yml = @yml ||= ::File.expand_path("#{dir}/#{name}.yml")
 
+      # Returns the optional YAML metadata basename.
+      # @return [String]
       def yml! = ::File.basename(yml)
 
-      # A gross hack to avoid touching filesystem during testing.  Intercept the Save methods to display output in stdout
-      # instead of saving an actual file.
-
+      # @overload run_passive(*args)
+      #   Runs the script without writing Save output to files.
+      #   @param args [Array<String>] extra command arguments
+      #   @return [Sevgi::Test::Shell::Result]
       def run_passive(*)
         warn("...#{name}")
-        Shell.run("sevgi", "-r", "sevgi/showcase/kludge", file, *)
+        Shell.run("sevgi", "-r", "sevgi/showcase/passive", file, *)
       end
 
       private

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

@@ -3,30 +3,55 @@
 require "open3"
 
 module Sevgi
+  # Minitest helpers used by the showcase component.
+  # @api private
   module Test
+    # Shell runner helpers for showcase tests.
+    # @api private
     module Shell
+      # Shell command result.
+      # @api private
       Result = Data.define(:args, :out, :err, :exit_code) do
+        # Returns the command string.
+        # @return [String]
         def cmd = args.join(" ")
 
+        # Reports whether the command failed.
+        # @return [Boolean]
         def notok? = !ok?
 
+        # Reports whether the command exited successfully.
+        # @return [Boolean]
         def ok? = exit_code&.zero?
 
+        # Returns the first stdout line.
+        # @return [String, nil]
         def outline = out.first
 
+        # Returns stdout as a newline-joined string.
+        # @return [String]
         def to_s = out.join("\n")
       end
 
       # Adapted to popen3 from github.com/mina-deploy/mina
+      # Shell command runner.
+      # @api private
       class Runner
+        # Creates a runner.
+        # @return [void]
         def initialize
           @coathooks = 0
         end
 
+        # Runs a command and captures stdout, stderr, and exit status.
+        # @param args [Array<String>] command and arguments
+        # @yield optional stdin writer evaluated with stdin as receiver
+        # @yieldreturn [Object]
+        # @return [Sevgi::Test::Shell::Result]
+        # @raise [StandardError] when the input block raises; the child is terminated and reaped before propagation
         def run(*args, &block)
           out, err, status = Open3.popen3(*args) do |stdin, stdout, stderr, thread|
-            inputs(stdin, thread, &block) if block
-            outputs(stdout, stderr, thread)
+            capture(stdin, stdout, stderr, thread, &block)
           end
 
           Result[args, out, err, status.exitstatus]
@@ -34,19 +59,38 @@ module Sevgi
 
         private
 
-        def inputs(stdin, thread, &block)
-          stdin.instance_exec(thread, &block)
-          stdin.close unless stdin.closed?
+        # rubocop:disable Lint/RescueException
+        def capture(stdin, stdout, stderr, thread, &block)
+          trap = trap("INT") { handle_sigint(thread.pid) }
+          readers = outputs(stdout, stderr)
+
+          collect_capture(stdin, thread, readers, &block)
+        rescue Exception
+          cleanup_failed_capture(stdin, thread, readers)
+          raise
+        ensure
+          close_input(stdin)
+          trap("INT", trap) if trap
         end
+        # rubocop:enable Lint/RescueException
 
-        def outputs(stdout, stderr, thread)
-          # handle `^C`
-          trap("INT") { handle_sigint(thread.pid) }
+        def cleanup_failed_capture(stdin, thread, readers)
+          close_input(stdin)
+          stop_process(thread)
+          Array(readers).each(&:join)
+        end
+
+        def close_input(stdin)
+          stdin.close unless stdin.closed?
+        rescue IOError
+          nil
+        end
 
-          out = stdout.readlines.map(&:chomp)
-          err = stderr.readlines.map(&:chomp)
+        def collect_capture(stdin, thread, readers, &block)
+          inputs(stdin, thread, &block)
+          close_input(stdin)
 
-          [out, err, thread.value]
+          [readers[0].value, readers[1].value, thread.value]
         end
 
         def handle_sigint(pid)
@@ -62,10 +106,41 @@ module Sevgi
         rescue Errno::ESRCH
           warn("No process to kill.")
         end
+
+        def inputs(stdin, thread, &block)
+          stdin.instance_exec(thread, &block) if block
+        end
+
+        def kill_process(signal, pid)
+          ::Process.kill(signal, pid)
+        rescue Errno::ESRCH
+          nil
+        end
+
+        def outputs(stdout, stderr)
+          [
+            Thread.new { stdout.readlines.map(&:chomp) },
+            Thread.new { stderr.readlines.map(&:chomp) }
+          ]
+        end
+
+        def stop_process(thread)
+          return unless thread&.alive?
+
+          kill_process("TERM", thread.pid)
+          return if thread.join(1)
+
+          kill_process("KILL", thread.pid)
+          thread.join
+        end
       end
 
       extend self
 
+      # @overload run(*args)
+      #   Runs a command through a fresh runner.
+      #   @param args [Array<String>] command and arguments
+      #   @return [Sevgi::Test::Shell::Result]
       def run(...) = Runner.new.run(...)
     end
   end

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

@@ -1,26 +1,43 @@
 # frozen_string_literal: true
 
 module Sevgi
+  # Minitest helpers used by the showcase component.
+  # @api private
   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::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

data/lib/sevgi/showcase/passive.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Sevgi
+  module Graphics
+    module Document
+      class Base
+        # @overload Save(*args, **kwargs)
+        #   Redirects showcase saves to stdout during passive integration tests.
+        #   @param args [Array<Object>] ignored save arguments
+        #   @param kwargs [Hash] render options
+        #   @return [Object] F.out return value
+        #   @api private
+        def Save(*, **) = Out(**)
+
+        # @overload Save!(*args, **kwargs)
+        #   Redirects forced showcase saves to stdout during passive integration tests.
+        #   @param args [Array<Object>] ignored save arguments
+        #   @param kwargs [Hash] render options
+        #   @return [Object] F.out return value
+        #   @api private
+        def Save!(...) = Save(...)
+      end
+    end
+  end
+end

data/lib/sevgi/showcase/version.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 module Sevgi
+  # Showcase component namespace.
   module Showcase
-    VERSION = "0.73.2"
+    # Current showcase component version.
+    VERSION = "0.94.0"
   end
 end

data/lib/sevgi/showcase.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require_relative "showcase/dark"
 require_relative "showcase/minitest"
 
 require_relative "showcase/version"

data/srv/checker-board.sevgi

@@ -0,0 +1,96 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+class CheckerBoard
+  BOARD_MARGIN = 50
+  CELL_SIZE = 100
+  PIECE_SIZE = 80
+
+  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
+
+  def initialize
+    @pieces = []
+  end
+
+  def width = (CELL_SIZE * 8) + (BOARD_MARGIN * 2)
+
+  def height = width
+
+  def view_box = "0 0 #{width} #{height}"
+
+  def add_piece(row, col, dark: false)
+    @pieces << [row, col, dark]
+  end
+
+  def render_on(svg)
+    svg.css STYLE
+    add_frame(svg)
+    add_cells(svg)
+    add_pieces(svg)
+  end
+
+  private
+
+  def add_frame(svg)
+    svg.rect class: "board-frame", x: 0, y: 0, width: width, height: height
+    svg.rect class: "inner-frame", x: BOARD_MARGIN, y: BOARD_MARGIN,
+             width: width - (BOARD_MARGIN * 2),
+             height: height - (BOARD_MARGIN * 2)
+  end
+
+  def add_cells(svg)
+    8.times do |row|
+      8.times do |col|
+        svg.rect class: "#{(row + col).even? ? "dark" : "light"} cell",
+                 x: (col * CELL_SIZE) + BOARD_MARGIN,
+                 y: (row * CELL_SIZE) + BOARD_MARGIN,
+                 width: CELL_SIZE,
+                 height: CELL_SIZE
+      end
+    end
+  end
+
+  def add_pieces(svg)
+    @pieces.each do |row, col, dark|
+      x = (col * CELL_SIZE) + BOARD_MARGIN + 10
+      y = (row * CELL_SIZE) + BOARD_MARGIN + 10
+
+      svg.circle class: "#{dark ? "dark" : "light"} piece",
+                 cx: x + (PIECE_SIZE / 2),
+                 cy: y + (PIECE_SIZE / 2),
+                 r: PIECE_SIZE / 2
+    end
+  end
+end
+
+board = CheckerBoard.new
+
+[1, 3, 5, 7].each do |col|
+  board.add_piece 0, col, dark: true
+  board.add_piece 6, col, dark: false
+end
+
+[0, 2, 4, 6].each do |col|
+  board.add_piece 1, col, dark: true
+  board.add_piece 7, col, dark: false
+end
+
+SVG :minimal, width: board.width, height: board.height, viewBox: board.view_box do
+  board.render_on(self)
+end.Save

data/srv/checker-board.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 class="board-frame" x="0" y="0" width="900" height="900"/>
+  <rect class="inner-frame" x="50" y="50" width="800" height="800"/>
+  <rect class="dark cell" x="50" y="50" width="100" height="100"/>
+  <rect class="light cell" x="150" y="50" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="50" width="100" height="100"/>
+  <rect class="light cell" x="350" y="50" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="50" width="100" height="100"/>
+  <rect class="light cell" x="550" y="50" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="50" width="100" height="100"/>
+  <rect class="light cell" x="750" y="50" width="100" height="100"/>
+  <rect class="light cell" x="50" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="150" width="100" height="100"/>
+  <rect class="light cell" x="250" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="150" width="100" height="100"/>
+  <rect class="light cell" x="450" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="150" width="100" height="100"/>
+  <rect class="light cell" x="650" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="50" y="250" width="100" height="100"/>
+  <rect class="light cell" x="150" y="250" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="250" width="100" height="100"/>
+  <rect class="light cell" x="350" y="250" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="250" width="100" height="100"/>
+  <rect class="light cell" x="550" y="250" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="250" width="100" height="100"/>
+  <rect class="light cell" x="750" y="250" width="100" height="100"/>
+  <rect class="light cell" x="50" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="350" width="100" height="100"/>
+  <rect class="light cell" x="250" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="350" width="100" height="100"/>
+  <rect class="light cell" x="450" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="350" width="100" height="100"/>
+  <rect class="light cell" x="650" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="50" y="450" width="100" height="100"/>
+  <rect class="light cell" x="150" y="450" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="450" width="100" height="100"/>
+  <rect class="light cell" x="350" y="450" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="450" width="100" height="100"/>
+  <rect class="light cell" x="550" y="450" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="450" width="100" height="100"/>
+  <rect class="light cell" x="750" y="450" width="100" height="100"/>
+  <rect class="light cell" x="50" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="550" width="100" height="100"/>
+  <rect class="light cell" x="250" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="550" width="100" height="100"/>
+  <rect class="light cell" x="450" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="550" width="100" height="100"/>
+  <rect class="light cell" x="650" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="50" y="650" width="100" height="100"/>
+  <rect class="light cell" x="150" y="650" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="650" width="100" height="100"/>
+  <rect class="light cell" x="350" y="650" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="650" width="100" height="100"/>
+  <rect class="light cell" x="550" y="650" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="650" width="100" height="100"/>
+  <rect class="light cell" x="750" y="650" width="100" height="100"/>
+  <rect class="light cell" x="50" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="750" width="100" height="100"/>
+  <rect class="light cell" x="250" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="750" width="100" height="100"/>
+  <rect class="light cell" x="450" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="750" width="100" height="100"/>
+  <rect class="light cell" x="650" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="750" width="100" height="100"/>
+  <circle class="dark piece" cx="200" cy="100" r="40"/>
+  <circle class="light piece" cx="200" cy="700" r="40"/>
+  <circle class="dark piece" cx="400" cy="100" r="40"/>
+  <circle class="light piece" cx="400" cy="700" r="40"/>
+  <circle class="dark piece" cx="600" cy="100" r="40"/>
+  <circle class="light piece" cx="600" cy="700" r="40"/>
+  <circle class="dark piece" cx="800" cy="100" r="40"/>
+  <circle class="light piece" cx="800" cy="700" r="40"/>
+  <circle class="dark piece" cx="100" cy="200" r="40"/>
+  <circle class="light piece" cx="100" cy="800" r="40"/>
+  <circle class="dark piece" cx="300" cy="200" r="40"/>
+  <circle class="light piece" cx="300" cy="800" r="40"/>
+  <circle class="dark piece" cx="500" cy="200" r="40"/>
+  <circle class="light piece" cx="500" cy="800" r="40"/>
+  <circle class="dark piece" cx="700" cy="200" r="40"/>
+  <circle class="light piece" cx="700" cy="800" r="40"/>
+</svg>