2014年2月、つまり3年前からあった「"せやから"って文字を滑らかに遷移させたい！」という欲求を、今日やっと叶えることができた。といっても、内容は「せやかて」に変えたけど。

2014年2月

一番初め、私はモーフィングでそれを達成しようとした。

けど、いくらマークをたくさんつけても上手くいかなかった。遷移の途中が、下のようにすごく気持ち悪い感じになる。

f:id:YaaMaa:20170205045658j:plain

それで飽きたので、しばらく放置していた。

2014年10月

久しぶりに存在を思い出したので、もう一度チャレンジすることにした。このときにはペンツールを使えるようになっていたので、ペンツールを使って作ったsvgをアニメーションさせようとした。

しかし、「せ」から「や」に移行するところで、一画目の右側の丸まるところがうまくいかない。ノードがどういう動きをしているのかわからなかったので、ノードを赤・ハンドルを緑で表示してみたら、以下のようになった。

f:id:YaaMaa:20170205050641p:plain

ハンドルが逆行（？）してるっぽい。この辺でまた飽きて、考えるのをやめた。

2017年2月

また存在を思い出して、今度こそちゃんと作ろうと思った。去年やっとHTMLを覚えたので、ちょっとマークアップのやり方がわかってきてて、前回よりはやりやすかった。

今回は、「や」の右側の丸めをなだらかにすることで、ハンドルが逆行しないように気をつけた。根本的な解決にはなってないけど。

<svg width="600px" height="600px" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  
  <g fill="none" stroke-width="16">
    <path d="M 25,97 C 82,82 138,79 176,80" stroke="#F44336">
      <animate
        attributeName="d" dur="5s" keyTimes="0.00; 0.25; 0.50; 0.75; 1.00" repeatCount="indefinite"
        values="M 25,97 C 82,82 138,79 176,80;
          M 31,104 C 191,12 183,109 139,116;
          M 29,84 C 144,49 125,98 100,165;
          M 168,41 C 69,88 62,147 148,158;
          M 25,97 C 82,82 138,79 176,80"/>
      <animate
        attributeName="stroke" dur="5s" keyTimes="0.00; 0.25; 0.50; 0.75; 1.00" repeatCount="indefinite"
        values="#F44336; #FFC107; #4CAF50; #3F51B5; #F44336"/>
    </path>
    <path d="M 134,33 C 135,64 133,102 128,122" stroke="#F44336">
      <animate
        attributeName="d" dur="5s" keyTimes="0.00; 0.25; 0.50; 0.75; 1.00" repeatCount="indefinite"
        values="M 134,33 C 135,64 133,102 128,122;
          M 101,29 C 108,33 117,41 122,48;
          M 139,64 C 152,75 167,102 172,127;
          M 35,71 C 61,57 141,45 168,41;
          M 134,33 C 135,64 133,102 128,122"/>
      <animate
        attributeName="stroke" dur="5s" keyTimes="0.00; 0.25; 0.50; 0.75; 1.00" repeatCount="indefinite"
        values="#F44336; #FFC107; #4CAF50; #3F51B5; #F44336"/>
    </path>
    <path d="M 70,48 C 61,159 71,171 154,161" stroke="#F44336">
      <animate
        attributeName="d" dur="5s" keyTimes="0.00; 0.25; 0.50; 0.75; 1.00" repeatCount="indefinite"
        values="M 70,48 C 61,159 71,171 154,161;
          M 57,42 C 72,81 94,139 103,172;
          M 86,33 C 76,78 59,129 41,159;
          M 168,41 C 141,45 61,57 35,71;
          M 154,161 C 71,171 61,159 70,48"/>
      <animate
        attributeName="stroke" dur="5s" keyTimes="0.00; 0.25; 0.50; 0.75; 1.00" repeatCount="indefinite"
        values="#F44336; #FFC107; #4CAF50; #3F51B5; #F44336"/>
    </path>
  </g>
</svg>