SVG+CSS AnimationでLive2Dを動かす - はるさめスープ
年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。 かわいい！！！ モデルデータを表示させる Source: CSSLive2D/src/01_parse at master · spring-raining/CSSLive2D · GitHub まず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。各キャラクターはそれぞれモデルデータ (Haru.moc3)、テクスチャ画像 (*.png)、表情データ (*.exp3.json)
リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - #daiizメモ
閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます． まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
GulpでSVGスプライトとアイコン一覧を一発生成 - Bit Journey's Tech Blog
出口 (@dex1t) です。 ベクター素材をSVGスプライト化し、インラインSVGとして利用する仕組みを作ったので紹介します。 アイコンフォントかSVGか アイコンフォントとSVGの違いは、ググるとたくさん出てくると思うのですが、 現在開発中のサービスはモダンブラウザのみ対象にしている SVGのまま利用すれば、フォント化する手間がなく管理もしやすい 多色にも対応できる という点から、今回はSVGを利用することにしました。 SVGを利用する方法もいくつかありますが、今回はSVGをスプライト化し、Inline SVGとしてHTMLに埋め込む形を取ることにしました。 デザイナーにSVGを追加更新してもらいたい いまはサービスをガンガン開発してる段階なので、素材の追加や変更も多く発生します。 ベクター素材は、デザイナーがイラレ上で作っているので、書き出しからSVGスプライト化まで一貫してお願いで
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
図解 Git
もし図の表示がおかしかったら、このページの SVGでないバージョンを試して下さい。 SVG の画像処理を中止しています。 (SVG の画像処理を再開) このページのオリジナルは、Mark Lodato さんが執筆した A Visual Git Referenceです。 このページでは、よく使われる git のコマンドを簡潔に図を用いて説明します。 git について少し知識があるなら、このページはその知識を整理するのに役立つかもしれません。このページがどのようにして作られたのか興味があるなら、私のGitHub リポジトリを見て下さい。(日本語訳の GitHub リポジトリ) 内容 基本的な使い方 凡例 コマンドの詳細 Diff Commit Checkout 分離HEADでの commit Reset Merge Cherry Pick Rebase 技術メモ 基本的な使い方 上記4つのコマ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tumblr
SVG Porn
svgに恋をした