sevgi-showcase 0.95.0 → 1.0.0

data/srv/arc.yml

@@ -0,0 +1,4 @@
+dark:
+  black: white
+  purple: "#e5c39c"
+  slategray: silver

data/srv/checkers.sevgi

@@ -0,0 +1,78 @@
+#!/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 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,118 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/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 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,12 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/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.sevgi

@@ -0,0 +1,25 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+STYLE = {
+  fill: "purple",
+  mask: "url(#hole)",
+  stroke: "none"
+}.freeze
+
+SVG width: 100, height: 100, viewBox: "0 0 100 100" do
+  mask id: "hole",
+       maskUnits: "userSpaceOnUse",
+       maskContentUnits: "userSpaceOnUse",
+       x: 0, y: 0, width: 100, height: 100 do
+    square length: 100, fill: "white"
+    circle cx: 50, cy: 50, r: 15, fill: "black"
+  end
+
+  circle cx: 50, cy: 50, r: 30, **STYLE
+
+  [0, 45, 90, 135].each do |angle|
+    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,12 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/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.sevgi

@@ -0,0 +1,23 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+SIZE = 20
+COLORS = %w[#FF6961 #77DD77 #FFD700].freeze
+COLS = 9
+ROWS = 4
+
+SVG 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 * SIZE, y: row * SIZE,
+           width: SIZE, height: SIZE,
+           rx: (SIZE * 0.1).round,
+           fill: COLORS[(col + row) % COLORS.length]
+    end
+  end
+end.Save

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

@@ -1,4 +1,5 @@
-<svg width="160" height="60" viewBox="0 0 160 60">
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="80" viewBox="0 0 180 80">
   <style type="text/css">
     <![CDATA[
       .cell {
@@ -9,25 +10,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/hatch.sevgi

@@ -0,0 +1,9 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+SVG :inkscape, width: 150, height: 100, viewBox: "0 0 150 100" do
+  ellipse = Geometry::Ellipse[70, 40, position: [75, 50]]
+
+  Draw ellipse, fill: "#f8e6f8", stroke: "blue", "stroke-width": 1.5
+  Hatch ellipse, angle: 35, step: 6, stroke: "purple", "stroke-width": 0.5
+end.Save

data/srv/hatch.svg

@@ -0,0 +1,30 @@
+<?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="crispEdges"
+  width="150"
+  height="100"
+  viewBox="0 0 150 100"
+>
+  <ellipse cx="75.0" cy="50.0" rx="70.0" ry="40.0" fill="#f8e6f8" stroke="blue" stroke-width="1.5"/>
+  <path d="M 8.083983 61.742081 L 41.452937 85.107274" stroke="purple" stroke-width="0.5"/>
+  <path d="M 5.120097 52.342098 L 56.974708 88.651087" stroke="purple" stroke-width="0.5"/>
+  <path d="M 5.489812 45.276328 L 69.162877 89.860688" stroke="purple" stroke-width="0.5"/>
+  <path d="M 7.516638 39.370879 L 79.693937 89.909968" stroke="purple" stroke-width="0.5"/>
+  <path d="M 10.657929 34.245787 L 89.110531 89.17889" stroke="purple" stroke-width="0.5"/>
+  <path d="M 14.660149 29.723524 L 97.666196 87.844984" stroke="purple" stroke-width="0.5"/>
+  <path d="M 19.386506 25.708308 L 105.497723 86.004031" stroke="purple" stroke-width="0.5"/>
+  <path d="M 24.76021 22.146368 L 112.681905 83.709801" stroke="purple" stroke-width="0.5"/>
+  <path d="M 30.741521 19.009879 L 119.258479 80.990121" stroke="purple" stroke-width="0.5"/>
+  <path d="M 37.318095 16.290199 L 125.23979 77.853632" stroke="purple" stroke-width="0.5"/>
+  <path d="M 44.502277 13.995969 L 130.613494 74.291692" stroke="purple" stroke-width="0.5"/>
+  <path d="M 52.333804 12.155016 L 135.339851 70.276476" stroke="purple" stroke-width="0.5"/>
+  <path d="M 60.889469 10.82111 L 139.342071 65.754213" stroke="purple" stroke-width="0.5"/>
+  <path d="M 70.306063 10.090032 L 142.483362 60.629121" stroke="purple" stroke-width="0.5"/>
+  <path d="M 80.837123 10.139312 L 144.510188 54.723672" stroke="purple" stroke-width="0.5"/>
+  <path d="M 93.025292 11.348913 L 144.879903 47.657902" stroke="purple" stroke-width="0.5"/>
+  <path d="M 108.547063 14.892726 L 141.916017 38.257919" stroke="purple" stroke-width="0.5"/>
+</svg>

data/srv/hatch.yml

@@ -0,0 +1,4 @@
+dark:
+  "#f8e6f8": "#2c251e"
+  blue: "#60a5fa"
+  purple: "#e5c39c"

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 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.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/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 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="#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 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