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:/
これでもうアイコンには困らない！永遠に無料利用できる1,800種類のミニマルにデザインされたアイコン素材
FREE for you, forever. 1,800種類ものミニマルにデザインされた、永遠に無料利用できるアイコン素材を紹介します。 PSD, AI, Sketch, SVGも完備されており、ダウンロードしておいて損はないですね。 1,800種類は多すぎるので、ごく一部 カテゴリは16、それぞれ100種類くらいある感じです。 Utilities Arrows Messages, Mails Emoji Map, Transport Tools Design Media Network, Web Users Time, Education Social Tech Shop Other Files, Folders アイコンの基本サイズは20x20pxで、鋭角と角丸の2種類でデザインされています。
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
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
マークアップ・エンジニアのためのSVG入門 | 第9回 SVGのアニメーション 3
2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP（Developer Technologies）を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』（共著：エクスナレッジ、2011年3月12日）や『CSS3デザイン プロフェッショナルガイド』（共著：毎日コミュニケーションズ、2011年5月28日）』などがある。
「Snap.svg」で、ぐにゃっとアニメーションさせてみた。 | MONSTER DIVE
ふと気づくと、やってみたいなぁと思う演出は大抵「ぐにゃっ」としていまして、「私だってぐにゃっとさせたい」と言ったら、先日、kentaro先生がSVGを制御できるJSライブラリ・Snap.svgについての勉強会を開いてくれました。 今回はそれを受けて、Snap.svgについて簡単にまとめてみたいと思います。 Snap.svgとは Snap.svg Snap.svgは、Adobeが提供しているオープンソースです。 Webブラウザ上でベクターデータが描画できるSVGの制御に特化したライブラリで、複雑なSVGタグの記述を簡略化して扱うことができる他、 パスの制御 フィルタ・マスク・クリッピング処理 アニメーション機能 等、様々な機能が提供されています。 用意されているメソッドもjQueryと似ていて、取り入れやすそうなところも良いですね。 今回使ってみたところ、少し重いかも？という印象はありました
SVGファイルをズバッとReact Componentsに変換する - wadackel.me
Sketch なり Illustrator なりで作成した SVG のアイコン群を、React のコンポーネントとして扱いたくなりました。アイコンの数が少なければ、SVG のコードを手動でコピペしてコンポーネント化すれば良さそうですが、3 個くらいからもう辛くなってきそうです。 SVG を外部ファイル化して読み込むことも考えましたが、CSS でのスタイル指定が面倒になることや、HTTP リクエスト数を抑えるという点を考慮すると、やはりコンポーネント化しておくのが無難な気がします。 ただ、そこへ労力を割くのは微妙な気がするので、ある程度自動でズバッと出来ないかなと試してみたら、react-svg-converterを使うことで簡単に実現出来たので、その工程についてメモです。 前提 上記の様なアイコンセット(SVG ファイル)を React コンポーネント(JSX)化したい書き出されるコンポー
リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - #daiizメモ
閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます． まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Trying out React Motion
CodePen - Completely Responsive, Fluid Complex Animation
checkbox with svg
Bubbles (SVG)
SVG animations with GSAP
Svg Interactive Web
uiplease.com
Alex Pate - Product Engineer
svg-tween
React Path Toggler