sevgi-showcase 0.94.0 → 0.98.2

data/srv/stars.yml

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

data/srv/tulips.sevgi

@@ -0,0 +1,27 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+TULIP = <<~PATH
+  m 7.072424,8.784891 c -1.62123,1.620145 -4.24191,1.620145 -5.860483,0
+  -1.611497,-1.619275 -1.62034,-4.239086 0,-5.854824 l 2.928473,-2.930067
+  -0.48823,3.907639 3.42024,-0.977572 -0.98,3.417962 3.90758,-0.488766
+  -2.92758,2.925628
+PATH
+
+CENTER = 13
+SIDE = 3.5
+ANCHOR = [1.211941, 8.784891].freeze
+CORNER = [CENTER + (SIDE / 2), CENTER - (SIDE / 2)].freeze
+SIZE = 26
+
+SVG :minimal, width: SIZE, height: SIZE do
+  rect width: SIZE, height: SIZE, rx: 0.75, fill: "white"
+  defs { path id: "Tulip", d: TULIP, fill: "purple" }
+
+  4.times do |quarter|
+    flower = use href: "#Tulip", x: CORNER[0] - ANCHOR[0], y: CORNER[1] - ANCHOR[1]
+    flower.Rotate quarter * 90, CENTER, CENTER
+  end
+
+  square x: CENTER - (SIDE / 2), y: CENTER - (SIDE / 2), length: SIDE, fill: "purple"
+end.Save

data/srv/tulips.svg

@@ -0,0 +1,19 @@
+<svg width="26" height="26">
+  <rect width="26" height="26" rx="0.75" fill="white"/>
+  <defs>
+    <path
+      id="Tulip"
+      d="m 7.072424,8.784891 c -1.62123,1.620145 -4.24191,1.620145 -5.860483,0
+-1.611497,-1.619275 -1.62034,-4.239086 0,-5.854824 l 2.928473,-2.930067
+-0.48823,3.907639 3.42024,-0.977572 -0.98,3.417962 3.90758,-0.488766
+-2.92758,2.925628
+"
+      fill="purple"
+    />
+  </defs>
+  <use href="#Tulip" x="13.538059" y="2.465109"/>
+  <use href="#Tulip" x="13.538059" y="2.465109" transform="rotate(90, 13, 13)"/>
+  <use href="#Tulip" x="13.538059" y="2.465109" transform="rotate(180, 13, 13)"/>
+  <use href="#Tulip" x="13.538059" y="2.465109" transform="rotate(270, 13, 13)"/>
+  <rect width="3.5" height="3.5" x="11.25" y="11.25" fill="purple"/>
+</svg>

data/srv/tulips.yml

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sevgi-showcase
 version: !ruby/object:Gem::Version
-  version: 0.94.0
+  version: 0.98.2
 platform: ruby
 authors:
 - Recai Oktaş
@@ -15,15 +15,15 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.94.0
+        version: 0.98.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.94.0
-description: Provides documents and examples to demonstrate the Sevgi toolkit.
+        version: 0.98.2
+description: Packages tested .sevgi examples and documentation site support.
 email: roktas@gmail.com
 executables: []
 extensions: []
@@ -40,36 +40,57 @@ files:
 - lib/sevgi/showcase/minitest/suite.rb
 - lib/sevgi/showcase/passive.rb
 - lib/sevgi/showcase/version.rb
-- srv/checker-board.sevgi
-- srv/checker-board.svg
-- srv/checker-board.yml
-- srv/gear-wheel.sevgi
-- srv/gear-wheel.svg
-- srv/gear-wheel.yml
-- srv/grid-cells.sevgi
-- srv/grid-cells.svg
-- srv/grid-cells.yml
-- srv/heart-mask.sevgi
-- srv/heart-mask.svg
-- srv/heart-mask.yml
-- srv/meter-face.sevgi
-- srv/meter-face.svg
-- srv/meter-face.yml
-- srv/pacman-pokey.sevgi
-- srv/pacman-pokey.svg
-- srv/pacman-pokey.yml
-- srv/pacman-single.sevgi
-- srv/pacman-single.svg
-- srv/pacman-single.yml
-- srv/ruler-hline.sevgi
-- srv/ruler-hline.svg
-- srv/ruler-hline.yml
-- srv/ruler-line.sevgi
-- srv/ruler-line.svg
-- srv/ruler-line.yml
-- srv/snow-flake.sevgi
-- srv/snow-flake.svg
-- srv/snow-flake.yml
+- srv/checkers.sevgi
+- srv/checkers.svg
+- srv/checkers.yml
+- srv/clover.sevgi
+- srv/clover.svg
+- srv/clover.yml
+- srv/copperplate.sevgi
+- srv/copperplate.svg
+- srv/copperplate.yml
+- srv/gear.sevgi
+- srv/gear.svg
+- srv/gear.yml
+- srv/grid.sevgi
+- srv/grid.svg
+- srv/grid.yml
+- srv/heart.sevgi
+- srv/heart.svg
+- srv/heart.yml
+- srv/logo.sevgi
+- srv/logo.svg
+- srv/logo.yml
+- srv/logos.sevgi
+- srv/logos.svg
+- srv/logos.yml
+- srv/meter.sevgi
+- srv/meter.svg
+- srv/meter.yml
+- srv/pacman.sevgi
+- srv/pacman.svg
+- srv/pacman.yml
+- srv/pokey.sevgi
+- srv/pokey.svg
+- srv/pokey.yml
+- srv/ruler-.sevgi
+- srv/ruler-.svg
+- srv/ruler-.yml
+- srv/ruler.sevgi
+- srv/ruler.svg
+- srv/ruler.yml
+- srv/snowflake.sevgi
+- srv/snowflake.svg
+- srv/snowflake.yml
+- srv/squared.sevgi
+- srv/squared.svg
+- srv/squared.yml
+- srv/stars.sevgi
+- srv/stars.svg
+- srv/stars.yml
+- srv/tulips.sevgi
+- srv/tulips.svg
+- srv/tulips.yml
 homepage: https://sevgi.roktas.dev
 licenses:
 - GPL-3.0-or-later
@@ -92,7 +113,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.16
 specification_version: 4
-summary: Documents and examples for the Sevgi toolkit.
+summary: Executable examples and user documentation for Sevgi.
 test_files: []

data/srv/checker-board.sevgi

@@ -1,96 +0,0 @@
-#!/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

@@ -1,117 +0,0 @@
-<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>

data/srv/gear-wheel.svg

@@ -1,12 +0,0 @@
-<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

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

data/srv/heart-mask.sevgi

@@ -1,17 +0,0 @@
-#!/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.yml

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

data/srv/meter-face.svg

@@ -1,13 +0,0 @@
-<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/pacman-pokey.sevgi

@@ -1,17 +0,0 @@
-#!/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

@@ -1,9 +0,0 @@
-<?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-single.sevgi

@@ -1,17 +0,0 @@
-#!/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

@@ -1,14 +0,0 @@
-<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/ruler-hline.sevgi

@@ -1,55 +0,0 @@
-#!/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()