sevgi-showcase 0.73.2 → 0.94.0

data/srv/checker-board.yml

@@ -0,0 +1,6 @@
+dark:
+  "#d1bfa7": "#705f4b"
+  "#d4a76f": "#b88a55"
+  "#6a3f2b": "#d3a778"
+  "#333": "#161616"
+  "#f5f5f5": "#e8e2dc"

data/srv/gear-wheel.sevgi

@@ -0,0 +1,27 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+GEAR_STYLE = {
+  fill: "#333",
+  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"
+    circle cx: 50, cy: 50, r: 15, fill: "black"
+  end
+
+  circle cx: 50, cy: 50, r: 30, mask: "url(#hole)", **GEAR_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
+  end
+end.Save

data/srv/gear-wheel.svg

@@ -0,0 +1,12 @@
+<svg width="100" height="100" viewBox="0 0 100 100">
+  <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">
+    <rect x="0" y="0" width="100" height="100" fill="white"/>
+    <circle cx="50" cy="50" r="15" fill="black"/>
+  </mask>
+  <circle cx="50" cy="50" r="30" mask="url(#hole)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(0 50 50)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(45 50 50)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(90 50 50)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(135 50 50)" fill="#333" stroke="none"/>
+</svg>

data/srv/gear-wheel.yml

@@ -0,0 +1,3 @@
+dark:
+  "#333": "#e5c39c"
+  lightgreen: "#1f3522"

data/srv/grid-cells.sevgi

@@ -0,0 +1,24 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+CELL_SIZE = 20
+COLORS = %w[#FF6961 #77DD77 #FFD700].freeze
+COLS = 8
+ROWS = 3
+
+SVG :minimal,
+    width: COLS * CELL_SIZE,
+    height: ROWS * CELL_SIZE,
+    viewBox: "0 0 #{COLS * CELL_SIZE} #{ROWS * CELL_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,
+           fill: COLORS[(col + row) % COLORS.length]
+    end
+  end
+end.Save

data/srv/grid-cells.svg

@@ -0,0 +1,33 @@
+<svg width="160" height="60" viewBox="0 0 160 60">
+  <style type="text/css">
+    <![CDATA[
+      .cell {
+        stroke: white;
+      }
+    ]]>
+  </style>
+  <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="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="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="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="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="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="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="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"/>
+</svg>

data/srv/grid-cells.yml

@@ -0,0 +1,4 @@
+dark:
+  "#FF6961": "#f27b72"
+  "#77DD77": "#7fdc9c"
+  "#FFD700": "#f1c95b"

data/srv/heart-mask.sevgi

@@ -0,0 +1,17 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+HEART_PATH = "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
+    rect x: 0, y: 0, width: 100, height: 100, fill: "white"
+    path d: HEART_PATH, fill: "black"
+  end
+
+  polygon points: %w[-10,120 120,120 120,-10], fill: "orange"
+  circle cx: 50, cy: 50, r: 50, mask: "url(#heart)", fill: "red"
+end.Save

data/srv/heart-mask.svg

@@ -0,0 +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"/>
+    <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"/>
+</svg>

data/srv/heart-mask.yml

@@ -0,0 +1,3 @@
+dark:
+  orange: "#f2b35d"
+  red: "#e8505b"

data/srv/meter-face.sevgi

@@ -0,0 +1,20 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+LED_COUNT = 10
+LED_GAP = 2
+LED_WIDTH = 10
+TOTAL_WIDTH = (LED_COUNT * (LED_WIDTH + LED_GAP)) + 8
+
+SVG :minimal, width: TOTAL_WIDTH, height: 30, viewBox: "0 0 #{TOTAL_WIDTH} 30" do
+  rect x: 2, y: 2, width: TOTAL_WIDTH - 4, height: 26,
+       rx: 4, fill: "none", stroke: "#666"
+
+  x = 5
+  LED_COUNT.times do |i|
+    rect x:, y: 5, width: LED_WIDTH, height: 20,
+         rx: 3, fill: "green", "fill-opacity": (i < 7 ? 1 : 0.3)
+
+    x += LED_WIDTH + LED_GAP
+  end
+end.Save

data/srv/meter-face.svg

@@ -0,0 +1,13 @@
+<svg width="128" height="30" viewBox="0 0 128 30">
+  <rect x="2" y="2" width="124" height="26" rx="4" fill="none" stroke="#666"/>
+  <rect x="5" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="17" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="29" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="41" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="53" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="65" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="77" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="89" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
+  <rect x="101" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
+  <rect x="113" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
+</svg>

data/srv/meter-face.yml

@@ -0,0 +1,3 @@
+dark:
+  "#666": "#d8d8d8"
+  green: "#7bd88f"

data/srv/pacman-pokey.sevgi

@@ -0,0 +1,17 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+SVG width: 100, height: 100 do
+  rect x: 0, y: 0, width: 100, height: 100, fill: "white"
+  circle cx: 50, cy: 50, r: 40, fill: "purple"
+  rect x: 10, y: 50, width: 80, height: 50, fill: "purple"
+
+  [ 25, 50 ].each do |x|
+    circle cx: x, cy: 40, r: 8, fill: "white"
+  end
+
+  path fill: "white", d: %w[
+    M11 100 l13 -15 l13 15 l13 -15
+    l13 15 l13 -15 l13 15 Z
+  ]
+end.Save

data/srv/pacman-pokey.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+  <rect x="0" y="0" width="100" height="100" fill="white"/>
+  <circle cx="50" cy="50" r="40" fill="purple"/>
+  <rect x="10" y="50" width="80" height="50" fill="purple"/>
+  <circle cx="25" cy="40" r="8" fill="white"/>
+  <circle cx="50" cy="40" r="8" fill="white"/>
+  <path fill="white" d="M11 100 l13 -15 l13 15 l13 -15 l13 15 l13 -15 l13 15 Z"/>
+</svg>

data/srv/pacman-pokey.yml

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

data/srv/pacman-single.sevgi

@@ -0,0 +1,17 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+SVG :minimal, width: 200, height: 100 do
+  rect id: "frame", width: 200, height: 100, rx: 5, fill: "white"
+
+  circle id: "head", cx: 80, cy: 50, r: 40, fill: "purple"
+  circle id: "eye", cx: 90, cy: 28, r: 6, fill: "white"
+  polygon id: "mouth", points: %w[ 80,50 120,20 120,80 ], fill: "white"
+
+  symbol id: "dot" do
+    circle cx: 120, cy: 50, r: 6, fill: "purple"
+  end
+  g id: "dots" do
+    TileX "dot", n: 3, d: 18
+  end
+end.Save

data/srv/pacman-single.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="100">
+  <rect id="frame" width="200" height="100" rx="5" fill="white"/>
+  <circle id="head" cx="80" cy="50" r="40" fill="purple"/>
+  <circle id="eye" cx="90" cy="28" r="6" fill="white"/>
+  <polygon id="mouth" points="80,50 120,20 120,80" fill="white"/>
+  <symbol id="dot">
+    <circle cx="120" cy="50" r="6" fill="purple"/>
+  </symbol>
+  <g id="dots">
+    <use id="dot-1" href="#dot" class="tile-col-1 tile-col-first"/>
+    <use id="dot-2" href="#dot" class="tile-col-2" x="18"/>
+    <use id="dot-3" href="#dot" class="tile-col-3 tile-col-last" x="36"/>
+  </g>
+</svg>

data/srv/pacman-single.yml

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

data/srv/ruler-hline.sevgi

@@ -0,0 +1,55 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+# 15 cm width (ruler's length)
+WIDTH = 150
+# 2  cm height
+HEIGHT = 20
+
+STYLE = {
+  ".labels": {fill: "black", font: "3pt monospace"},
+  ".majors": {stroke: "black", "stroke-width": 0.2},
+  ".halves": {stroke: "black", "stroke-width": 0.1},
+  ".minors": {stroke: "black", "stroke-width": 0.1},
+  ".frame": {stroke: "black", "stroke-width": 0.1, fill: "none"}
+}.freeze
+
+SVG(width: "210mm", height: "50mm", viewBox: "0 0 210 50") do
+  css(STYLE)
+
+  rect(id: "frame", width: WIDTH, height: HEIGHT, class: "frame")
+
+  layer(id: "minors") do
+    length = 2
+
+    (0..WIDTH).step(1) do |x|
+      VLineBy(x:, y: 0, length: length, class: "minors")
+      VLineBy(x:, y: HEIGHT, length: -length, class: "minors")
+    end
+  end
+
+  layer(id: "halves") do
+    length = 4
+
+    (0..WIDTH).step(5) do |x|
+      VLineBy(x:, y: 0, length: length, class: "halves")
+      VLineBy(x:, y: HEIGHT, length: -length, class: "halves")
+    end
+  end
+
+  layer(id: "majors") do
+    length = 6
+
+    (10..(WIDTH - 10)).step(10) do |x|
+      VLineBy(x:, y: 0, length: length, class: "majors")
+      VLineBy(x:, y: HEIGHT, length: -length, class: "majors")
+    end
+
+    layer(id: "labels") do
+      (10..(WIDTH - 10)).step(10).each_with_index do |x, i|
+        text((i + 1).to_s, "text-anchor": "middle", x:, y: length + 5.5, class: "labels")
+      end
+    end
+  end
+end
+  .Save()