squib 0.14.1 → 0.14.2

data/samples/config/config_text_markup.rb

@@ -1,20 +1,20 @@
-require 'squib'
-
-Squib::Deck.new(config: 'config_text_markup.yml') do
-  background color: :white
-  text str: %{"'Yaml ain't markup', he says"},
-       x: 10, y: 10, width: 300, height: 200, font: 'Serif 7',
-       markup: true, hint: :cyan
-
-  text str: 'Notice also the antialiasing method.',
-       x: 320, y: 10, width: 300, height: 200, font: 'Arial Bold 7'
-
-  save_png prefix: 'config_text_'
-end
-
-Squib::Deck.new(config: 'config_disable_quotes.yml') do
-  text str: %{This has typographic sugar --- and ``explicit'' quotes --- but the quotes are "dumb"},
-       x: 10, y: 10, width: 300, height: 200, font: 'Serif 7',
-       markup: true, hint: :cyan
-  save_png prefix: 'config_disable_text_'
-end
+require 'squib'
+
+Squib::Deck.new(config: 'config_text_markup.yml') do
+  background color: :white
+  text str: %{"'Yaml ain't markup', he says"},
+       x: 10, y: 10, width: 300, height: 200, font: 'Serif 7',
+       markup: true, hint: :cyan
+
+  text str: 'Notice also the antialiasing method.',
+       x: 320, y: 10, width: 300, height: 200, font: 'Arial Bold 7'
+
+  save_png prefix: 'config_text_'
+end
+
+Squib::Deck.new(config: 'config_disable_quotes.yml') do
+  text str: %{This has typographic sugar --- and ``explicit'' quotes --- but the quotes are "dumb"},
+       x: 10, y: 10, width: 300, height: 200, font: 'Serif 7',
+       markup: true, hint: :cyan
+  save_png prefix: 'config_disable_text_'
+end

data/samples/config/custom_config.rb

@@ -1,18 +1,18 @@
-require 'squib'
-
-Squib::Deck.new(config: 'custom-config.yml') do
-  # Custom color defined in our config
-  background color: :foo
-
-  # Hints can be turned on in the config file
-  text str: 'The Title', x: 0, y: 78, width: 825,
-       font: 'Arial 24', align: :center
-
-  # Progress bars are shown for these commands
-  # And images are taken from img_dir, not the cwd.
-  png file: 'shiny-purse2.png', x: 620, y: 75
-  svg file: 'spanner2.svg', x: 620, y: 218
-  save_png prefix: 'custom-config_'
-  save_pdf file: 'custom-config-out.pdf'
-
-end
+require 'squib'
+
+Squib::Deck.new(config: 'custom-config.yml') do
+  # Custom color defined in our config
+  background color: :foo
+
+  # Hints can be turned on in the config file
+  text str: 'The Title', x: 0, y: 78, width: 825,
+       font: 'Arial 24', align: :center
+
+  # Progress bars are shown for these commands
+  # And images are taken from img_dir, not the cwd.
+  png file: 'shiny-purse2.png', x: 620, y: 75
+  svg file: 'spanner2.svg', x: 620, y: 218
+  save_png prefix: 'custom-config_'
+  save_pdf file: 'custom-config-out.pdf'
+
+end

data/samples/data/_csv.rb

