SVGアニメーション:サイクロイド
中央の円の周りを周回する円上の有る点の移動軌跡をサイクロイドといいます。 この移動の様子をアニメーションしてみました。
移動軌跡そのものは、JavaScriptで描いています。 円の移動はSVGアニメーション(animateMotion)です。 firefox,opera,safari,chrome で動作します。 IE はまだSVGアニメーション未対応です。SVG画像による時計 アナログ時計 by SVG | ストップウォッチ by SVG | 砂時計アニメーションSVG
SVG で時計の文字盤と針を表示、jqueryでbrowser checkして動作させています。
針を点線で描いたり、自由図形polygonで菱形にしても、transform="rotate(60,150,150)" とやれば、変形せずに回転できるのが魅力。 砂時計は、SVGのアニメーション機能を使用しました。JavaScriptで動作時間(10秒、20秒、1分など)を変更しています。
Can I use SVG. 参照
とりあえず、時計表示ページでは、ie < 9 のみ「未対応」を表示しています。 その他のブラウザで、表示出来ない場合はご容赦願います。 小さい表示にはしてない(縦300px,横300〜450px)ので、PCブラウザでご覧ください。オリンピックの五輪マークをSVGで描画
オリンピックの五輪マークをSVGで描いてみた。
[2018-12-28]ダイアモンドカット模様をSVGで描画
等間隔配置された円周上の頂点を互いに結びダイアモンドカットのような模様をSVGで描いてみた。
[2019-07-07] : svg ファイルをアップ
[2019-07-14] : phpで頂点数や色換え指定してsvgデータを出力
[2019-07-27] : diamondring用svg出力php関数テキスト表示複素数を係数にもつ 二次方程式、3次方程式の解を求める
複素数で方程式の解を求めるスクリプトを作ってみました。
[2012-08-12]ローマ数字で四則演算
ローマ数字で四則演算するスクリプトを作ってみました。
[2012-08-12]漢数字とアラビア数字変換
漢数字とアラビア数字(通常の10進数表現)とを相互変換するスクリプトを作ってみました。
[2021-07-10]ASCII アートで、リサージュ図形
2次元配列に文字を格納し、画面のドットに見立てて、リサージュ図形を書いて見ました。
過去の祝日対応3ヶ月カレンダーv3
各種サイトのカレンダーを参考に、各種機能盛り合わせで作ってみました。
※ 万年カレンダーを作成、月齢計算も簡易計算では、間に合わなくなったので、調査し直して、ユリウス通日からの計算式(C)opyright 1998 福原直人を借用しました。節気の方は1900〜<2100対応で諦めました[2006/05/26]
※ v3.0: 過去の祝日データをテキストファイルからXMLHttpRequestでロードして、祝日表示[2009/07/12]table 列表示非表示&行表示非表示 切り換え
元となるtableにcheckboxを追加して、checkboxにチェックのある列や行の非表示と、 全部表示とをボタンで切り換えます。
性格タイプ診断 from ユング心理学
「別刷宝島 性格の本」に載っていたユング心理学に基づいた性格診断表を、JavaScriptで自己判定しやすくした物。
※ 公開サイト再移動[2018-02-12]9つの性格(エニアグラム、Enneargrams)
自分探しの一つの物差しとして、エニアグラムを紹介します。