CSS と MDC でアートを描く

CSS アート

コードだけで絵を描けます。画像ファイルは一切使わず、CSS の background・border-radius・radial-gradient だけで構成しています。

Glow — 光るオーブ

暗いキャンバスに同心円と放射グラデーションを重ねた作品です。

グリッド線は background-image に2方向の linear-gradient を重ねて描いています。

background-image:
  linear-gradient(rgba(0, 220, 130, 0.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0, 220, 130, 0.06) 1px, transparent 1px);
background-size: 36px 36px;

中心の光は radial-gradient と filter: blur の組み合わせです。

background: radial-gradient(circle, #00DC82 0%, rgba(0, 220, 130, 0.6) 40%, transparent 70%);
filter: blur(4px);

Mondrian — モンドリアン風

ピエト・モンドリアンの抽象絵画にインスパイアされた作品です。CSS Grid で区画を分割し、白・黒・グリーンで塗り分けています。

grid-area でそれぞれのブロックの位置とサイズを指定します。

.green { grid-area: 1/1/3/2; background: #00DC82; }
.white { grid-area: 1/2/2/4; background: #f9fafb; }
.black { grid-area: 1/4/3/5; background: #18181b; }

ASCII アート

文字だけで絵を描く ASCII アートも、Markdown のコードブロックで表現できます。

    ██████╗ ██╗      ██████╗  ██╗    ██╗
   ██╔════╝ ██║     ██╔═══██╗ ██║    ██║
   ██║  ███╗██║     ██║   ██║ ██║ █╗ ██║
   ██║   ██║██║     ██║   ██║ ██║███╗██║
   ╚██████╔╝███████╗╚██████╔╝ ╚███╔███╔╝
    ╚═════╝ ╚══════╝ ╚═════╝   ╚══╝╚══╝

シンプルな図形を文字で描くこともできます。

        *
       ***
      *****
     *******
    *********
       |||

MDC がアートを可能にする

::css-art{type="glow"} のように書くだけで、Vue コンポーネントを Markdown の中に埋め込めます。 components/content/ に置いたコンポーネントは自動的に MDC で使えるようになります。

コードとデザインを1ファイルに閉じ込められるのが、CSS アートと MDC の組み合わせの強みです。