[B! svg] bokuwebのブックマーク

Smooth a Svg path with cubic bezier curves

While it is straightforward to draw straight lines in a Svg element, it requires a bit of trigonometry to smooth these lines. Let’s see how. We have an array of tuples representing the points coordinates of a line. const points = [[5, 10], [10, 40], [40, 30], [60, 5], [90, 45], [120, 10], [150, 45], [200, 10]]And a Svg element in an HTML page: <svg viewBox="0 0 200 200" version="1.1" xmlns="http:/

bokuweb 2017/07/31

svg
graph

リンク

Trying out React Motion

bokuweb 2017/07/17

svg

リンク

CodePen - Completely Responsive, Fluid Complex Animation

bokuweb 2017/07/15

svg

リンク

checkbox with svg

bokuweb 2017/07/11

svg

リンク

Bubbles (SVG)

bokuweb 2017/07/11

svg

リンク

SVG animations with GSAP

bokuweb 2017/07/11

svg

リンク

Svg Interactive Web

bokuweb 2017/07/11

svg

リンク

uiplease.com

This domain may be for sale!

bokuweb 2017/04/28

svg
SVG

リンク

これでもうアイコンには困らない！永遠に無料利用できる1,800種類のミニマルにデザインされたアイコン素材

FREE for you, forever. 1,800種類ものミニマルにデザインされた、永遠に無料利用できるアイコン素材を紹介します。 PSD, AI, Sketch, SVGも完備されており、ダウンロードしておいて損はないですね。 1,800種類は多すぎるので、ごく一部カテゴリは16、それぞれ100種類くらいある感じです。 Utilities Arrows Messages, MailsEmoji Map, Transport Tools Design Media Network, Web Users Time, Education Social Tech Shop Other Files, Folders アイコンの基本サイズは20x20pxで、鋭角と角丸の2種類でデザインされています。

bokuweb 2016/09/16

リンク

Alex Pate - Product Engineer

bokuweb 2016/09/03

svg

リンク

svg-tween

bokuweb 2016/07/06

svg

リンク

Convert SVG polygon to path

Open your SVG in a web browser. Run this code: var polys = document.querySelectorAll('polygon,polyline'); [].forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly){ var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,'path'); var pathdata = 'M '+poly.getAttribute('points'); if (poly.tagName=='polygon') pathdata+='z'; path.setAttribute('d',pathd

bokuweb 2016/07/06

svg

リンク

Simple Line Icons Webfont

Description & details All 160 simple line icons are now embedded in a webfont for more convenient use on the web or in a native application. Big thanks to Jamal Jama for creating this awesome webfont. If you enjoy this freebie, be sure to check Simple Line Icons Pro including 1660 pixel perfect icons available in various sizes and file formats. Format: TTF, EOT, WOFF SVG Source Files Size: 230 Kb

bokuweb 2016/06/24

リンク

マークアップ・エンジニアのためのSVG入門 | 第9回 SVGのアニメーション 3

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP︵Developer Techno logies︶を受賞。著書に﹃Webデザイナー/コーダーのための HTML5コーディング入門﹄︵共著‥エクスナレッジ、2011年3月12日︶や﹃CSS3デザイン　プロフェッショナルガイド﹄︵共著‥毎日コミュニケーションズ、2011年5月28日︶﹄などがある。

bokuweb 2016/06/23

svg

リンク

React Path Toggler

bokuweb 2016/06/23

リンク

「Snap.svg」で、ぐにゃっとアニメーションさせてみた。 | MONSTER DIVE

ふと気づくと、やってみたいなぁと思う演出は大抵﹁ぐにゃっ﹂としていまして、﹁私だってぐにゃっとさせたい﹂と言ったら、先日、kentaro先生がSVGを制御できるJSライブラリ・Snap.svgについての勉強会を開いてくれました。今回はそれを受けて、Snap.svgについて簡単にまとめてみたいと思います。 Snap.svgとは Snap.svg Snap.svgは、Adobeが提供しているオープンソースです。 Webブラウザ上でベクターデータが描画できるSVGの制御に特化したライブラリで、複雑なSVGタグの記述を簡略化して扱うことができる他、パスの制御フィルタ・マスク・クリッピング処理アニメーション機能等、様々な機能が提供されています。用意されているメソッドもjQueryと似ていて、取り入れやすそうなところも良いですね。今回使ってみたところ、少し重いかも？という印象はありました

bokuweb 2016/06/23

リンク

SVGファイルをズバッとReact Componentsに変換する - wadackel.me

Sketchなり Illustrator なりで作成した SVG のアイコン群を、React のコンポーネントとして扱いたくなりました。アイコンの数が少なければ、SVG のコードを手動でコピペしてコンポーネント化すれば良さそうですが、3個くらいからもう辛くなってきそうです。 SVG を外部ファイル化して読み込むことも考えましたが、CSS でのスタイル指定が面倒になることや、HTTP リクエスト数を抑えるという点を考慮すると、やはりコンポーネント化しておくのが無難な気がします。ただ、そこへ労力を割くのは微妙な気がするので、ある程度自動でズバッと出来ないかなと試してみたら、react-svg-converterを使うことで簡単に実現出来たので、その工程についてメモです。前提上記の様なアイコンセット(SVG ファイル)を React コンポーネント(JSX)化したい書き出されるコンポ

bokuweb 2016/06/09

tameshitai

svg
react

リンク

リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - #daiizメモ

閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome 拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます．スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できるスクリーンショットの範囲内のリンクをそのまま残すことができる．ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます．ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます．まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み

bokuweb 2016/04/07

svg

リンク

Morphing SVG Paths with React Art

I say "challenge" because it took all of a few moments to check out the ART repo and see the Morph Demo which links to art/morph/path. That's of course what this all about, morphing a path. Sebastian Markbåge has thought of everything. On Reactiflux the demo of morphing batman logos was proposed and linked to. You can read the orignal source with the linked SVG at http://tavmjong.free.fr/blog/?p=7