@@ -1,33 +1,33 @@
-require 'squib'
-
-Squib::Deck.new(cards: 2) do
-  background color: :white
-
-  # Outputs a hash of arrays with the header names as keys
-  data = csv file: 'sample.csv'
-  text str: data['Type'], x: 250, y: 55, font: 'Arial 18'
-  text str: data['Level'], x: 65, y: 65, font: 'Arial 24'
-
-  save format: :png, prefix: 'sample_csv_'
-
-  # You can also specify the sheet, starting at 0
-  data = xlsx file: 'sample.xlsx', sheet: 2
-end
-
-# CSV is also a Squib-module-level function, so this also works:
-data      = Squib.csv file: 'quantity_explosion.csv' # 2 rows...
-num_cards = data['Name'].size                        #          ...but 4 cards!
-
-Squib::Deck.new(cards: num_cards) do
-  background color: :white
-  rect # card border
-  text str: data['Name'], font: 'Arial 18'
-  save_sheet prefix: 'sample_csv_qty_', columns: 4
-end
-
-# Additionally, CSV supports inline data specifically
-data = Squib.csv data: <<-EOCSV
-Name,Cost
-Knight,3
-Orc,1
-EOCSV
+require 'squib'
+
+Squib::Deck.new(cards: 2) do
+  background color: :white
+
+  # Outputs a hash of arrays with the header names as keys
+  data = csv file: 'sample.csv'
+  text str: data['Type'], x: 250, y: 55, font: 'Arial 18'
+  text str: data['Level'], x: 65, y: 65, font: 'Arial 24'
+
+  save format: :png, prefix: 'sample_csv_'
+
+  # You can also specify the sheet, starting at 0
+  data = xlsx file: 'sample.xlsx', sheet: 2
+end
+
+# CSV is also a Squib-module-level function, so this also works:
+data      = Squib.csv file: 'quantity_explosion.csv' # 2 rows...
+num_cards = data['Name'].size                        #          ...but 4 cards!
+
+Squib::Deck.new(cards: num_cards) do
+  background color: :white
+  rect # card border
+  text str: data['Name'], font: 'Arial 18'
+  save_sheet prefix: 'sample_csv_qty_', columns: 4
+end
+
+# Additionally, CSV supports inline data specifically
+data = Squib.csv data: <<-EOCSV
+Name,Cost
+Knight,3
+Orc,1
+EOCSV

data/samples/data/_excel.rb

