イデの目覚め

主役ロボットのデザインが駄目だと昨日貶したイデオンだが、他のデザインはそう悪くない。あまり印象に残っていないが、敵メカなどは異文明感を出そうと努力した成果がでていたように思う。格好良くはないし、絵に描きたいとかプラモデルを作りたいとか思わせるものではなかったが。

そんなイデオンで印象に残っているのが、イデのゲージ。何かが発動する時に描かれる幾何学模様。あれだけはちょっと心惹かれる。

ということで作ってみたのがこれ。

線の形と位置をsvgで、線の色と動きをcssで定義している。

円を描くアニメーションの実装には暫く悩んだ。破線の間隔と開始位置を動かせばいけるんじゃないかと気付いた時は「今年の俺は冴えてる！」と、ちょっとハイになったが、実は定番の手法だったらしい。改めてネットを検索してみたら、同じやり方が多数紹介されていた。まあ、そんなもんだよな。

以下、ソース。

svg


<svg class="svg" width="300" height="300" viewBox="0 0 300 300">
  <circle class="circle1" cx="150" cy="150" r="140" />
  <line class="line1" x1="150" y1="150" x2="10"  y2="150" />
  <line class="line1" x1="150" y1="150" x2="290" y2="150" />
  <line class="line2" x1="271" y1="220" x2="29"  y2="220" />
  <line class="line2" x1="271" y1="80"  x2="29"  y2="80"  />
  <line class="line3" x1="150" y1="150" x2="271" y2="80"  />
  <line class="line3" x1="150" y1="150" x2="29"  y2="80"  />
  <line class="line3" x1="150" y1="150" x2="29"  y2="220" />
  <line class="line4" x1="30"  y1="80"  x2="30"  y2="220" />
</svg>

css


.svg {
  transform: rotate( -90deg );
  background-color: black;
  filter: blur( 1px );
}
.circle1 ,
.line1 ,
.line2 ,
.line3 ,
.line4 {
  stroke: #a0ffa0;
  stroke-width: 4px;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.circle1 {
  fill: transparent;
  stroke-dasharray: 880;  /* 880 = 140 * 2 * pi */
  stroke-dashoffset: 880;
  animation-name: circle1;
}
.line1 {
  stroke-dasharray: 150;
  animation-name: line1;
}
.line2 {
  stroke-dasharray: 242;
  animation-name: line2;
}
.line3 {
  stroke-dasharray: 140;
  animation-name: line3;
}
.line4 {
  stroke-dasharray: 140;
  animation-name: line4;
}
	
@keyframes circle1 {
   0%        { stroke-dashoffset: 880; }
  30% , 100% { stroke-dashoffset:   0; }
}
@keyframes line1 {
   0% ,  30% { stroke-dashoffset: 150; }
  40% , 100% { stroke-dashoffset:   0; }
}
@keyframes line2 {
   0% ,  30% { stroke-dashoffset: 242; }
  40% , 100% { stroke-dashoffset:   0; }
}
@keyframes line3 {
   0% ,  40% { stroke-dashoffset: 140; }
  50% , 100% { stroke-dashoffset:   0; }
}
@keyframes line4 {
   0% ,  50% { stroke-dashoffset: 140; }
  60% , 100% { stroke-dashoffset:   0; }
}

光っぽくなるように css の blur フィルターをかけている。

これ、個々の線に指定すると Safari だけ効かなかい。何故そうなるのかは不明。領域全体に指定するといけるが、それだと当然ながら領域の縁もぼやける。それは何か違う気がする。もう一つ枠を被せるとか clip-path で切り取ることも考えたが、これはこれでちょっと負けた気がする。しばらく悩んで、ちょっと負けてやった。

最初は svg のガウスフィルターを使おうと思ったのだが、これだとどのブラウザでも垂直と水平の線が消えてしまった。これも何故そうなるのかは不明だが、どれでもそうなるってことは、これが仕様なのだろう。そのうち調べてみよう。

ところでこのイデのゲージについて。

再現してみたのは自分の中で印象に残っているパターンだが、YouTubeなどで検索してみると、微妙に違うパターンがいくつかあった。最初に外周が描かれるのは共通だが、中の線が描かれるタイミングが違うのがちらほらと。左右の縦線の間隔も狭かったり広かったり。

これらの線に何か意味があるのだろうか。

今更だが気になってきたので調べてみたら、監督の富野喜幸の TOMINO の各文字を重ねてひっくり返したものだった。

これは知りたくなかったな…。