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

フォントでいろいろなデザイン、表現をしたい人にぴったりなLeon Sansを紹介します。フォントを書くアニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激されると思います。

Leon Sansは商用でも無料で利用できます。通常のフォントファイルとは異なり、Webページやスマホアプリに特化されたCanvasベースのフォントです。

Leon SansLeon Sans

Leon Sans
Leon Sans -GitHub

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: 外部ファイル

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

Step 3: JavaScript

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

sponsors

top of page

©2019 coliss