@@ -1,55 +1,55 @@
-require 'squib'
-
-Squib::Deck.new(cards: 3) do
-  background color: :white
-
-  # Reads the first sheet by default (sheet 0)
-  # Outputs a hash of arrays with the header names as keys
-  data = xlsx file: 'sample.xlsx'
-
-  text str: data['Name'], x: 250, y: 55, font: 'Arial 18'
-  text str: data['Level'], x: 65, y: 65, font: 'Arial 24'
-  text str: data['Description'], x: 65, y: 600, font: 'Arial 12'
-
-  save format: :png, prefix: 'sample_excel_' # save to individual pngs
-end
-
-# xlsx is also a Squib-module-level function, so this also works:
-data      = Squib.xlsx file: 'explode_quantities.xlsx' # 2 rows...
-num_cards = data['Name'].size                          #          ...but 4 cards!
-
-Squib::Deck.new(cards: num_cards) do
-  background color: :white
-  rect # card border
-  text str: data['Name'], font: 'Arial 18'
-  save_sheet prefix: 'sample_xlsx_qty_', columns: 4
-end
-
-
-# Here's another example, a bit more realistic. Here's what's going on:
-#   * We call xlsx from Squib directly - BEFORE Squib::Deck creation. This
-#     allows us to infer the number of cards based on the size of the "Name"
-#     field
-#   * We make use of quantity explosion. Fields named "Qty" or "Quantity"
-#     (any capitalization), or any other in the "qty_header" get expanded by the
-#     number given
-#   * We also make sure that trailing and leading whitespace is stripped
-#     from each value. This is the default behavior in Squib, but the options
-#     are here just to make sure.
-
-resource_data = Squib.xlsx(file: 'sample.xlsx', sheet: 2, strip: true) do |header, value|
-  case header
-  when 'Cost'
-    "$#{value}k" # e.g. "3" becomes "$3k"
-  else
-    value # always return the original value if you didn't do anything to it
-  end
-end
-
-Squib::Deck.new(cards: resource_data['Name'].size) do
-  background color: :white
-  rect width: :deck, height: :deck
-  text str: resource_data['Name'], align: :center, width: :deck, hint: 'red'
-  text str: resource_data['Cost'], align: :right, width: :deck, hint: 'red'
-  save_sheet prefix: 'sample_excel_resources_', columns: 3
-end
+require 'squib'
+
+Squib::Deck.new(cards: 3) do
+  background color: :white
+
+  # Reads the first sheet by default (sheet 0)
+  # Outputs a hash of arrays with the header names as keys
+  data = xlsx file: 'sample.xlsx'
+
+  text str: data['Name'], x: 250, y: 55, font: 'Arial 18'
+  text str: data['Level'], x: 65, y: 65, font: 'Arial 24'
+  text str: data['Description'], x: 65, y: 600, font: 'Arial 12'
+
+  save format: :png, prefix: 'sample_excel_' # save to individual pngs
+end
+
+# xlsx is also a Squib-module-level function, so this also works:
+data      = Squib.xlsx file: 'explode_quantities.xlsx' # 2 rows...
+num_cards = data['Name'].size                          #          ...but 4 cards!
+
+Squib::Deck.new(cards: num_cards) do
+  background color: :white
+  rect # card border
+  text str: data['Name'], font: 'Arial 18'
+  save_sheet prefix: 'sample_xlsx_qty_', columns: 4
+end
+
+
+# Here's another example, a bit more realistic. Here's what's going on:
+#   * We call xlsx from Squib directly - BEFORE Squib::Deck creation. This
+#     allows us to infer the number of cards based on the size of the "Name"
+#     field
+#   * We make use of quantity explosion. Fields named "Qty" or "Quantity"
+#     (any capitalization), or any other in the "qty_header" get expanded by the
+#     number given
+#   * We also make sure that trailing and leading whitespace is stripped
+#     from each value. This is the default behavior in Squib, but the options
+#     are here just to make sure.
+
+resource_data = Squib.xlsx(file: 'sample.xlsx', sheet: 2, strip: true) do |header, value|
+  case header
+  when 'Cost'
+    "$#{value}k" # e.g. "3" becomes "$3k"
+  else
+    value # always return the original value if you didn't do anything to it
+  end
+end
+
+Squib::Deck.new(cards: resource_data['Name'].size) do
+  background color: :white
+  rect width: :deck, height: :deck
+  text str: resource_data['Name'], align: :center, width: :deck, hint: 'red'
+  text str: resource_data['Cost'], align: :right, width: :deck, hint: 'red'
+  save_sheet prefix: 'sample_excel_resources_', columns: 3
+end

data/samples/data/_yaml.rb

@@ -1,12 +1,12 @@
-require 'squib'
-
-Squib::Deck.new(cards: 2) do
-  background color: :white
-
-  # Outputs a hash of arrays with the header names as keys
-  data = yaml file: 'sample.yaml'
-  text str: data['Type'], x: 250, y: 55, font: 'Arial 18'
-  text str: data['Level'], x: 65, y: 65, font: 'Arial 24'
-
-  save format: :png, prefix: 'sample_yaml_'
-end
+require 'squib'
+
+Squib::Deck.new(cards: 2) do
+  background color: :white
+
+  # Outputs a hash of arrays with the header names as keys
+  data = yaml file: 'sample.yaml'
+  text str: data['Type'], x: 250, y: 55, font: 'Arial 18'
+  text str: data['Level'], x: 65, y: 65, font: 'Arial 24'
+
+  save format: :png, prefix: 'sample_yaml_'
+end

data/samples/hello_world.rb

@@ -1,6 +1,6 @@
-require 'squib'
-
-Squib::Deck.new(cards: 2) do
-  text str: %w(Hello World!)
-  save_png
-end
+require 'squib'
+
+Squib::Deck.new(cards: 2) do
+  text str: %w(Hello World!)
+  save_png
+end

data/samples/images/_cairo_access.rb

