sevgi-showcase 0.95.0 → 0.98.2

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"

data/srv/logos.sevgi

@@ -0,0 +1,34 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+logo = Decompile <<~SVG, id: "Mark"
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <g id="Mark">
+      <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" fill="none"/>
+      <use id="SCVN" href="#Logo" class="passive" transform="matrix(-1,0,0,1,60,0)"/>
+      <use id="SCVP" href="#Logo" class="active"/>
+    </g>
+  </svg>
+SVG
+
+STYLE = {
+  ".active" => {
+    fill: "none", stroke: "purple", "stroke-linecap": "round", "stroke-width": 2.0
+  },
+  ".passive" => {
+    fill: "none", stroke: "lightgrey", "stroke-linecap": "round", "stroke-width": 2.0
+  }
+}.freeze
+
+opacities = [0.8, 0.86, 0.92, 0.97, 1.0].freeze
+fade = proc do |tile, x:, y:, **|
+  tile[:opacity] = opacities.fetch(x + y)
+end
+
+SVG :minimal, width: 260, height: 135, viewBox: "0 0 260 135" do
+  css STYLE
+  rect width: 260, height: 135, fill: "white"
+
+  defs { logo.evaluate self }
+  Tile "Mark", nx: 4, dx: 65, ox: 5, ny: 2, dy: 65, oy: 5, proc: fade
+end.Save

data/srv/logos.svg

@@ -0,0 +1,38 @@
+<svg width="260" height="135" viewBox="0 0 260 135">
+  <style type="text/css">
+    <![CDATA[
+      .active {
+        fill: none;
+        stroke: purple;
+        stroke-linecap: round;
+        stroke-width: 2.0;
+      }
+      .passive {
+        fill: none;
+        stroke: lightgrey;
+        stroke-linecap: round;
+        stroke-width: 2.0;
+      }
+    ]]>
+  </style>
+  <rect width="260" height="135" fill="white"/>
+  <defs>
+    <g id="Mark" xmlns="http://www.w3.org/2000/svg">
+      <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"
+        fill="none"
+      />
+      <use id="SCVN" href="#Logo" class="passive" transform="matrix(-1,0,0,1,60,0)"/>
+      <use id="SCVP" href="#Logo" class="active"/>
+    </g>
+  </defs>
+  <use id="Mark-1-1" href="#Mark" class="tile-row-1 tile-row-first tile-col-1 tile-col-first" x="5" y="5" opacity="0.8"/>
+  <use id="Mark-1-2" href="#Mark" class="tile-row-1 tile-row-first tile-col-2" x="70" y="5" opacity="0.86"/>
+  <use id="Mark-1-3" href="#Mark" class="tile-row-1 tile-row-first tile-col-3" x="135" y="5" opacity="0.92"/>
+  <use id="Mark-1-4" href="#Mark" class="tile-row-1 tile-row-first tile-col-4 tile-col-last" x="200" y="5" opacity="0.97"/>
+  <use id="Mark-2-1" href="#Mark" class="tile-row-2 tile-row-last tile-col-1 tile-col-first" x="5" y="70" opacity="0.86"/>
+  <use id="Mark-2-2" href="#Mark" class="tile-row-2 tile-row-last tile-col-2" x="70" y="70" opacity="0.92"/>
+  <use id="Mark-2-3" href="#Mark" class="tile-row-2 tile-row-last tile-col-3" x="135" y="70" opacity="0.97"/>
+  <use id="Mark-2-4" href="#Mark" class="tile-row-2 tile-row-last tile-col-4 tile-col-last" x="200" y="70" opacity="1.0"/>
+</svg>

data/srv/logos.yml

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

data/srv/{meter-face.sevgi → meter.sevgi}

@@ -6,15 +6,15 @@ LED_GAP = 2
 LED_WIDTH = 10
 TOTAL_WIDTH = (LED_COUNT * (LED_WIDTH + LED_GAP)) + 8
 
+dim = proc do |led, x:, **|
+  led[:"fill-opacity"] = 0.3 if x >= 7
+end
+
 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
+  TileX "led", n: LED_COUNT, d: LED_WIDTH + LED_GAP, o: 5, proc: dim do
+    rect y: 5, width: LED_WIDTH, height: 20, rx: 3, fill: "green"
   end
 end.Save

data/srv/meter.svg

