これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。2,452種類のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォーマッ
商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
コピペでOK！セクション間のおしゃれな仕切りをカスタマイズして実装できる便利なWebサイト3つ
2021年9月14日 CSS, SVG, Webサイト制作 上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょう！ ↑私が10年以上利用している会計ソフト！ SVG Shape Dividers Generator Tool SVG Shape Dividers Generator Tool 画面右側にカーソルをあわせるとパネルが表示され、模様が選択できます。左側のパネルから表示位置や色、模様の大きさなどが調整可能。「Animate」をオンにすると、キーフレームアニメーションで動くコードが生成されますよ。「COPY CODE」をクリックでCSSコードをコピーできます。 個性的な模
全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs
企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ
CSSスニペット：テキストリンクの下線をマウスホバーで波のようにアニメーションさせる | かちびと.net
Result リンクにマウスホバーすると波のようにアニメーションする、というもの 背景に波打つSVGが使われています。ちょっと面白いなと思ったので備忘録 css :root { --mainColor: #ff9800; } a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover {/*背景に波打つアニメーションをSVGで描く*/ background-image: url("data:image/svg+xml;c
jQuery-svg-popup | Javascript Jade SASS jQuery Modx AJAX html
Надоели типичные модальные окна?! Есть решение - jQuery-svg-popup. Быстрый - формирование частиц основано на базе SVG. Легкий - вес плагина всего 5kb. Прост в использовании - имеет документацию на русском языке. Ето решение разнообразит дизайн вашего сайта, а также придаст уникальности и стиля! Скачать / установить npm: npm i jquery-svg-popup github: https://github.com/rodan888/jQuery-svg-popup Пр
SVGで画面全体に斜め線や曲線を引く
SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGをHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="
Free SVG Vector Editor | Vecteezy
notifications-menu#getMarketingNotifications:once click->ez-drop-down#handleSubMenuClick click->notifications-menu#menuClick" data-notifications-menu-target="menuButton">
Pizza Amore! | Playground from ZURB
Deliver up pie charts, bar charts and line graphs for your responsive site. Download Create charts and line graphs for any device with Pizza Amore. Our menu now includes bar charts and line graphs. Not to worry, you can still have a piece of pie ... charts that is. Your Amore will be steaming hot with SVG so it'll look good on retina devices and HiDPI devices. Example Pizza Amore is an easy to use
Distorted Button Effects with SVG Filters | Codrops
A set of inspirational, highly experimental distortion effects for buttons using SVG filters. Following our latest web experiment by Lucas Bebber where we created realistic heat and water distortion on images and text, we’d like to share some inspiration for these kind of effects on buttons. Applying SVG filters on HTML elements give us some great opportunity to get creative with click interaction
もはや芸術！SVGアニメーションの巧みな活用方法20選
更新日: 2017年3月1日公開日: 2015年10月9日もはや芸術！SVGアニメーションの巧みな活用方法20選 なんだか最近ハイセンスなwebサイトで見かけることが増えてきた「SVGアニメーション」。動画やGIF、CSSでは表現できないような“動き”を軽やかに演出しています。そこで今回はSVGアニメーションを使っているサイトや参考になるソースをピックアップしてご紹介していきたいと思います。 イベント要素をプラスした「BoonconPIXELS」 BoonconPIXELS グラフィック・デザイナー集団の booncon PIXELS。ページトップのアニメーションがキュートですが、さすがと思わされるところに、SVG アニメーションの中にイベント要素を盛り込んでいます。左上の文字と左方の PC 画面らしき画像をクリック or タップすると文字やカラーが変わります。なかなか遊び心があって、参考
滑らかで美しい表現ができる！SVGアニメーションを使ってみよう
更新日: 2020年9月27日公開日: 2015年10月8日滑らかで美しい表現ができる！SVGアニメーションを使ってみよう Airbnb の模写（写経）で登場してくる SVG 形式の画像。Webデザイナー志望の方や単価をあげたいWebデザイナーの方にとっては、「SVG」必須ですよね。 今回は SVG 画像だからできる SVG アニメーション・・・・・・・についてご紹介させて頂きます。 参考: CSS-TRICKS SVG アニメーションは、SVG画像をベースに CSS や JavaScript で動きや装飾を加える表現手法の一つになります。 メリットとしては、軽量でスケーラブルな SVG 画像に好みのアニメーションを加えられるという点。普段 Web を見ている限りではどれがSVGアニメーションで、どれがSVGアニメでないのか区別はつきにくいですが、SEOや美しさ、滑らかさを求めるとSVGア
Creative SVG Letter Animations | Codrops
An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way. Maybe you’ve seen some of those interesting text animations recently, like the one shown on the website of Control Films or in hover effects for image captions: letters disappear and appear in an artistic way, getting drawn along their lines. Whi
Animated Map Path for Interactive Storytelling | Codrops
An interactive journey where a Canvas map path is animated according to the content that is scrolled on the page. Today we’d like to share an experimental demo with you. This demo is an interactive map that will animate a map path while scrolling the page. The main idea is to connect the story being told with the path itself. The journey can also contain images that will indicate where they have b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できる -Akar Icons
くっきりしていて見やすいシンプルなオープンソースの線画SVGアイコンパック・「Phosphor」
テンプレートをカスタマイズして手軽にSVGの背景を作成できる・「SVG Backgrounds」 - かちびと.net
Illustrations | unDraw
http://www.designwalker.com/2017/12/svg-animation.html
zPath.js Demo