html5 の canvas で、図形の描画がサポートされています。html でに canvas エリアに、直線、矩形、円弧、曲線などが書け、canvas は、iPhone, iPad, Android のスマートフォン・タブレットで搭載されているブラウザーはほとんど全て html5 をサポートしているので、日本では実質、ほぼ全てのスマートフォン、タブレットでも動きます。

基本的には2次元静止画でのサポートですが、canvas のエリアをクリアして書き続けると、動いているように見せることは可能です。また、データがアニメーション GIF などの BIT MAP データではなく、VECTOR データです。canvas の基本の位置関係は、左上が (0,0) ですが、translate(x,y) で scale(x,y) や rotate(angle) の変換する原点を任意の位置に移せる機能があります。この機能を使うと、簡単に、任意の位置で、移動、拡大、回転が、可能となります。この図形は、そのサンプルです。

このサンプルは、青い丸を中心に、正円を横に 2:1 のスケールで潰した円を3つ書き、2番目の円を時計回りに 60 度、3つ目を 300度回転させ、その円弧に沿う赤い小さな円を透過で書いて1度づつ ループさせたものです。