@@ -0,0 +1,18 @@
+<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"/>
+  <defs>
+    <g id="led">
+      <rect y="5" width="10" height="20" rx="3" fill="green"/>
+    </g>
+  </defs>
+  <use id="led-1" href="#led" class="tile-col-1 tile-col-first" x="5"/>
+  <use id="led-2" href="#led" class="tile-col-2" x="17"/>
+  <use id="led-3" href="#led" class="tile-col-3" x="29"/>
+  <use id="led-4" href="#led" class="tile-col-4" x="41"/>
+  <use id="led-5" href="#led" class="tile-col-5" x="53"/>
+  <use id="led-6" href="#led" class="tile-col-6" x="65"/>
+  <use id="led-7" href="#led" class="tile-col-7" x="77"/>
+  <use id="led-8" href="#led" class="tile-col-8" x="89" fill-opacity="0.3"/>
+  <use id="led-9" href="#led" class="tile-col-9" x="101" fill-opacity="0.3"/>
+  <use id="led-10" href="#led" class="tile-col-10 tile-col-last" x="113" fill-opacity="0.3"/>
+</svg>

data/srv/pacman.sevgi

@@ -0,0 +1,18 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+SVG :minimal, width: 180, height: 90 do
+  rect id: "frame", width: 180, height: 90, rx: 5, fill: "white"
+
+  circle id: "head", cx: 70, cy: 45, r: 40, fill: "purple"
+  circle id: "eye", cx: 80, cy: 23, r: 6, fill: "white"
+  polygon id: "mouth", points: %w[70,45 110,15 110,75], fill: "white"
+
+  Symbol "dot" do
+    circle cx: 110, cy: 45, r: 6, fill: "purple"
+  end
+
+  g id: "dots" do
+    TileX "dot", n: 3, d: 18
+  end
+end.Save

data/srv/pacman.svg

@@ -0,0 +1,15 @@
+<svg width="180" height="90">
+  <rect id="frame" width="180" height="90" rx="5" fill="white"/>
+  <circle id="head" cx="70" cy="45" r="40" fill="purple"/>
+  <circle id="eye" cx="80" cy="23" r="6" fill="white"/>
+  <polygon id="mouth" points="70,45 110,15 110,75" fill="white"/>
+  <symbol id="dot">
+    <title>Dot</title>
+    <circle cx="110" cy="45" 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/pokey.sevgi

@@ -0,0 +1,14 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+SVG :minimal, width: 100, height: 100 do
+  rect x: 0, y: 0, width: 100, height: 100, fill: "white"
+  path fill: "purple", d: %w[
+    M10 101 V50 A40 40 0 0 1 90 50 V101
+    L76 85 L63 101 L50 85 L37 101 L24 85 Z
+  ]
+
+  [25, 50].each do |x|
+    circle cx: x, cy: 40, r: 8, fill: "white"
+  end
+end.Save

data/srv/pokey.svg

@@ -0,0 +1,6 @@
+<svg width="100" height="100">
+  <rect x="0" y="0" width="100" height="100" fill="white"/>
+  <path fill="purple" d="M10 101 V50 A40 40 0 0 1 90 50 V101 L76 85 L63 101 L50 85 L37 101 L24 85 Z"/>
+  <circle cx="25" cy="40" r="8" fill="white"/>
+  <circle cx="50" cy="40" r="8" fill="white"/>
+</svg>

data/srv/{ruler-line.sevgi → ruler-.sevgi}

@@ -1,15 +1,15 @@
 #!/usr/bin/env -S ruby -S sevgi
 # frozen_string_literal: true
 
-WIDTH   = 150 # 15 cm width (ruler's length)
-HEIGHT  = 20  # 2  cm height
+WIDTH = 150 # 15 cm width (ruler's length)
+HEIGHT = 20 # 2 cm height
 
 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.05, fill: "none" }
+  ".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.05, fill: "none" }
 }.freeze
 
 SVG width: "210mm", height: "50mm", viewBox: "0 0 210 50" do

data/srv/ruler.sevgi

@@ -0,0 +1,61 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+WIDTH = 150 # 15 cm width (ruler's length)
+HEIGHT = 20 # 2 cm height
+PAGE_WIDTH = 170
+PAGE_HEIGHT = 30
+
+STYLE = {
+  ".labels" => { fill: "black", font: "3pt monospace" },
+  ".majors" => { stroke: "black", "stroke-width": 0.3 },
+  ".halves" => { stroke: "black", "stroke-width": 0.15 },
+  ".minors" => { stroke: "black", "stroke-width": 0.15 },
+  ".frame" => { stroke: "black", "stroke-width": 0.15, fill: "none" }
+}.freeze
+
+SVG width: "#{PAGE_WIDTH}mm", height: "#{PAGE_HEIGHT}mm",
+    viewBox: "0 0 #{PAGE_WIDTH} #{PAGE_HEIGHT}" do
+  css STYLE
+
+  ruler = g id: "ruler" do
+    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:, 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:, 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:, 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
+
+  offset_x = (PAGE_WIDTH - WIDTH) / 2
+  offset_y = (PAGE_HEIGHT - HEIGHT) / 2
+  ruler.Translate offset_x, offset_y
+end.Save