タグ

svgに関するnodoca_engineのブックマーク (3)

  • How to Hand Code SVG | Envato Tuts+

    In this tutorial we’re going to cover all the fundamentals of coding SVGs by hand, but I’m not going to bore you with a dry lecture that just trots out the relevant shapes and attributes. Instead you’ll learn how to hand code SVG through practice, creating six icons. In the process, you’ll use all of the basic elements required for SVG hand coding. One of the great things about scalable vector gra

    How to Hand Code SVG | Envato Tuts+
  • グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

    これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

    グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
  • SVGでプログラマブルな書体を作る話|dwango creators' blog(ドワンゴクリエイターズブログ)

    こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない

    SVGでプログラマブルな書体を作る話|dwango creators' blog(ドワンゴクリエイターズブログ)
  • 1