市松文様のSVG画像を作成する

市松模様のSVG画像をvictorというライブラリを利用して、作成します。victorは、Ruby経由でSVG画像を作成することに使っています。

ソースコード

一辺が128pxの正方形で、全体が1280pxの正方形のSVG画像を作成します。

require 'victor'

def generate_curtain(file_name, colors)
  svg = Victor::SVG.new(width: 1280, height: 1280)
  svg.build do
    (0..9).each do |i|
      (0..9).each do |j|
        rect x: i * 128, y: j * 128, width: 128, height: 128, rx: 8, fill: colors[(i + j) % colors.length]
      end
    end
  end
  svg.save file_name
end

generate_curtain('check_1', %w[#D0DFE6 #F71E35 #1794A5 #032030])
generate_curtain('check_2', %w[#EB6E44 #FFF5C3 #F8DCDC #D3E397])
generate_curtain('check_3', %w[#CFF09E #A8DBA8 #79BD9A #3B8686])

実行方法

% sudo gem install victor
% ruby colors.rb
% mogrify -format png *.svg # SVG画像を一括してPNG画像に変換する

結果

check_1.png

check_2.png

check_3.png