これはすごい！形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans

サイト構築 -デザイン

Post on:2019年9月2日

Leon Sansとは

Leon Sansは美しいサンセリフ体で、フォントの太さを動的に変更し、HTML5のCanvas要素でアニメーション、エフェクト、シェイプを自由に作成できます。
生まれたばかりの赤ちゃんレオン君を祝うためにフォントをリリースしたそうです。

サイトでは、Leon Sansのさまざまなアニメーションを楽しめます。
下記は、オープニングと雨のエフェクト。

Leon Sans

Leon SansはMITライセンスで、個人でも商用でも無料で利用できます。

Leon Sansのデモ

デモでは、Leon Sansのさまざまなアニメーション、エフェクト、シェイプを楽しむことができます。

Leon Sans examples

右上のパネルで文字を変更したり、さまざまな値を変更できます。「drawing」をクリックすると、文字を書くアニメーションです。

Canvas basic -Leon Sans

Canvas gradient -Leon Sans

グラデーションを使用したフォントは、美しいですね。

Canvas grid -Leon Sans

文字をグリッド表示すると、文字のデザインに携わってる感がでます。

Canvas pattern -Leon Sans

Canvas wave -Leon Sans

waveは振幅やfpsを変えると、いろいろ楽しめます。

Canvas colorful -Leon Sans

最近はこういったカラーフォントもよく見かけるようになりました。

Canvas color patern -Leon Sans

WebGL basic -Leon Sans

WebGLを使用すると、さらに多彩なエフェクトが利用できます。

WebGL metaball -Leon Sans

WebGL morphing -Leon Sans

文字から文字にモーフィングするアニメーション。

WebGL plants -Leon Sans

文字から植物がどんどん生えてきます。

WebGL mask+tilling Leon Sans

タイル状のパターンをアニメーションで動かしています。

Leon Sansの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="js/leon.js"></script>

1	<script src="js/leon.js"></script>

Step 3: JavaScript

LeonSansを生成し、HTML5のCanvas要素に描画します。

this.canvas = document.createElement('canvas');
document.body.appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");

this.leon = new LeonSans({
    text: 'The quick brown\nfox jumps over\nthe lazy dog',
    color: ['#000000'],
    size: 160,
    weight: 200
});

requestAnimationFrame(animate);


function animate(t) {
    requestAnimationFrame(animate);

    this.ctx.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);

    const x = (document.body.clientWidth - this.leon.rect.w) / 2;
    const y = (document.body.clientHeight - this.leon.rect.h) / 2;
    this.leon.position(x, y);

    this.leon.draw(this.ctx);
}