制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
asamuzaK.jp : IEのインラインSVGの固有サイズ表示をSVG1.1仕様に修正する方法
この記事はSVG Advent Calendar 2014 - Adventarの11日目の参加記事です。 実は、この記事のきっかけとなったのも、SVG Advent Calendarに投稿されていた@_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」という記事でした。 記事を読んだとき、直感的に「IEの問題というよりもSVGやCSSの記述方法に問題がありそう」という印象を持ち、簡単にテストしてみてツイッターでつぶやいたら、ご本人からリプライがあっていろいろやりとりをしていました。 この記事は、その一連のやりとりをまとめなおしたものです。 ただ、自分の思い込みなどから見当違いなツイートがアレやコレやとあったりもしたので、この記事は、その一連のやりとりにおける自分の発言に対する訂正の意味合いも兼ねていますw インラインSVGでIEがFirefoxやChromeと表示が異なる
SVG アニメーションツール Shape Shifter の使い方｜Goodpatch Blog グッドパッチブログ
Goodpatch Advent Calendar 2017では、Goodpatchのメンバーが興味を持っている分野や、利用している技術などについて書いていきます。 ダウンロードのプログレスバーやボタンを押した時のフィードバックなど、アニメーションはアプリに欠かせない要素の一つです。今回は Shape Shifter というツールをご紹介したいと思います。 Shape Shifterとは？ alexjlockwood/ShapeShifter にもあるとおり、 SVG 形式のアイコンのアニメーションを作成するためのツールです。 Shape Shifter の画面構成 まずは Shape Shifter の画面構成を見てみましょう。この記事では下図の名称で呼ぼうと思います。 プレビュー画面 アニメーションのプレビューを確認できます。 左からスローモーション、巻き戻し、再生、早送り、繰り返しの
精度を保ってSVGを1バイトでも小さくする - Qiita
あらまし SVGを利用するメリットのひとつは、CSSにインラインで埋め込めるほどのサイズの小ささです。 ただ、SVGは作り方を誤るといくらでもファイルサイズが大きくなるデータフォーマットでもあります。 CSSのインラインに埋め込むということは、同時にそのWebページで表示されることのないSVGもロードされてしまいがち。エンジニアとしては、ちゃんと最低限のサイズで埋め込みをすることで通信コストを抑え、CO2排出量削減に貢献したいですね！ ちなみに、ここではSVGはHTMLに埋め込めればいいや、ではなく、SVG-valid (XML-valid) なサイズ削減を目指しています。 チェック項目 軽量化する前に SVGはどう利用されるのか（どのくらいのサイズで描画されるのか、白黒でいいのか、色を塗り分けたいのか、JavaScriptで動的に制御したいのか、など）によって、パスをどう定義するべきかが
Pardon Our Interruption
As you were browsing something about your browser made us think you were a bot. There are a few reasons this might happen: You're a power user moving through this website with super-human speed. You've disabled cookies in your web browser. A third-party browser plugin, such as Ghostery or NoScript, is preventing JavaScript from running. Additional information is available in this support article.
WebKit ではSVGグラデーションを `fill-opacity` を持った要素に適用すると色味がくすむ - Qiita
WebKit（Mac版のSafari含む）では fill-opacity を設定した要素にSVGグラデーションを適用すると色味がくすんでしまいます。 SVGグラデーションを透明化する場合には、 stop-opacity を用いるか、塗りと線のパスを分けた上で塗りのパスに opacity を設定する必要がありそうです。 なお、iOS版Safariでは問題ないもよう（なぜだ）。 現象確認用のデモ 以下の様なSVGで現象が発生します。 <svg viewBox="0 0 300 200"> <defs> <linearGradient id="g0"> <stop offset="0%" stop-color="red"></stop> <stop offset="50%" stop-color="green"></stop> <stop offset="100%" stop-color="bl
たった15KBで、スケーラブルかつ写実的なバラク・オバマ - Qiita
僕は開発者ではなく、普段はほぼ完全に手描きで制作しているイラストレーターです。 SVG というファイル形式と自分の得意とするモノクロペン画はかなり親和性が高いんじゃないかと以前から感じていまして、その移植についての実験を SVG Advent Calendar 2016 の25日目の記事として投稿してみます。 動機、経緯 アナログなペン画イラストレーションをピュアなSVGファイルとして描き換えたいと思った。 以前、自働トレース変換プログラムでペン画ビットマップ画像をSVGに変換してみたことはあったけども、１本の線の輪郭を無理やり「パス」として処理してしまうので、出来上がったファイルは元画像と比較してファイルサイズがコンパクトにはならなかった。 ほとんど同じ見た目とファイルサイズで、でもスケーラブルになった、という感じ。 今回は人力で、純粋に「ストローク」のみで線を表現する最適化されたSVG
IE11でsvgを含むページを印刷するとクラッシュする件の対応 - Qiita
IE11でsvgを含むページを印刷しようとするとクラッシュすることがあります。 ※IEでsvgがクラッシュする条件は多々あります。 改ページ付近でsvgでスプライトしていたりすると、あるページでは大丈夫なのにあるページではクラッシュする （mshtml.dll でエラーコード 0xc0000005 （アクセスバイオレーション）で落ちている） ぐぐると としてあげると直るかもしれません。 発生条件と推察 自分が確認した限りは下記の現象が起こりました。 同じSVGを使用していてもクラッシュしないページがある A4印刷でクラッシュしていても、A3印刷だったらクラッシュしないことがある SVGのコンテンツをブロック上部に持っていけばクラッシュしないことがある SVGより上部にいるDOMを削除するとクラッシュしないことがある SVG要素自体を非表示にするとクラッシュしない コンテンツが長いページは発
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する | UNORTHODOX WORKBOOK | Blog
SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても、CSSで背景画像として表示させるものではなく、HTMLにインラインで表示させるためのSVGスプライトになります。 何もしなくてもuseタグのxlink属性で外部SVGファイルを参照できることは知っていたのですが、IE9+でサポートされてなく、またEdgeでも怪しいとのことだったので、その方法は利用してきませんでした。ポリフィルを使ったフォールバックもあるようですが、そのためだけのフォールバックも何だか気持ちが悪かったので。。 今までやっていた方法 これまではbodyの開始タグすぐ下にsvgタグを置き、その中へ画像ごとにsymbolタグで囲み直したsvgをずらーっと並べus
実戦で使える本格的なSVGアニメーションを作る - The future starts today
SVGのアニメーションって綺麗だし、カッコいいですよね。 海外のサイトだったり、dribbbleではよく見るのですが、日本のサイトでは凝ったアニメーションはあまり見かけません。 解説記事も偏っていて、モーフィングだったり、ラインアートの記事はたくさんあるのですが、オブジェクトが重なっていくつもシャシャシャッと動くようなアニメーションを解説している記事となると極端に少なくなります。 というわけで、そんなアニメーションを勉強がてら作ってみました！ まずは全体のイメージを作る 今回は試しに、スマホ上にカード形式のタイトル・ディスクリプションが並ぶようなものを作ってみようと思います。 以下のような感じです。 Illustratorを使って作成しました。 Illustratorでなくても、パスが書けるようなツールで、なおかつsvg形式で書き出せるものであれば何でも良いと思います。（sketchとかで
SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
LDW | LOVE DESIGN WORKS | 店舗デザイン・飲食店・美容室設計
新しくお店をあたらしくおみせを作ろうとつくろうと考えた時、かんがえたとき、 はたしてうまくいくのか？ 金額はきんがくはいくらくらい掛かるのか？かかるのか？ 誰に、どの会社にだれに、どのかいしゃに任せて良いのか？まかせてよいのか？ 心配な事なども多くしんぱいなことなどもおおくすごく迷うと思います。すごくまようとおもいます。 新しくお店をあたらしくおみせを作ろうとつくろうと考えた時、かんがえたとき、 はたしてうまくいくのか？ 金額はきんがくはいくらくらい掛かるのか？かかるのか？ 誰に、どの会社にだれに、どのかいしゃに任せて良いのか？まかせてよいのか？ 心配な事なども多くしんぱいなことなどもおおくすごく迷うと思います。すごくまようとおもいます。 なぜやわからない事になぜやわからないことに寄り添ってよりそって答えていきます。こたえていきます。 Love Design Works 思い出の中の時間、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hacked by 1877 Team | Kurdish Hackers
Tumblr
GraphicsJS | AnyChart
Grands Groupes & Startups vus du web
Tumblr
東京メトロ
Party Pooper
