You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
SVG形式でウェブページのスクリーンショットを撮るChrome拡張機能「SVG Screenshot」をより便利に使うためのウェブアプリを Google App Engine で公開しました．SVG Screenshotのコンセプトについては以下の記事をご覧ください． この記事では ウェブアプリでできること Chrome拡張機能とウェブアプリの融合（撮影したファイルをウェブアプリにアップロードして保存する機能） について，順に紹介します． ウェブアプリでできること スクリーンショットファイルを表示する https://svgscreenshot.appspot.com/viewer にアクセスすると，これまで拡張機能に付属していたものと同様なビューワページが開きます．拡張機能で生成されたスクリーンショットSVGファイルを，中央の白い領域にドラッグ・アンド・ドロップすると内容を表示できます．
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
吹き出しコンポーネントを作った時から、SVGで面白い動きのコンポーネントが作ってみたいと思っていて、その習作としてSVGで描画したぽよんと表示されるmodalコンポーネントを作ってみた。 blog.bokuweb.me 作ったもの github.com デモ React-elastic-modal example 使い方 インストール npm i react-elastic-modal サンプル 以下のように使用する。極力react-modalに似せたつもり。 <Modal isOpen={ this.state.isOpen } onRequestClose={ () => this.setState({ isOpen: false }) } modal={{ width: '50%', height: '360px', backgroundColor: '#fff', opacity:
背景 自分が今日どんな作業をしたかをざっくりとらえるために「色つき星取表」というものを作っている。 問題 自分でいちいち「今日何をやった」を入力するのがめんどうである。 解法 自分の作業で必ず実行するコマンドに、以下のようなJSON形式で作業記録を付ける処理を混ぜ込む。 pwd は作業ディレクトリで、dateは今日の日付。 work.json1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 [ // （省略） { "pwd": "/Users/hyuki/girl", "date": "2014-11-14" }, { "pwd": "/Users/hyuki/private", "date": "2014-11-12" }, { "pwd": "/Users/hyuki/girl/note", "date": "2014-11-14" }, // （省略） ]
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
gantt-chart generate an svg gantt chart in node and the browser example View this example on htmlbin. export some task data in chart.json: { "wow": { "dependencies": [ "amaze" ], "duration": "1 week" }, "amaze": { "duration": "3 days" }, "cool": { "duration": "6 days" }, "whatever": { "duration": "1 day", "dependencies": [ "wow" ] }, "very": { "duration": "2 days", "dependencies": [ "amaze" ] }, "
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