@@ -1,39 +1,39 @@
-require 'squib'
-
-Squib::Deck.new(cards: 2) do
-  background color: :white
-  # If you really need something custom-made, the underlying cairo context
-  # can be accessed directly via each Squib::Card
-  #
-  # WARNING! Input validation is not done on Squib::Cards. Proceed at your own risk.
-
-  # The recommended approach is to use Deck's Enumerable, which iterates over Squib::Cards
-  # I also recommend wrapping it in a Cairo save/restore, which Squib calls "use_cairo"
-  each do |card|
-    card.use_cairo do |cairo_context|
-      cairo_context.set_source_color(:blue)
-      cairo_context.circle(150, 150, 150)
-      cairo_context.fill
-    end
-  end
-
-  # Or the square bracket accessors []
-  self[1].use_cairo do |cairo_context|
-    cairo_context.circle(50, 50, 50)
-    cairo_context.set_source_color(:red)
-    cairo_context.fill
-  end
-
-  # Or modify the coordinate system for all (most?) future calls
-  # Could be handy for a dynamic bleed
-  each do |card|
-    # note how this does NOT use save/restore.
-    # again... this "feature" lives in the Land of Undefined Behavior
-    card.cairo_context.translate(500, 500)
-  end
-  rect x: 0, y: 0, # actually 500, 500
-       width: 50, height: 50, fill_color: :red
-
-
-  save_png prefix: 'cairo_access_'
-end
+require 'squib'
+
+Squib::Deck.new(cards: 2) do
+  background color: :white
+  # If you really need something custom-made, the underlying cairo context
+  # can be accessed directly via each Squib::Card
+  #
+  # WARNING! Input validation is not done on Squib::Cards. Proceed at your own risk.
+
+  # The recommended approach is to use Deck's Enumerable, which iterates over Squib::Cards
+  # I also recommend wrapping it in a Cairo save/restore, which Squib calls "use_cairo"
+  each do |card|
+    card.use_cairo do |cairo_context|
+      cairo_context.set_source_color(:blue)
+      cairo_context.circle(150, 150, 150)
+      cairo_context.fill
+    end
+  end
+
+  # Or the square bracket accessors []
+  self[1].use_cairo do |cairo_context|
+    cairo_context.circle(50, 50, 50)
+    cairo_context.set_source_color(:red)
+    cairo_context.fill
+  end
+
+  # Or modify the coordinate system for all (most?) future calls
+  # Could be handy for a dynamic bleed
+  each do |card|
+    # note how this does NOT use save/restore.
+    # again... this "feature" lives in the Land of Undefined Behavior
+    card.cairo_context.translate(500, 500)
+  end
+  rect x: 0, y: 0, # actually 500, 500
+       width: 50, height: 50, fill_color: :red
+
+
+  save_png prefix: 'cairo_access_'
+end

data/samples/images/_images.rb

