WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
こんにちは！コーダーの平原です！ SVGを使ったアニメーションについて理解を深めたいなと思い、色々サンプルを作ってみました。SVGは、書き出しやCSSプロパティなどが、他の画像の扱いとまるで異なる為、隙間時間で慣れておきたいところです。 それではサンプルをご覧ください！ サンプルその1 「JAPAN」サンプルその2 「TAIWAN」サンプルその3 「SUN」まとめ1. サンプルその1 「JAPAN」Webサイトのローディング時などでよく見る、ロゴやテキストのアニメーションです。 文字のアウトラインをなぞりながら描画されていく動きは人気がありますね。 2. サンプルその2 「TAIWAN」こちらも先程と同様の、ロゴやテキストのアニメーションの2パターン目です。 綺麗な画質でアニメーションしてくれることの喜びを噛みしめたくなりますね。 3. サンプルその3 「SUN」SVGで円を描画する時に使
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、はじめてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。 マイクロインタラクションとは 「マイクロインタラクション」とは、ある目的を果たすために1つの作業を行うインタラクションのことで、Dan Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。 マイクロインタラクションの構造 マイクロインタラクションは、次の4つの構造に分解できま
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
As a child I was always fascinated with the map prints. It was an absorbing activity to study those beautiful graphic forms and yet stunning to realise this is the form of presentation of actual data. Years passed, I didn’t become a cartographist, but the childhood days fascination remained intact. Knowing that, imagine how happy I was, when asked to join the team that was to implement map functio
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Everybody loves the vintage game Pong, right? We sure do. What’s more fun? Building it yourself! That’s why we decided to create one with SVG.js – to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you’ll see, it’s simpler than it sounds.
ヘッダに配置されたハンバーガーメニュー。 まぁ、ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。 実装しても気付かれにくいですが、見つけたら嬉しくなりますよね。
文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。 ※キャッチ画像なので、SVGアニメーションをGIFアニメにしたものです。 ラインで描くSVGのアニメーションをいくつか作成してみました。 まずは、SVGファイルを用意します。 シンプルな図形を描いたSVGのキャプチャ ※キャプチャなので、PNG画像です。 3つの図形を順番にラインのアニメーションで描いてみます。 イラストやモックアップをラインで描くアニメーションをよく見かけますね。
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Let’s say you have a photographic image that really should be a JPG or WebP, for the best file size and quality. But what if I need transparency too? Don’t I need PNG for that? Won’t that make for either huge file sizes (PNG-24) or weird quality (PNG-8)? Let’s look at another way that ends u
Let’s say you have a map of the world and you want to be able to highlight the country (or state, or county, etc.) as the cursor hovers over it or it is tapped. Doable! First, the map should probably be vector. SVG is almost certainly the right image format choice here. It will give us a crisp looking map at likely a reasonable size, and most importantly, give us the interactivity and easy styling
Interactive maps can be intimidating, but they don’t have to be a black box. You can create your own custom SVG maps with open data and software. In no time at all, you will have enhanced your website with a beautiful, fully customizable, interactive map. In this article Chris Youderian will explain how to create your own SVG maps using Natural Earth data and open source tools. You will then be ab
Stories about our creative apps and services for everyone
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. We’ve taken an in-depth look at how SVG line drawing works before. It’s a clever trick where you use dashed lines for the stroke, but the gap in the dash is so long it covers the entire path. Then you can move it such that it covers the entire path again, which makes it
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. We recently launched Happy Apps. In co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
