Chart.js をサーバーサイドで使う方法 - Qiita
Chart.js は、JavaScriptで利用できるメジャーなチャート(グラフ)描画ライブラリーの1つですが、HTML DOM、より正確に言えば HTML5 Canvas API に依存しているため、Node.jsの環境では動作できません。 しかし、Canvas以外への依存は殆ど無いので、Canvas APIさえ用意できれば、サーバーサイド・レンダリング (SSR) が可能となります。 今回は私自作のCanvas API互換ライブラリー red-agate-svg-canvas を使用して、Node.js上でSVGにレンダリングしたいと思います。 今回の全ソースは こちら にあります。 追記 (2018/9/18) 今回説明する以外にchartjs-node等のパッケージを用いてもサーバーサイドでChart.jsを使うことができます。 chartjs-nodeのメリットは、jpegやpn
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
色を簡単にカスタマイズして使用できる無料アイコンライブラリ「vivid.js」
vivid.jsはSVG形式のアイコンを簡単にカスタマイズして使用できるようにするJavaScriptのライブラリです。 SVG Icons Library - Vivid.js https://webkul.github.io/vivid/ 使用は非常に簡単で、アイコンを使いたいページのヘッダー部分に <script src="https://unpkg.com/[email protected]/dist/vivid-icons.min.js" type="text/javascript"></script> と記入するだけで準備完了。 インストールにはヘッダーにコードを貼り付ける方法のほか、パッケージマネージャーも使用できます。 npmを使用している場合は npm install vivid-icons Bowerを使用している場合は bower install vivid-icon
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
SVGでアウトラインをカスタマイズしてみよう
2014年7月30日 SVG これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…！？今回はSVGのアウトライン（線）の装飾に注目！オブジェクトを徐々に描いていくラインエフェクトにも挑戦します！SVGの基本的な情報や書き方は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ SVG線種プロパティの基礎 基本的な書き方ですが、SVGのコード内に直接記述する方法と、CSSで指定する方法があります。例えば stroke プロパティを使う場合： <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000"/> </svg> のように、 stroke="#000" と直接記述しても
SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
IllustratorでSVGアニメーション用のSVGファイルを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのすーちゃんです。 雪を見ないと冬っぽさを感じられません。東京は全然雪が降らないので、年末実家に帰るのが楽しみです！ さて今回は、今さら聞けないかもしれない、SVGアニメーション用のSVGファイルの作り方をご紹介したいと思います！ どういったところでSVGアニメーションが使われているの？ まずは、どういった部分にSVGが使われているか見てみましょう！ carborocco 最初のローディングやロゴマークが表示される部分がSVGアニメーションみたいです。静止画で見るよりも、ロゴのイメージが湧いてきますね！ SERIO VERIFY スクロールに合わせて線が伸びていったり、描いているみたいにイラストが表示されたり……。これもSVGで表現されています。よりストーリー性があって、つい最後まで見てしまいますね！ 上で挙げたサイトのように、ストーリー性を持たせたり、強く印象づけ
SVGで始めるマイクロインタラクション入門 - ICS MEDIA
ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、はじめてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。 マイクロインタラクションとは 「マイクロインタラクション」とは、ある目的を果たすために1つの作業を行うインタラクションのことで、Dan Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。 マイクロインタラクションの構造 マイクロインタラクションは、次の4つの構造に分解できま
コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも超簡単にSVG画像をアニメーション化できる無料のWebサービスをご紹介します！ このサービスは、JavaScriptでSVG画像を制御できる「vivus.js」をベースにしており、誰でもプログラミング不要で簡単に「手描き風」のアニメーションを作れるのが特徴です。 【 Vivus Instant 】 そして本記事の後半では「vivus.js」を使った基本的なプログラミングについても解説しているので、ご興味ある方はぜひ参考にしてみてください！ ■「Vivus Instant」とは？ それでは、実際に「Vivus Instant」を使いながら、どのようなサービスなのかを見ていきましょう！ まずは、サンプルとして次のようなSVG画像を用意しました。 SVGは、ベクター形式で描かれたXML構造を持つデータですが、このままでは当然ながら静止画
svgbob - アスキーアートをSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました READMEなどテキストファイルには罫線を駆使したアスキーアートが載ることが多々あります。一度だけであれば良いのですが、メンテナンスもしづらいですし、見やすいものではありません。 しかし技術者としてはドローソフトウェアでいちいち描いたりするのも面倒です。そこで使ってみたいのがsvgbobです。 svgbobの使い方 一例です。左側のテキストがSVGに変換されています。 工夫すれば日本語も使えます。 こんな複雑なイラストも。 ____[] | ___ | || || device ||___|| loads | ooo |----------------------------------------------------------. | ooo | | | | | ooo |
d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita
スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実際に何かに使うには、描画したいデータを必要なフォーマットに直すところがちょっと大変そう。 解説 0. 全ソース 一旦全ソースを貼ってみる。 コピペしていくつかの値をいじってみるだけでも楽しい。 <!DOCTYPE html> <html> <head> <title>d3test</title> <script src="http://d3js.org/d3.v3.min.js" charset=
斬新なのに効果的！最近流行している「非平行ヘッダー」の作り方
ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。 通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。 今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。 長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。 作成手順を見てみましょう。 非平行ヘッダーとは？ 非平行ヘッダー(Non-paralleled header) （非長方形ヘッダー(Non-rectangular header)とも言います）とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。
macSVG
Introducing macSVG July 16, 2022 – macSVG v1.2 is released, adding native support for Macs with Apple Silicon M1/M2 processors. See the Release Notes for details. macSVG is a MIT-licensed open-source macOS application for designing and editing Scalable Vector Graphics (SVG) content for HTML5 web pages, mobile apps, animation design, and general graphics usage. SVG is an open-source format for comp
一から学ぶベジェ曲線 | POSTD
(編注：SVGアニメーションを元記事にならい追加しました。リクエストありがとうございました。) 皆さんは線分のことをどう表現しますか？ 線分は、端点によって考えられるかもしれません。その端点を P0 、 P1 と呼ぶことにしましょう。 線分を厳密に定義するならば、「 P0 と P1 を結ぶ直線において、 P0 と P1 の間にある全ての点の集合」と言えるかもしれません。これは以下のように表せるでしょう。 便利なことに、上記の定義から、その線分上のどこにある点の座標でも簡単に求めることができます。例えば、中点は L(0.5) にあります。 実は、2点間のどんな値でも、任意の精度で 線形補間する ことが可能です。そのため、時間関数 L(t) の t で線をたどるといった、より複雑なことができるのです。 ここまで来ると、「それが曲線と何の関係があるのか？」と不思議に思うかもしれません。2つの点だ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選 | WebDesignFacts
http://handywebdesign.net/2017/10/beautiful-svg-animation/
http://2ndidea.com/svg/svg-path-drawing-animation-even-ie/
http://azarashic.net/svg-animation-1/
来年こそはSVGを活用してみよう！絶対使いたくなるサンプル37個をご紹介