@@ -1,104 +1,104 @@
-require 'squib'
-require 'squib/sample_helpers'
-
-Squib::Deck.new(width: 1000, height: 3000) do
-  draw_graph_paper width, height
-
-  sample "This a PNG.\nNo scaling is done by default." do |x, y|
-    png file: 'angler-fish.png', x: x, y: y
-  end
-
-  sample 'PNGs can be upscaled, but they will emit an antialias warning (unless you turn it off in the config.yml)' do |x,y|
-    png file: 'angler-fish.png', x: x, y: y, width: 150, height: 150
-  end
-
-  sample 'SVGs can be loaded from a file (left) or from straight XML (right). They can also be scaled to any size.' do |x,y|
-    svg file: 'robot-golem.svg', x: x, y: y, width: 100, height: 100
-    svg data: File.read('robot-golem.svg'), width: 100, height: 100,
-        x: x + 200, y: y
-  end
-
-  sample 'PNG and SVG can be auto-scaled by one side and setting the other to :scale' do |x,y|
-    svg file: 'robot-golem.svg', x: x,       y: y, width: 50,     height: :scale
-    svg file: 'robot-golem.svg', x: x + 50,  y: y, width: :scale, height: 50
-
-    png file: 'angler-fish.png', x: x + 200, y: y, width: 50,     height: :scale
-    png file: 'angler-fish.png', x: x + 250, y: y, width: :scale, height: 50
-  end
-
-  sample 'PNGs can be cropped. To work from sprite sheets, you can set crop coordinates to PNG images. Rounded corners supported too.' do |x,y|
-    png file: 'sprites.png', x: x - 50, y: y - 50          # entire sprite sheet
-    rect x: x - 50, y: y - 50, width: 100, height: 100,    # draw the crop line
-         radius: 15, dash: '3 3', stroke_color: 'red', stroke_width: 3
-    text str: '➜', font: 'Sans Bold 12', x: x + 150, y: y - 35
-    png file: 'sprites.png', x: x + 200, y: y - 50,        # just the robot golem image
-        crop_x: 0, crop_y: 0, crop_corner_radius: 15,
-        crop_width: 100, crop_height: 100
-
-    png file: 'sprites.png', x: x - 50, y: y + 50     # entire sprite sheet again
-    rect x: x + 14, y: y + 50, width: 65, height: 65, # highlight the crop
-         radius: 25, dash: '3 3', stroke_color: 'red', stroke_width: 3
-    text str: '➜', font: 'Sans Bold 12', x: x + 150, y: y + 50
-    png file: 'sprites.png', x: x + 225, y: y + 50,   # just the drakkar ship image, rotated
-        crop_x: 64, crop_y: 0, crop_corner_x_radius: 25, crop_corner_y_radius: 25,
-        crop_width: 64, crop_height: 64, angle: Math::PI / 6
-  end
-
-  sample 'SVGs can be cropped too.' do |x,y|
-    svg file: 'robot-golem.svg', x: x, y: y, width: 100, height: 100,
-        crop_x: 40, crop_y: 0, crop_width: 50, crop_height: 50
-  end
-
-  sample 'Images can be flipped about their center.' do |x,y|
-    png file: 'angler-fish.png', x: x, y: y, flip_vertical: true, flip_horizontal: true
-    svg file: 'robot-golem.svg', x: x + 200, y: y, width: 100, height: 100,
-        flip_horizontal: true
-  end
-
-  sample 'SVG can be limited to rendering to a single object if the SVG ID is set. If you look in this SVG file, the black backdrop has ID #backdrop.' do |x,y|
-    svg file: 'robot-golem.svg', id: 'backdrop', x: x, y: y, width: 100, height: 100
-  end
-
-  sample "The SVG force_id option allows use of an ID only when specified, and render nothing if empty. Useful for multiple icons in one SVG file.\nThis should show nothing." do |x,y|
-    svg file: 'robot-golem.svg', x: x, y: y,
-        force_id: true, id: '' # <-- the important parts
-  end
-
-  sample 'NOTE! If you render a single object in an SVG, its placement is still relative to the SVG document.' do |x,y|
-    svg file: 'offset.svg', x: x, y: y
-    rect x: x, y: y, width: 100, height: 100, dash: '3 1', stroke_color: 'red', stroke_width: 3
-
-    svg file: 'offset.svg', id: 'thing',  x: x + 200, y: y, width: 100, height: 100
-    rect x: x + 200, y: y, width: 100, height: 100, dash: '3 1', stroke_color: 'red', stroke_width: 3
-  end
-
-  sample 'PNGs can be blended onto each other with 15 different blending operators. Alpha transparency supported too. See http://cairographics.org/operators' do |x,y|
-    png file: 'ball.png', x: x,      y: y
-    png file: 'grit.png', x: x + 20, y: y + 20, blend: :color_burn, alpha: 0.75
-  end
-
-  sample 'Rotation is around the upper-left corner of the image. Unit is radians.' do |x,y|
-    rect x: x, y: y, width: 100, height: 100, stroke_width: 3, dash: '3 3', stroke_color: :red
-    png  x: x,  y: y, width: 100, height: 100, angle: Math::PI / 4, file: 'angler-fish.png'
-
-    rect x: x + 250, y: y, width: 100, height: 100, stroke_width: 3, dash: '3 3', stroke_color: :red
-    svg  x: x + 250, y: y, width: 100, height: 100, file: 'robot-golem.svg',
-        angle: Math::PI / 2 - 0.2
-  end
-
-  sample 'SVGs and PNGs can be used as masks for colors instead of being directly rendered.' do |x,y|
-    svg mask: '#00ff00', file: 'glass-heart.svg', x: x - 50, y: y - 50, width: 200, height: 200
-    svg mask: '(0,0)(500,0) #eee@0.0 #111@1.0', file: 'glass-heart.svg', x: x + 150, y: y - 50, width: 200, height: 200
-  end
-
-  sample 'PNG masks are based on the alpha channel. Gradient coordinates are relative to the card.' do |x,y|
-    png file: 'with-alpha.png', x: x - 50, y: y
-    png file: 'with-alpha.png', mask: :magenta, x: x + 50, y: y
-
-    mask = "(#{x+150+75}, #{y+75}, 0)(#{x+150+75}, #{y+75}, 100) #f00@0.0 #000@1.0"
-    png file: 'with-alpha.png', mask: mask, x: x + 150, y: y, width: 150, height: :scale
-  end
-
-
-  save_png prefix: '_images_'
-end
+require 'squib'
+require 'squib/sample_helpers'
+
+Squib::Deck.new(width: 1000, height: 3000) do
+  draw_graph_paper width, height
+
+  sample "This a PNG.\nNo scaling is done by default." do |x, y|
+    png file: 'angler-fish.png', x: x, y: y
+  end
+
+  sample 'PNGs can be upscaled, but they will emit an antialias warning (unless you turn it off in the config.yml)' do |x,y|
+    png file: 'angler-fish.png', x: x, y: y, width: 150, height: 150
+  end
+
+  sample 'SVGs can be loaded from a file (left) or from straight XML (right). They can also be scaled to any size.' do |x,y|
+    svg file: 'robot-golem.svg', x: x, y: y, width: 100, height: 100
+    svg data: File.read('robot-golem.svg'), width: 100, height: 100,
+        x: x + 200, y: y
+  end
+
+  sample 'PNG and SVG can be auto-scaled by one side and setting the other to :scale' do |x,y|
+    svg file: 'robot-golem.svg', x: x,       y: y, width: 50,     height: :scale
+    svg file: 'robot-golem.svg', x: x + 50,  y: y, width: :scale, height: 50
+
+    png file: 'angler-fish.png', x: x + 200, y: y, width: 50,     height: :scale
+    png file: 'angler-fish.png', x: x + 250, y: y, width: :scale, height: 50
+  end
+
+  sample 'PNGs can be cropped. To work from sprite sheets, you can set crop coordinates to PNG images. Rounded corners supported too.' do |x,y|
+    png file: 'sprites.png', x: x - 50, y: y - 50          # entire sprite sheet
+    rect x: x - 50, y: y - 50, width: 100, height: 100,    # draw the crop line
+         radius: 15, dash: '3 3', stroke_color: 'red', stroke_width: 3
+    text str: '➜', font: 'Sans Bold 12', x: x + 150, y: y - 35
+    png file: 'sprites.png', x: x + 200, y: y - 50,        # just the robot golem image
+        crop_x: 0, crop_y: 0, crop_corner_radius: 15,
+        crop_width: 100, crop_height: 100
+
+    png file: 'sprites.png', x: x - 50, y: y + 50     # entire sprite sheet again
+    rect x: x + 14, y: y + 50, width: 65, height: 65, # highlight the crop
+         radius: 25, dash: '3 3', stroke_color: 'red', stroke_width: 3
+    text str: '➜', font: 'Sans Bold 12', x: x + 150, y: y + 50
+    png file: 'sprites.png', x: x + 225, y: y + 50,   # just the drakkar ship image, rotated
+        crop_x: 64, crop_y: 0, crop_corner_x_radius: 25, crop_corner_y_radius: 25,
+        crop_width: 64, crop_height: 64, angle: Math::PI / 6
+  end
+
+  sample 'SVGs can be cropped too.' do |x,y|
+    svg file: 'robot-golem.svg', x: x, y: y, width: 100, height: 100,
+        crop_x: 40, crop_y: 0, crop_width: 50, crop_height: 50
+  end
+
+  sample 'Images can be flipped about their center.' do |x,y|
+    png file: 'angler-fish.png', x: x, y: y, flip_vertical: true, flip_horizontal: true
+    svg file: 'robot-golem.svg', x: x + 200, y: y, width: 100, height: 100,
+        flip_horizontal: true
+  end
+
+  sample 'SVG can be limited to rendering to a single object if the SVG ID is set. If you look in this SVG file, the black backdrop has ID #backdrop.' do |x,y|
+    svg file: 'robot-golem.svg', id: 'backdrop', x: x, y: y, width: 100, height: 100
+  end
+
+  sample "The SVG force_id option allows use of an ID only when specified, and render nothing if empty. Useful for multiple icons in one SVG file.\nThis should show nothing." do |x,y|
+    svg file: 'robot-golem.svg', x: x, y: y,
+        force_id: true, id: '' # <-- the important parts
+  end
+
+  sample 'NOTE! If you render a single object in an SVG, its placement is still relative to the SVG document.' do |x,y|
+    svg file: 'offset.svg', x: x, y: y
+    rect x: x, y: y, width: 100, height: 100, dash: '3 1', stroke_color: 'red', stroke_width: 3
+
+    svg file: 'offset.svg', id: 'thing',  x: x + 200, y: y, width: 100, height: 100
+    rect x: x + 200, y: y, width: 100, height: 100, dash: '3 1', stroke_color: 'red', stroke_width: 3
+  end
+
+  sample 'PNGs can be blended onto each other with 15 different blending operators. Alpha transparency supported too. See http://cairographics.org/operators' do |x,y|
+    png file: 'ball.png', x: x,      y: y
+    png file: 'grit.png', x: x + 20, y: y + 20, blend: :color_burn, alpha: 0.75
+  end
+
+  sample 'Rotation is around the upper-left corner of the image. Unit is radians.' do |x,y|
+    rect x: x, y: y, width: 100, height: 100, stroke_width: 3, dash: '3 3', stroke_color: :red
+    png  x: x,  y: y, width: 100, height: 100, angle: Math::PI / 4, file: 'angler-fish.png'
+
+    rect x: x + 250, y: y, width: 100, height: 100, stroke_width: 3, dash: '3 3', stroke_color: :red
+    svg  x: x + 250, y: y, width: 100, height: 100, file: 'robot-golem.svg',
+        angle: Math::PI / 2 - 0.2
+  end
+
+  sample 'SVGs and PNGs can be used as masks for colors instead of being directly rendered.' do |x,y|
+    svg mask: '#00ff00', file: 'glass-heart.svg', x: x - 50, y: y - 50, width: 200, height: 200
+    svg mask: '(0,0)(500,0) #eee@0.0 #111@1.0', file: 'glass-heart.svg', x: x + 150, y: y - 50, width: 200, height: 200
+  end
+
+  sample 'PNG masks are based on the alpha channel. Gradient coordinates are relative to the card.' do |x,y|
+    png file: 'with-alpha.png', x: x - 50, y: y
+    png file: 'with-alpha.png', mask: :magenta, x: x + 50, y: y
+
+    mask = "(#{x+150+75}, #{y+75}, 0)(#{x+150+75}, #{y+75}, 100) #f00@0.0 #000@1.0"
+    png file: 'with-alpha.png', mask: mask, x: x + 150, y: y, width: 150, height: :scale
+  end
+
+
+  save_png prefix: '_images_'
+end