JavaScript を使って 24 時間時計を作ってみます。地図も作図します。
以下の環境で動作確認をしています。
環境： Windows パソコン、Microsoft Edge ブラウザ
背景 ～ 頭の中のイメージを具現化してみる
以前に、仕事で海外の複数か所を移動することがありました。
空港などで表示されている各国の時刻をデジタルの数字だけで見ていると、けっこう頭が混乱します。
各国の位置関係に加え、地球の自転方向に移動するのかどうかで移動時間も変わりますし、日付変更線をどちらにまたいだのか、深夜0時を過ぎたかでも日付が変わります。アメリカには夏時間もあります。
移動の際、当初は、まずは行ってみないことには何がどうなるのかよくわからない、といった感じで出かけていました。
しかし、何度か移動するうちに「こんな感じの時計があればよいのに」とか、「最初から時計がこんな感じで設計されていたら、各国の時刻が直感的に把握できるのに」と、時計のイメージが頭に思い浮かぶようになっていました。
先日、ベクトル形式でのお絵描きアプリを自作しました（下記の関連リンク参照）。
自由にお絵描きをして自由に動かすことができます。
ということで、けっこう長い間、頭の中ではイメージはしていたけれども、現実には見ることのなかった時計を具現化してみることにします。
世の中には似たものがあるかもしれませんが、とりあえず、何も気にせずに作成してみます。
先入観や思い込みを極力排除して、もし自分がゼロベースで時計を作ったとすると、たとえばこんな感じになるという、ひとつの例です。
設定方法
① 以下を参考に、パソコン内に世界時計を使うためのフォルダ（”world_clock1″）を作ります。
例： c:\user\world_clock1
② ①のフォルダ内に、３つのテキストファイルを作成し、以下のファイル名として下記のスクリプトを貼りつけて保存します。
ファイル名： “24hour_world_clock1.html”（HTML 本体）、”globe1.svg”（地球）、”grid1.svg”（文字盤）
※ 地球と文字盤のファイルは、下記リンク「ベクター形式でお絵描きをしてみる」を使って作成し、詳細を微調整したものです。
③ ”24hour_world_clock1.html” をダブルクリックします。
→ ブラウザで世界時計が表示されたら、設定＆動作確認まで完了です。
JavaScript がわかる方は自由に改変してみてください。ブラウザのお気に入りに登録することも可能です。
世界時計とその使い方
動くサンプル
まずは、実際の世界時計の動くサンプルを以下に貼っておきます。
各都市の時間の読み取り方
・ 地球の図の周囲に、時刻を示す文字盤を表示しています。
・ 日本の時刻は、東京近辺に引いてある青ライン（明石市を通る東経135度の経線）が、文字盤上のどこに位置しているかで読み取ります。
・ ロンドン、ニューヨーク、サンフランシスコ、その他の都市も同じです。
・ なお、アメリカは、夏の期間は Daylight Time となります。この期間は、文字盤の数値（Standard Time）に１時間足して時刻を読み取ります。つまり、夏以外の通常時は 6:00 くらいに明るくなるけれども、夏は 5:00 くらいには明るくなる。そこで、夏は標準時刻に 1:00 を足すことで早く仕事や学校にいき、かなり明るいうちに家に帰る、ということです。
・ イギリスが時刻の基準であり、イギリスの反対側（180度となる位置）に日付変更線があります。
・ 真下の 0:00 を過ぎて、反時計回りで日付変更線に至るまでの角度範囲にあるエリアが、同じ日付となります。
それ以外の、日付変更線から反時計回りで 0:00 までの角度範囲は、その１日前に対応します。
（なので、日付変更線をどのように何回またいだとしても、２日前に戻ることはありません！）
世界時計の動き
・ 上記の世界時計では、地球がゆっくりと反時計方向に回っています。回転方向と回転速度は、実際の地球の動きにあわせてあります。
・ 画面の上方に太陽があり、画面の下方が深夜です。真上となる地点が正午の12:00 に対応し、真下となる地点が深夜の 0:00 時に対応しています。
画面右側の 6:00 近辺がが日の出の領域に、画面左側の 18:00 近辺が日の入りの領域に対応しています。
・ 15度おきに青ラインを引いています。青ラインの間隔が１時間に対応しています。
上記の時計を数十分など長時間表示させておくと、１時間あたり15度のスピードでゆっくりと回転していることを確認できます。屋外での太陽の動きと対応しています。
・ 15度が1時間、45度が3時間、90度が6時間、180度が12時間に対応しています。
・ 各都市が左回りに進んで、真下の 0:00 を超えると、日付が更新していくことになります。
・ ひとつの事例として、日本が 6:00 の位置に近づくと、北海道側（東側）から明るくなっていくことを確認できます（東から太陽が昇る）。日本には時差はありませんが、東西に広がっているので、日の出の時刻、日の入りの時刻には各都道府県の間で時間差が生じます。
・ また、太陽がちょうど赤道面の位置にあると、球の形状から、ちょうど 6:00 に明るくなり、18:00 に暗くなることになります。
夏は赤道面に対し北半球側（モニター面の手前側）に太陽があるので陽の当たる領域が増えます。すると、6:00 より前に明るくなり、18:00 より後に暗くなることになります。
応用編 ～ 各都市の時刻を概算できるようにする！
・ 上記の世界時計を何度も見て、主要都市の位置関係を視覚的に覚えておきます。世界地図を北極から見ただけなので、すぐに頭に入ると思います。
・ 東京に対する、ロンドンとアメリカの位置が、Yの字を描くような位置関係になっています。
・ ロンドンは、東京から90度（6時間）以上、180度（12時間）以内の位置関係にあって、9時間の時差があることを視覚的に把握しておきます。日本から青ラインを数えていくと、９つ目のところにイギリスがあります。
・ 日本の時刻の基準となる明石市は、イギリスを基準に東経135度の位置にあります。すると、135度/（地球の自転スピード）= 135度/(15度/時間) = 9時間となります。このあたりの数値の関係も、暗算で概算できるようにしておきます。
・ たとえば現在、東京がお昼だったとき、時計の動きから９時間後にロンドンが同じ時間になることがわかります。それからさらに５時間前後経過すると、アメリカも同時刻になっていく、と世界時計をイメージするだけで視覚的に概算できると思います。
・ 上記の位置関係を画像で把握しておくと、海外に出かけたとき、各都市の時刻の関係が直感的に理解できると思います。
・ また、移動時間について、飛行機に12時間乗る場合は、地球が半周回ることになります。飛行機に６時間乗る場合は、地球が90度回ることになります。すると、到着時に現地が朝なのか夕方なのかなども、イメージできると思います。
・ 南半球は表示していませんが、展開図のようにつなげて覚えておく、というところかと思います。
・ 都市を追加したり改変したい方は、JavaScript に都市名を追加して時差の設定をするなど、修正してみてください。
その他、余談
・ コリオリの力などについても、世界時計を使って理解できるかと思います。
たとえば、上記の地図上で、北極から日本に向けてボールを転がしたとします。東経135度のラインに沿って、ボールを転がすとします。
ボールは慣性で直進しようとしますが、直進する間にも地球は自転していきます。
すると、北極から日本に向かったボールは、台湾側に到達することになります。地球の表面にいる人から見ると、右側にカーブする動きとなります。
すると、慣性力が支配的となっている運動については、北半球の地球上からみると右にカーブするように動くことになります。
たとえば、台風の目（低気圧）があって、周囲から台風の目に風が流れ込むとします。
周囲から流れ込む空気にも慣性が働くので、少し右にカーブして、台風の目に空気が流れ込むことになります。すると、台風の目の中心では反時計周りの渦が生じることになります。（入り込む風は右向きにカーブするが、中心の渦は、左向きにカーブする渦になる！）
すると、台風の進行方向に対して、右側が暴風雨になりやすいこともわかります。
これで、台風などの天気図ともリンクさせて理解できることになります。
なお、台風の目自体の進みは、慣性力が支配的というよりは偏西風などの影響を受けるようです。（中心は低気圧で、周囲より質量も低そうですし。）
まとめ
作図やプログラミングが自由に扱えるようになっていますので試しに24時間時計を作ってみました。
海外にいったり、天気図を見ることはいくらでも出てきます。
上記の内容は中学校や高校くらいで教えてもらっていてもよかったはずなのですけれども。。
（日付変更線をまたいで１日得する体験をすると、２回またぐと２日前に戻るのか？などと錯覚したりしますよね。きちんと理解している人は一体どれくらいいるのだろうか。。）
関連リンク
・ ベクター形式でお絵描きをしてみる 【JavaScript】
※ 上記の地図などは、こちらのツールを使って描画しています。
サンプルスクリプト
24時間世界時計 24hour_world_clock1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>world_clock v0.1</title>
<script>
window.onload = ini1;
function ini1() {
clock1();
setInterval(clock1, 1000);
}
function clock1() {
let now1 = new Date();
let str1 = "";
str1 = str1 + clock_str1( now1, 9 ) + " : UTC+9 TOKYO \n\n" ; // UTC+9 Tokyo
str1 = str1 + clock_str1( now1, 0 ) + " : UTC+0 LONDON \n\n" ; // UTC+0 London
str1 = str1 + clock_str1( now1, -4 ) + " : UTC-4 NEW YORK, Eastern Daylight Time, EDT \n\n" ;
str1 = str1 + clock_str1( now1, -5 ) + " : UTC-5 NEW YORK, Eastern Standard Time, EST \n\n" ;
str1 = str1 + clock_str1( now1, -7 ) + " : UTC-7 SAN FRANCISCO, Pacific Daylight Time, PDT \n\n" ;
str1 = str1 + clock_str1( now1, -8 ) + " : UTC-8 SAN FRANCISCO, Pacific Standard Time, PST \n\n" ;
document.getElementById('div01').innerText = str1;
draw1( now1 );
}
function clock_str1( now1, offset1 ) {
let utc1 = now1.getTime() + now1.getTimezoneOffset() * 60000;
let now2 = new Date( utc1 + 3600000 * offset1 );
let YY1 = now2.getFullYear();
let MM1 = String(now2.getMonth() + 1).padStart(2, '0');
let DD1 = String(now2.getDate()).padStart(2, '0');
let hh1 = String(now2.getHours()).padStart(2, '0');
let mm1 = String(now2.getMinutes()).padStart(2, '0');
let ss1 = String(now2.getSeconds()).padStart(2, '0');
let ymd1 = `${YY1}/${MM1}/${DD1}`;
let hms1 = `${hh1}:${mm1}:${ss1}`;
let str1 = `${ymd1} ${hms1}`;
return str1;
}
function draw1( now1 ) {
let hh1 = now1.getHours();
let mm1 = now1.getMinutes();
let ss1 = now1.getSeconds();
let t1 = hh1 + mm1/60 + ss1/3600 - 9 - 12;
let theta1 = - t1/24 * 360;
let image1 = document.getElementById('img1');
let bbox1 = image1.getBBox();
let x1 = bbox1.x + bbox1.width / 2;
let y1 = bbox1.y + bbox1.height / 2;
image1.setAttribute('transform', `rotate(${theta1} ${x1} ${y1})`);
}
</script>
</head>
<body style="background-color:#f7f7fa;font-family: helvetica, arial, sans-serif, 'Meiryo UI', Meiryo; ">
<h2>North Pole World Clock v0.1</h2>
<div style="display:flex; justify-content:flex-start; width:100%;">
<div>
<svg id="svg1" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="400" height="400" fill="url(#grad1)" />
<image id="img1" href="globe1.svg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
<image id="img2" href="grid1.svg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
<rect x="0" y="0" width="400" height="400" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset= "50%" style="stop-color:rgba(0,10,40,0.0); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgba(0,10,40,0.3); stop-opacity:1" />
</linearGradient>
</defs>
</svg>
</div>
<div> </div>
<div style="display:flex; align-items:center;" >
<div id="div01"></div>
<div id="div02"></div>
<div id="div03"></div>
</div>
</div>
</body>
</html>
地球の図 globe1.svg
<svg x="0" y="0" width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="400" cy="400" rx="350" ry="350" stroke="none" fill="#eeeeff" stroke-width="2" />
<polygon points="55 461 56 458 59 458 60 461 60 464 61 467 62 470 63 473 63 476 63 479 63 482 63 485 64 488 65 491 68 493 69 496 72 497 73 500 74 503 75 506 76 509 79 512 80 515 83 514 83 511 83 508 83 505 83 502 83 499 83 496 86 494 88 497 88 500 88 503 88 506 88 509 89 512 92 513 93 516 96 518 97 521 97 524 99 527 100 530 102 533 103 536 104 539 107 542 109 545 112 548 114 551 117 552 119 555 122 556 124 559 127 560 130 560 133 560 136 560 139 560 142 558 144 555 146 552 146 549 147 546 148 543 151 541 154 544 157 545 160 547 163 547 166 547 169 547 168 544 166 541 163 539 161 536 160 533 160 530 160 527 163 526 166 527 169 529 170 532 173 534 173 537 172 540 169 543 168 546 167 549 170 551 172 554 172 557 172 560 172 563 171 566 168 568 166 571 169 574 172 576 172 579 175 580 178 580 181 580 184 577 185 574 186 571 186 568 189 568 192 568 195 568 198 568 201 568 204 568 207 569 209 572 212 572 215 573 218 575 221 576 224 576 227 576 230 577 233 577 236 577 239 577 242 577 245 577 248 577 251 576 254 574 256 571 259 569 262 567 264 564 267 563 268 560 271 559 272 556 269 555 266 555 264 552 263 549 263 546 267 545 271 545 275 545 278 545 281 545 284 545 287 545 290 544 293 543 296 543 299 544 300 547 303 549 306 549 309 549 312 550 313 553 314 556 314 559 317 559 320 559 323 559 326 558 329 555 332 553 335 552 338 552 340 555 340 558 343 559 346 559 349 559 352 559 355 556 353 559 350 560 347 562 344 564 341 564 338 566 335 567 332 568 329 569 326 570 323 572 321 575 319 578 318 581 318 584 317 587 316 590 316 593 316 596 316 599 319 599 323 599 326 599 329 598 332 596 333 593 336 591 336 588 339 586 340 583 341 580 344 579 344 576 344 572 347 572 350 571 353 571 356 569 359 568 362 568 365 568 368 568 371 568 374 568 377 566 380 564 383 563 386 561 389 560 392 560 395 560 398 558 400 555 401 552 398 550 400 547 403 544 406 543 407 540 410 541 412 544 412 547 415 547 418 547 419 544 420 541 420 538 417 536 414 535 411 535 408 532 405 531 403 528 400 527 397 525 394 523 391 523 388 522 385 522 382 520 379 520 376 520 373 520 371 517 368 516 365 516 362 516 360 513 360 510 357 509 353 508 352 505 349 503 348 500 346 497 344 494 342 491 341 488 339 485 336 484 333 483 330 483 327 483 324 483 322 480 319 477 316 476 316 473 317 470 318 467 319 464 320 461 317 459 314 456 311 454 310 451 310 448 309 445 308 442 308 438 306 435 304 432 307 434 310 434 313 434 316 434 319 433 322 431 322 428 320 425 318 422 318 419 316 416 314 412 312 409 310 405 308 401 306 397 304 394 303 391 301 388 298 388 297 385 297 382 294 380 291 380 290 377 290 373 292 370 289 369 286 369 283 369 280 369 277 369 274 367 271 365 268 364 265 362 262 360 261 357 261 354 264 352 267 352 270 353 273 354 276 355 279 356 282 357 285 358 288 360 291 362 294 362 297 362 298 359 295 357 292 356 289 356 286 356 283 356 281 353 280 350 281 347 283 344 284 341 287 338 287 335 287 332 287 329 287 326 288 323 289 320 292 318 292 315 292 312 294 308 296 304 299 303 300 300 300 297 300 294 300 291 300 288 300 285 302 282 302 279 305 279 308 279 311 279 314 279 317 279 319 282 316 283 313 283 311 286 309 289 307 292 310 294 313 294 316 296 319 298 322 298 325 296 328 296 331 296 334 294 337 294 338 294 343 292 345 289 348 288 351 286 352 283 354 280 356 276 359 275 359 272 361 269 362 266 362 263 362 260 362 257 364 254 365 251 365 248 366 245 368 242 371 241 374 240 376 237 379 235 380 232 380 229 384 229 384 226 383 223 383 220 381 216 379 213 376 212 373 214 370 216 367 219 364 220 361 220 359 217 356 215 353 212 351 209 348 209 347 212 346 215 343 215 342 218 343 221 340 223 340 226 339 229 342 230 344 233 344 236 344 239 344 242 344 245 344 248 343 251 342 254 340 257 339 260 336 260 333 262 332 259 332 255 332 252 332 249 333 246 332 242 329 240 328 237 328 234 327 231 325 228 325 225 325 222 325 219 325 216 325 213 325 210 324 207 324 204 327 204 330 203 333 203 336 203 336 200 339 199 342 197 345 196 348 196 351 196 354 196 357 196 359 199 360 202 360 205 362 208 365 210 368 208 368 205 368 202 368 199 367 196 370 195 372 192 375 190 377 187 379 184 380 181 383 180 386 177 388 174 391 172 393 169 396 168 398 165 401 165 404 165 407 165 410 165 413 165 412 162 409 160 406 158 403 156 402 153 402 150 405 148 408 147 411 146 415 146 418 146 421 145 424 144 427 144 430 144 433 144 434 144 436 140 436 137 438 134 440 131 440 128 439 125 436 124 433 125 432 122 429 120 426 120 423 120 420 120 417 120 414 120 410 121 407 121 404 121 401 121 400 124 399 127 399 130 396 131 393 132 390 133 387 135 384 136 383 140 380 142 377 144 374 142 371 142 369 145 366 147 363 148 360 148 357 148 354 149 351 149 348 149 345 149 344 146 341 144 338 144 335 144 332 143 329 141 326 140 323 138 320 137 317 136 315 133 315 136 315 139 315 142 315 145 312 147 315 146 318 145 321 145 324 145 326 148 329 149 332 150 335 152 338 153 338 156 340 159 337 160 334 160 331 160 328 157 325 156 322 156 319 156 316 156 313 154 310 152 307 151 304 150 301 148 298 146 294 144 292 141 289 141 288 144 288 147 291 148 291 151 291 154 291 157 288 157 285 158 282 159 279 161 276 160 273 158 272 155 269 154 266 154 263 153 260 153 257 153 254 153 253 156 250 158 247 160 244 163 241 164 238 166 235 168 232 169 232 172 229 170 228 167 228 164 227 161 227 158 227 155 227 152 230 151 233 149 236 147 238 144 240 140 243 139 245 136 248 135 251 134 254 133 257 132 260 132 263 132 266 132 269 131 272 130 275 128 278 128 280 125 283 123 286 122 289 120 291 117 292 114 293 111 296 110 299 110 302 110 305 110 308 110 311 110 314 110 318 109 321 108 324 108 327 108 330 108 333 108 336 109 339 111 340 114 341 117 344 119 347 121 350 122 353 122 356 121 359 120 362 120 365 120 368 120 371 120 374 119 377 118 380 118 383 116 386 116 390 116 394 115 398 114 401 114 404 114 407 112 410 112 413 110 416 110 419 110 422 111 425 113 428 112 431 110 434 110 437 110 440 109 443 108 445 105 448 103 449 100 452 98 455 98 458 98 461 97 464 97 467 96 470 94 473 92 476 92 480 90 483 89 486 88 490 85 493 83 492 80 492 77 492 74 489 71 486 68 483 68 480 66 477 64 474 63 471 62 468 60 465 58 464 58 460 55 430 51 400 50 369 51 339 55 309 61 280 71 252 82 225 96 199 113 175 131 152 152 145 162 148 159 151 156 153 153 156 152 159 150 162 148 165 148 168 146 171 145 174 144 177 142 180 142 183 140 186 139 189 139 192 139 196 139 199 139 202 139 205 139 208 139 211 140 214 140 217 141 220 142 223 144 220 145 220 148 217 148 214 148 211 148 208 148 205 148 202 148 199 148 196 148 193 148 190 148 187 148 184 148 181 148 178 148 175 148 172 149 172 152 169 152 166 152 164 155 161 157 158 159 155 160 152 162 151 165 150 168 147 171 144 173 143 176 140 179 140 182 138 185 136 188 133 189 132 192 129 195 128 198 126 201 124 204 122 208 121 211 120 214 120 217 120 220 120 223 118 226 116 229 119 231 122 231 125 229 128 227 129 224 132 224 133 227 136 227 136 224 137 220 137 217 139 214 140 211 141 208 144 206 147 204 150 202 153 202 156 202 159 201 162 200 165 198 168 196 168 199 168 202 166 205 163 205 160 205 159 208 156 209 154 212 151 215 148 216 145 218 142 220 140 223 138 226 136 229 136 232 134 235 131 235 129 238 128 241 125 244 123 247 120 249 119 252 117 255 116 258 114 261 113 264 112 267 111 270 108 272 107 275 104 277 102 280 100 283 97 286 94 288 92 291 90 294 88 297 87 300 84 300 81 302 78 303 75 305 72 308 69 311 67 314 64 316 63 319 61 322 60 325 60 328 60 331 60 334 62 337 65 340 66 343 67 346 67 350 68 353 68 356 68 359 69 362 69 365 70 368 70 371 70 374 70 377 70 380 71 383 71 386 71 389 72 392 72 395 72 398 74 401 74 404 74 407 74 410 72 413 70 416 68 419 67 422 64 424 64 427 64 430 64 433 64 436 64 439 64 442 61 443 58 444 55 446" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="691 209 691 212 691 215 691 219 691 222 691 225 692 228 693 231 695 234 696 237 698 240 700 243 700 246 702 249 703 252 704 255 704 257 706 260 708 263 710 266 712 269 715 272 716 275 718 278 719 282 721 285 722 288 723 291 724 294 726 297 727 300 728 304 728 307 730 310 731 313 732 316 734 319 736 322 737 325 737 328 737 331 737 334 737 337 737 340 737 343 737 346 737 349 737 352 738 349 740 346 740 343 741 340 741 337 741 334 741 331 741 328 740 325 740 324 744 339 738 309 728 280 717 252 703 225 686 199
" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="740 359 740 362 740 365 740 368 740 371 740 374 740 377 738 381 738 384 738 387 738 390 738 393 738 396 737 399 736 402 736 405 735 408 734 411 733 414 733 417 733 420 732 423 732 426 732 429 731 432 731 435 730 438 730 441 730 444 730 447 729 450 728 454 726 457 724 460 724 463 721 466 720 469 718 472 718 475 717 478 716 481 713 484 712 487 709 487 706 489 703 491 700 494 697 496 694 498 691 500 688 501 685 503 682 505 679 507 676 510 675 513 672 516 672 519 675 517 678 515 681 513 684 512 687 511 690 509 693 509 696 507 699 505 700 508 698 511 695 513 692 515 690 518 687 519 684 519 681 520 678 520 675 522 672 523 669 525 666 527 663 528 660 529 657 531 655 534 652 535 650 538 646 540 643 540 640 542 636 543 632 544 629 544 624 544 620 544 617 544 614 543 612 540 609 538 607 535 604 533 601 533 598 533 595 530 595 527 592 527 589 527 586 527 583 528 580 529 577 531 574 531 571 531 568 531 565 532 560 532 556 532 552 532 548 532 545 532 541 532 537 532 533 531 530 529 526 529 523 531 520 531 516 531 512 532 509 533 506 535 503 535 500 537 499 540 496 540 496 543 493 546 492 549 489 552 486 555 484 558 484 561 484 564 483 567 480 568 480 571 477 574 475 577 473 580 471 583 468 584 467 587 464 589 461 591 458 594 459 591 460 588 461 585 463 582 464 579 465 575 467 572 465 568 462 567 458 566 455 566 452 566 449 566 446 564 444 561 444 558 444 555 445 552 448 550 448 547 449 544 446 542 443 543 440 543 437 543 434 543 432 540 432 537 435 536 438 536 441 535 443 532 443 529 441 526 439 523 436 523 435 520 435 517 436 514 438 511 440 508 441 505 444 504 447 504 451 503 454 503 457 502 460 500 463 499 466 498 469 496 472 496 475 495 479 495 480 492 483 491 484 488 487 484 489 480 490 477 493 474 493 471 496 469 499 467 502 465 504 462 506 459 509 457 511 454 513 451 516 449 519 447 522 446 524 443 524 440 524 437 524 434 527 433 528 429 528 426 528 423 528 420 525 419 522 418 521 415 518 413 515 413 512 413 512 410 515 407 518 406 520 403 523 400 525 397 528 395 530 392 528 389 526 386 524 383 525 380 528 378 531 378 534 378 537 379 537 382 540 384 543 385 545 382 548 379 551 377 554 377 555 380 555 383 553 386 553 389 555 392 556 395 559 397 561 400 564 403 567 405 570 407 573 407 576 407 579 407 582 407 585 405 588 403 590 400 592 397 593 394 593 391 595 388 597 384 598 381 599 378 600 375 600 372 603 371 606 368 609 367 611 364 613 360 615 357 612 356 609 356 606 356 603 356 600 357 597 355 594 352 591 351 588 351 585 354 584 357 581 359 578 360 575 361 572 361 569 360 566 360 563 360 561 357 561 354 561 351 561 348 561 345 561 342 562 339 562 336 565 334 568 331 570 328 571 324 570 321 567 318 564 318 560 316 558 313 560 310 561 307 564 306 566 303 568 300 568 297 568 294 570 291 572 288 573 285 573 282 573 279 574 276 577 275 580 274 584 271 586 268 588 265 588 262 588 259 590 256 592 252 594 249 596 252 597 255 598 259 598 262 598 265 599 268 600 271 599 274 596 275 595 278 595 281 595 284 596 287 596 290 600 294 601 297 603 300 604 303 607 305 608 308 611 310 612 307 611 304 610 301 610 298 610 295 610 292 612 289 612 285 613 282 612 279 609 279 612 277 613 280 616 283 618 286 621 287 621 290 624 293 625 296 628 296 628 299 629 302 632 303 634 306 637 306 640 306 643 306 646 309 648 312 651 314 653 317 656 319 659 320 662 322 664 325 664 328 667 326 669 323 672 323 673 326 675 329 676 332 679 334 682 337 685 339 688 340 691 342 694 343 697 343 700 343 703 341 706 339 708 342 708 346 706 349 704 352 701 353 700 356 700 359 700 362 700 365 700 368 700 371 700 375 700 378 700 382 700 385 700 388 700 391 700 394 700 397 700 400 700 403 700 406 700 409 700 412 700 415 699 419 699 422 699 425 699 428 700 431 703 432 705 435 708 435 711 435 714 435 717 435 720 435 723 435 724 432 725 428 726 425 726 422 726 419 726 416 726 413 727 410 727 407 728 404 728 400 728 397 727 394 725 391 725 388 725 385 724 382 727 382 730 382 733 379 734 375 735 371 736 367 736 363 736 360 736 357 739 356 739 358" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="264 586 261 588 259 591 256 592 256 589 254 586 256 583 258 580 261 578 264 576 264 573 266 570 268 567 270 564 273 564 276 564 276 567 276 570 273 572 272 575 271 578 268 580" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="250 595 250 598 252 601 254 604 254 607 251 608 248 607 245 607 244 604 241 603 238 601 235 601 236 598 239 597 242 598 245 596 248 595" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="235 605 235 608 234 611 232 614 229 614 226 615 223 616 221 619 220 622 218 619 215 618 212 617 211 614 208 612 205 611 202 609 199 609 196 609 197 606 198 603 197 600 194 600 191 598 188 595 185 594 184 591 187 592 190 593 193 594 196 596 199 598 200 601 203 603 206 602 209 601 210 604 213 606 216 607 219 608 222 608 225 607 227 604 230 603 233 602 234 603" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="191 604 188 603 185 601 188 599 191 599 192 601" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="180 588 180 591 181 594 181 597 179 600 176 601 174 598 174 595 174 592 174 589 177 589 178 588" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="259 609 258 606 261 606 263 608" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="128 571 125 571 122 570 121 567 121 564 124 563 127 563 130 564 130 567" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="116 572 119 575 120 578 121 581 118 582 115 582 112 582 109 582 108 579 108 576 108 573 110 570 113 569" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="115 583 115 586 116 589 118 592 119 595 120 598 120 601 117 599 116 596 114 593 113 590 112 587 112 585" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="415 175 412 176 409 177 406 178 403 178 400 178 397 179 394 181 393 184 391 187 394 188 396 191 398 194 401 195 401 198 404 200 405 203 406 206 403 208 406 208 407 211 407 214 408 217 408 220 410 217 412 214 415 211 417 208 417 205 416 202 415 199 415 196 412 196 410 193 410 190 412 187 414 184 413 181 411 178 414 178 416 175 416 172 416 173" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="428 197 425 199 422 199 419 199 419 196 421 193 421 190 423 187 426 185 429 183 432 183 435 183 435 186 432 188 432 191 433 194 433 197 430 197" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="327 133 324 133 321 134 321 131 321 128 324 128 327 128 330 128 330 131" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="357 137 354 139 351 140 348 139 348 136 349 133 350 130 353 130 355 132" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="454 267 451 265 449 262 446 262 443 262 440 262 437 261 434 260 433 257 433 255 434 252 437 251 441 250 444 249 447 249 450 249 452 252 453 255 453 257 453 260 454 263 454 266" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="429 366 426 365 423 363 420 362 418 359 418 356 421 355 419 352 416 349 413 349 411 346 412 343 415 342 418 341 420 338 422 335 423 332 423 329 423 326 423 323 426 320 428 317 429 314 429 311 431 308 432 305 434 302 437 302 440 302 440 299 441 296 441 293 444 293 446 290 447 287 449 284 452 283 455 283 458 283 461 283 464 283 467 283 470 281 473 281 476 281 479 281 482 281 485 281 488 282 491 283 494 283 497 280 500 278 503 276 506 275 509 272 512 270 515 269 518 268 521 268 521 271 521 275 520 278 523 278 526 278 525 281 524 285 523 288 521 291 520 294 519 297 518 300 516 303 515 306 513 309 510 311 508 314 505 316 502 317 499 315 496 316 495 319 495 322 498 321 496 324 493 326 490 328 491 331 491 334 488 336 485 337 482 339 479 342 476 343 474 346 472 349 472 352 472 355 474 358 475 361 476 364 475 367 472 368 469 370 468 373 465 374 462 373 459 372 456 374 453 374 450 372 447 372 444 372 441 372 440 369 438 366 435 364 432 365 429 367 428 367" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="546 362 546 359 545 356 545 353 546 350 547 347 548 344 549 341 549 338 549 335 546 334 546 331 546 328 543 327 540 326 537 327 534 330 533 333 532 330 529 328 526 329 523 328 520 327 518 330 518 333 518 337 518 340 518 343 518 346 518 349 515 349 512 349 509 351 508 354 506 357 505 360 504 363 502 366 501 369 500 372 499 375 498 378 497 381 498 384 498 387 501 388 504 388 503 391 502 394 504 397 507 398 510 398 513 398 514 395 516 392 518 389 519 386 521 383 521 380 519 377 517 374 516 371 517 368 518 365 519 362 521 359 522 356 525 355 528 355 531 355 534 355 537 356 539 359 541 360" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="508 449 511 447 514 444 517 443 518 440 519 437 518 434 520 431 521 428 521 425 518 425 515 424 512 424 509 425 506 425 503 424 500 424 497 423 494 424 495 427 498 429 501 430 501 433 498 436 496 439 493 441 490 442 487 442 484 445 482 448 482 451 483 454 486 457 489 460 492 461 495 460 497 457 497 454 498 451 501 451" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="480 382 477 383 474 384 471 383 468 381 465 380 462 380 459 379 456 379 453 379 450 378 447 377 444 376 441 378 441 381 442 384 443 387 444 390 444 393 446 396 447 399 450 402 453 402 455 399 456 396 457 399 457 402 457 399 457 402 460 404 463 402 466 400 469 399 472 398 475 397 478 394 481 394 484 394 484 391 482 389" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="483 404 480 404 481 401 483 398 485 395 486 392 488 389 488 386 488 383 491 385 492 388 492 391 492 394 492 397 493 399" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="497 400 501 401 504 403 505 406 502 408 499 408 497 405 497 402 498 402" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="498 411 501 411 504 411 506 414 506 417 503 418 500 419 497 419 496 416 497 414" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="488 415 485 415 482 415 480 412 483 411 486 410 487 410" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="482 419 483 422 484 425 485 428 485 431 484 434 483 437 481 440 478 441 475 442 475 439 475 436 477 434" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="302 336 302 333 305 331 308 331 311 333 312 336 314 339 316 342 318 345 319 348 320 351 321 354 321 357 321 360 321 363 321 366 320 363 319 360 318 357 316 354 315 351 315 348 314 349" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="715 355 714 347 713 342 712 337 712 334 712 331 712 328 711 325 711 322 711 319 711 316 711 313 712 310 715 312 716 315 717 318 718 321 718 324 717 327 717 330 717 333 717 336 717 339 717 342 717 345 717 348 717 351" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="713 297 710 296 707 295 706 292 705 289 704 285 703 282 702 279 702 276 700 273 703 273 705 276 707 279 709 282 710 285 711 286" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="340 460 343 462 346 463 347 466 348 469 349 472 349 475 346 476 343 476 340 475 338 472 336 469 335 466 335 463" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="340 406 337 409 334 412 331 413 329 410 329 407 331 404 334 403 337 401 340 401 340 402" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="377 340 375 337 374 334 373 331 373 326 373 323 373 320 376 318 379 320 380 323 381 326 382 328" stroke="#0000ff" stroke-width="1" fill="#eeffee" />
<polygon points="469 413 469 417 467 420 464 420 461 419 460 416 462 413 464 413" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<polygon points="270 166 270 169 273 170 275 173 275 176 274 179 273 182 272 185 271 188 271 191 270 194 267 195 264 196 261 196 258 196 257 193 254 195 254 198 256 201 256 204 253 206 250 208 247 210 244 213 243 210 243 207 243 204 240 205 237 206 234 207 231 207 228 207 225 207 222 207 222 204 222 201 224 198 227 196 229 193 232 191 235 190 238 189 241 188 244 187 247 185 250 182 253 179 254 176 256 173 258 170 261 169 264 168 267 166 269 163 272 162 273 165 272 166" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<polygon points="184 222 180 224 177 227 174 228 171 230 169 233 167 236 170 239 173 241 176 242 179 243 181 246 181 249 184 249 187 249 190 246 193 244 196 243 199 243 202 243 203 246 203 249 203 252 206 254 209 255 211 252 211 249 211 245 212 242 212 239 212 236 212 233 213 230 210 228 207 228 204 228 201 228 198 228 195 228 192 227 191 224 191 221 188 221 185 221 182 221 181 222" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<polygon points="639 405 637 402 635 399 634 396 632 393 631 390 630 387 630 384 631 381 632 378 635 376 636 379 636 382 636 385 636 388 636 391 637 394 637 395" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<polygon points="642 378 642 381 643 384 646 384 649 386 652 387 655 387 658 387 660 384 657 383 654 383 651 381 648 379" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<polygon points="643 371 645 368 647 365 648 362 645 360 643 357 642 354 642 351 639 351 639 354 638 357 638 360 638 363 638 366 638 369 638 371" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<polygon points="655 362 654 359 653 356 652 353 649 351 646 349 644 346 643 343 643 340 643 337 645 340 648 342 650 345 653 347 653 350 654 353 654 356 655 358" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<polygon points="187 454 188 457 190 460 191 463 194 466 197 468 200 471 203 472 206 473 209 473 211 470 208 468 205 466 202 464 199 464 196 462 194 459 192 457" stroke="#0000ff" stroke-width="1" fill="#eeeeff" />
<line x1="400" y1="050" x2="400" y2="750" stroke="#8888ff" stroke-width="1" />
<line x1="491" y1="062" x2="309" y2="738" stroke="#d8d8ff" stroke-width="1" />
<line x1="575" y1="097" x2="225" y2="703" stroke="#d8d8ff" stroke-width="1" />
<line x1="647" y1="153" x2="153" y2="647" stroke="#8888ff" stroke-width="1" />
<line x1="703" y1="225" x2="097" y2="575" stroke="#d8d8ff" stroke-width="1" />
<line x1="738" y1="309" x2="062" y2="491" stroke="#d8d8ff" stroke-width="1" />
<line x1="750" y1="400" x2="050" y2="400" stroke="#8888ff" stroke-width="1" />
<line x1="738" y1="491" x2="062" y2="309" stroke="#d8d8ff" stroke-width="1" />
<line x1="703" y1="575" x2="097" y2="225" stroke="#d8d8ff" stroke-width="1" />
<line x1="647" y1="647" x2="153" y2="153" stroke="#8888ff" stroke-width="1" />
<line x1="575" y1="703" x2="225" y2="097" stroke="#d8d8ff" stroke-width="1" />
<line x1="491" y1="738" x2="309" y2="062" stroke="#d8d8ff" stroke-width="1" />
<ellipse cx="400" cy="400" rx="350" ry="350" stroke="#0202b1" fill="none" stroke-width="2" />
<circle cx="215" cy="616" r="1" stroke="#31313a" fill="none" stroke-width="10" />
<circle cx="399" cy="189" r="1" stroke="#31313a" fill="none" stroke-width="10" />
<circle cx="659" cy="322" r="1" stroke="#31313a" fill="none" stroke-width="10" />
<circle cx="656" cy="527" r="1" stroke="#31313a" fill="none" stroke-width="10" />
</svg>
文字盤 grid1.svg
<svg x="0" y="0" width="800" height="800" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(0)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(15)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(30)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(45)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(60)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(75)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(90)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(105)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(120)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(135)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(150)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(165)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(180)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(195)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(210)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(225)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(240)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(255)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(270)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(285)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(300)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(315)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(330)"/>
<line x1="0" y1="-179" x2="0" y2="-181" stroke="black" stroke-width="1" transform="rotate(345)"/>
<text x= "0" y="-190" font-size="12" text-anchor="middle" dominant-baseline="middle">12</text>
<text x= "98" y="-165" font-size="12" text-anchor="middle" dominant-baseline="middle">10</text>
<text x= "-98" y="-165" font-size="12" text-anchor="middle" dominant-baseline="middle">14</text>
<text x= "165" y= "-98" font-size="12" text-anchor="middle" dominant-baseline="middle"> 8</text>
<text x="-165" y= "-98" font-size="12" text-anchor="middle" dominant-baseline="middle">16</text>
<text x= "190" y= "0" font-size="12" text-anchor="middle" dominant-baseline="middle"> 6</text>
<text x="-190" y= "0" font-size="12" text-anchor="middle" dominant-baseline="middle">18</text>
<text x= "165" y= "98" font-size="12" text-anchor="middle" dominant-baseline="middle"> 4</text>
<text x="-165" y= "98" font-size="12" text-anchor="middle" dominant-baseline="middle">20</text>
<text x= "98" y= "165" font-size="12" text-anchor="middle" dominant-baseline="middle">2</text>
<text x= "-98" y= "165" font-size="12" text-anchor="middle" dominant-baseline="middle">22</text>
<text x= "0" y= "190" font-size="12" text-anchor="middle" dominant-baseline="middle">0</text>
</svg>
