質問編集履歴

1 タイトルを修正しました

daima4657

daima4657 score 6

2017/03/16 18:23  投稿

SVGによる、強弱のある書き文字アニメーションについて
SVGで、フォントの特徴を残したまま書き文字アニメーションをさせたい
###前提・実現したいこと
https://draft.co.jp/
こちらのサイトで実装されている
書き文字アニメーションについての質問です。
参考サイトのトップに出てくる(ALL HAPPY BY DESIGN)の文字のように、
フォントの持っている線の強弱やインクのハネのような意匠をのこしたまま
書き文字アニメーションさせる方法が分からず困っています。
実装の方法についてご存知の方がいらっしゃいましたら
ご回答頂けると助かります。
###試したこと
http://sterfield.co.jp/designer/svg%E3%81%A8css3%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E7%AD%86%E8%A8%98%E4%BD%93%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF/
こちらの記事にあるような、強弱の無いパスによる書き文字アニメーションは試してみました。
  • CSS3

    4995 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • SVG

    249 questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る