sevgi-showcase 0.94.0 → 0.98.2

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

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

@@ -1,4 +1,4 @@
-<svg width="160" height="60" viewBox="0 0 160 60">
+<svg width="180" height="80" viewBox="0 0 180 80">
   <style type="text/css">
     <![CDATA[
       .cell {
@@ -9,25 +9,37 @@
   <rect class="cell" x="0" y="0" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="0" y="20" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="0" y="40" width="20" height="20" rx="2" fill="#FFD700"/>
+  <rect class="cell" x="0" y="60" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="20" y="0" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="20" y="20" width="20" height="20" rx="2" fill="#FFD700"/>
   <rect class="cell" x="20" y="40" width="20" height="20" rx="2" fill="#FF6961"/>
+  <rect class="cell" x="20" y="60" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="40" y="0" width="20" height="20" rx="2" fill="#FFD700"/>
   <rect class="cell" x="40" y="20" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="40" y="40" width="20" height="20" rx="2" fill="#77DD77"/>
+  <rect class="cell" x="40" y="60" width="20" height="20" rx="2" fill="#FFD700"/>
   <rect class="cell" x="60" y="0" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="60" y="20" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="60" y="40" width="20" height="20" rx="2" fill="#FFD700"/>
+  <rect class="cell" x="60" y="60" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="80" y="0" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="80" y="20" width="20" height="20" rx="2" fill="#FFD700"/>
   <rect class="cell" x="80" y="40" width="20" height="20" rx="2" fill="#FF6961"/>
+  <rect class="cell" x="80" y="60" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="100" y="0" width="20" height="20" rx="2" fill="#FFD700"/>
   <rect class="cell" x="100" y="20" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="100" y="40" width="20" height="20" rx="2" fill="#77DD77"/>
+  <rect class="cell" x="100" y="60" width="20" height="20" rx="2" fill="#FFD700"/>
   <rect class="cell" x="120" y="0" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="120" y="20" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="120" y="40" width="20" height="20" rx="2" fill="#FFD700"/>
+  <rect class="cell" x="120" y="60" width="20" height="20" rx="2" fill="#FF6961"/>
   <rect class="cell" x="140" y="0" width="20" height="20" rx="2" fill="#77DD77"/>
   <rect class="cell" x="140" y="20" width="20" height="20" rx="2" fill="#FFD700"/>
   <rect class="cell" x="140" y="40" width="20" height="20" rx="2" fill="#FF6961"/>
+  <rect class="cell" x="140" y="60" width="20" height="20" rx="2" fill="#77DD77"/>
+  <rect class="cell" x="160" y="0" width="20" height="20" rx="2" fill="#FFD700"/>
+  <rect class="cell" x="160" y="20" width="20" height="20" rx="2" fill="#FF6961"/>
+  <rect class="cell" x="160" y="40" width="20" height="20" rx="2" fill="#77DD77"/>
+  <rect class="cell" x="160" y="60" width="20" height="20" rx="2" fill="#FFD700"/>
 </svg>

data/srv/heart.sevgi

@@ -0,0 +1,17 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+HEART = "M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
+
+SVG :minimal, width: 120, height: 120, viewBox: "-10 -10 120 120" do
+  mask id: "heart",
+       maskUnits: "userSpaceOnUse",
+       maskContentUnits: "userSpaceOnUse",
+       x: 0, y: 0, width: 100, height: 100 do
+    square length: 100, fill: "white"
+    path d: HEART, fill: "black"
+  end
+
+  polygon points: %w[-10,120 120,120 120,-10], fill: "#e5c39c"
+  circle cx: 50, cy: 50, r: 50, mask: "url(#heart)", fill: "purple"
+end.Save

data/srv/{heart-mask.svg → heart.svg}

@@ -1,8 +1,8 @@
 <svg width="120" height="120" viewBox="-10 -10 120 120">
   <mask id="heart" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
-    <rect x="0" y="0" width="100" height="100" fill="white"/>
+    <rect width="100" height="100" fill="white"/>
     <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black"/>
   </mask>
-  <polygon points="-10,120 120,120 120,-10" fill="orange"/>
-  <circle cx="50" cy="50" r="50" mask="url(#heart)" fill="red"/>
+  <polygon points="-10,120 120,120 120,-10" fill="#e5c39c"/>
+  <circle cx="50" cy="50" r="50" mask="url(#heart)" fill="purple"/>
 </svg>

data/srv/heart.yml

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

data/srv/logo.sevgi

@@ -0,0 +1,39 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+module Logo
+  extend SVG::Module
+
+  LOGO = <<~PATH
+    m 30,30 c 0,0 18.39,7.089444 18.39,15 C 48.39,52.910556 30,60 30,60
+    M 30,0 C 30,0 11.61,7.089442 11.61,14.999998 C 11.61,22.910556 30,30 30,30
+  PATH
+
+  STYLE = {
+    ".active" => {
+      fill: "none", stroke: "purple", "stroke-linecap": "round", "stroke-width": 1.5
+    },
+    ".passive" => {
+      fill: "none", stroke: "lightgrey", "stroke-linecap": "round", "stroke-width": 1.5
+    }
+  }.freeze
+
+  base do
+    css STYLE
+    defs { path id: "Logo", d: LOGO }
+  end
+
+  def call
+    negative = use id: "SCVN", href: "#Logo"
+    negative.Classify :passive
+    negative.Matrix(-1, 0, 0, 1, 60, 0)
+
+    positive = use id: "SCVP", href: "#Logo"
+    positive.Classify :active
+  end
+end
+
+SVG :minimal, width: 120, height: 120, viewBox: "-1 -1 62 62" do
+  rect x: -1, y: -1, width: 62, height: 62, fill: "white"
+  Call Logo
+end.Save

data/srv/logo.svg

@@ -0,0 +1,29 @@
+<svg width="120" height="120" viewBox="-1 -1 62 62">
+  <rect x="-1" y="-1" width="62" height="62" fill="white"/>
+  <style type="text/css">
+    <![CDATA[
+      .active {
+        fill: none;
+        stroke: purple;
+        stroke-linecap: round;
+        stroke-width: 1.5;
+      }
+      .passive {
+        fill: none;
+        stroke: lightgrey;
+        stroke-linecap: round;
+        stroke-width: 1.5;
+      }
+    ]]>
+  </style>
+  <defs>
+    <path
+      id="Logo"
+      d="m 30,30 c 0,0 18.39,7.089444 18.39,15 C 48.39,52.910556 30,60 30,60
+M 30,0 C 30,0 11.61,7.089442 11.61,14.999998 C 11.61,22.910556 30,30 30,30
+"
+    />
+  </defs>
+  <use id="SCVN" href="#Logo" class="passive" transform="matrix(-1 0 0 1 60 0)"/>
+  <use id="SCVP" href="#Logo" class="active"/>
+</svg>

data/srv/logo.yml

@@ -0,0 +1,4 @@
+dark:
+  lightgrey: "#52525b"
+  purple: "#e5c39c"
+  white: "#222222"