10 PRINT パターンジェネレーター

有名な C64 ワンライナー、今度は SVG で

1982 年、Commodore 64 上の 1 行の BASIC プログラムが世代を魅了しました:

10 PRINT CHR$(205.5 + RND(1)); : GOTO 10

CHR$(205)（スラッシュ）または CHR$(206)（バックスラッシュ）をランダムに繰り返し出力し、画面は奇妙で魅惑的な迷路パターンで埋まっていきます。このジェネレーターは同じアルゴリズムを、モダンなデザインに取り込める拡大縮小自在でスタイル可能な SVG として再現します。

仕組み

キャンバス上に 列 × 行 のグリッドを置きます。各セルでは、シードベースの乱数関数が / または \ の対角線を選び、1 つの <line> として描画します。結果はパターンごとに要素がごくわずかしかないシャープな SVG — 手動編集、アニメーション、極小サイズのすべてに有利です。

コントロール

• 列 / 行 — 各方向のセル数。
• セルサイズ — 各セルのピクセルサイズ。
• 太さ — 各対角線のストローク幅。
• 色 / 背景 — 2 色構成。
• シード + 再生成 — お気に入りのレイアウトを固定するか、新規に生成。

用途

• レトロ / デモシーン風ランディングページ
• デベロッパー文化の T シャツやステッカー
• アルバムジャケットやジン
• ジェネレーティブアートポスター
• data: URI を使った CSS background-image 装飾

出力は <line> 要素のみの SVG なので、CSS 変数で色を差し替えたり、stroke-dasharray でストロークをアニメーション化したり、<pattern> で無限の繰り返し背景にしたりできます。