【JavaScript】免許証ジェネレータを作ってみた【SVG】 - Qiita
はじめに 仕事で少しSVGを扱うことがあったので、免許証ジェネレータを作ってみました。 制作工数: 2日間(20時間程度) 作ったもの 免許証ジェネレータ 🥳 パラメータを設定して↓のような免許証を生成できます。 使い方 下部のタブから画像やテキスト等を設定して「変更を反映」を押下します。 「画像を保存」からローカルに画像を保存できます。 ソースコード 雑ですが↓に置いています。 免許証ジェネレータの作り方 定数を設定しようと考えましたが、めんどくさくなってマジックナンバーだらけになりました😿 SVGコードのベストプラクティス的なものがよくわかっていないので今後勉強しようと思います。 技術 JavaScriptとHTMLだけです。 JavaScriptでSVGを生成して、HTML要素にappendします。 描画メソッドを作る 線、枠、文字、画像を描画するメソッドを作成します。 座標、大
もうアイコン素材に困らない！CC0でSVG完備、420種類のシンプルにデザインされたアイコン素材 -Evericons | コリス
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
商用利用無料！書道家「ダ山竹電」先生によるSVGの筆書き素材 -カリ蔵(カリグラ)
筆書きのかっこいい文字を使いたい！ 一回使うだけなのに、毛筆フォントをインストールするのは面倒！ そんな人たちの要望を叶えるべく、書道家「ダ山竹電」先生が立ち上がり、カリグラフィの筆書き素材がローンチしたので、紹介します。 筆書き素材は、個人でも商用でも無料で利用できます。 カリ蔵(カリグラ) 筆書き素材は、カスタマイズしてダウンロードできるのも大きな特徴です。 サイズやカラーを変更したり、文字にもいくつかのバリエーションが用意されています。
畳み込みニューラルネットワークをKeras風に定義するとアーキテクチャの図をパワーポイントで保存してくれるツールを作った - Qiita
（2018/01/05 追記）ちょうどpython-pptxを調べていたので、pptx形式で図を保存できるようにし、タイトルも修正しました。 はじめに 論文やスライドで、畳み込みニューラルネットワークのアーキテクチャを良い感じに表示したいときがありますよね？スライドだとオリジナル論文の図の引用でも良いかなという気がしますが、論文の図としては使いたくありません。 ということでKerasのSequentialモデルのような記法でモデルを定義すると、そのアーキテクチャを良い感じに図示してくれるツールを作りました。言ってしまえばテキストを出力しているだけのツールなので依存ライブラリとかもありません。 https://github.com/yu4u/convnet-drawer ここまで実装するつもりはなかったので綺麗に設計できていませんが、バグ報告や追加機能要望welcomeです！ 経緯 元々は、
無料で商用利用できるSVGのフリーアイコン4,500種類、デザインに合わせたカスタマイズもできるのはすごい！
企業サイトをはじめ、コマース、アプリ、メディア、ブログなど、さまざまなUIデザイン用のアイコンが無料でダウンロードできるOrion Icon Libraryを紹介します。 その数はなんと4,500種類以上！ 豊富なデザインに加え、カスタマイズにも対応しており、ストロークを鋭角や角丸にしたり、太さを変更したり、カラーを変更することもできます。
種類豊富でカラーバリエーションも豊かなアイコンセット「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」
種類豊富でカラーバリエーションも豊かなアイコンセット「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」 ユーザーを視覚的に誘導してくれるアイコン。1つの種類でカラーバリエーション豊かなものがあると、アイコンのばらつきで雰囲気を損ねることなくデザインに統一性を持たせることができます。今回ご紹介する「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」は、5つのバリエーションでデザイナーの役に立ってくれるアイコンセットです。 シンプルでミニマルなテイストのアイコンが100種、セットでダウンロードできるようになっています。 詳しくは以下 フルカラーのもの、枠線にグラデーションがかかったもの、くすんだ色味など、さまざまなバリエーションが収録されており、表現したいテイストによって使い分けることができそう。
無料で使えるオープンソースの200種類以上あるSVG形式アイコンセット「Clarity Icons」
200種類以上もある美しいSVG形式のアイコンをまとめたアイコンセット「Clarity Icons」が、オープンソースのデザインシステムClarity Design System上で公開されています。 Clarity Design System https://vmware.github.io/clarity/icons/icon-sets#core-shapes 「Clarity Icons」には全部で200種類以上のアイコンが収録されており、アイコンは種類ごとにダウンロードすることも可能です。収録されているアイコンの種類は「Core Shapes」「Commerce Shapes」「Essential Shapes」「Media Shapes」「Social Shapes」「Travel Shapes」「Technology Shapes」の7種類で、さらに複数のバリエーションも存在し
kingraph - 家系図/組織図ジェネレータ MOONGIFT
組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。 今回はWebベースで使える家系図を作れるkingraphを紹介します。 kingraphの使い方 kingraphはYAML形式で組織図を定義します。例えば以下のようになります。 families: - parents: [Marge, Homer] children: [Bart, Lisa, Maggie] - parents: [Lisa, Milhouse] children: [Zia] people: Marge: fullname: Marjorie Bouvier Simpson そしてSVG/PNG/DOTファイルとして出力できます。 king
実装が非常に簡単！アニメーションに対応したSVGアイコンと埋め込みコードがセットになったライブラリ -Titanic
アニメーションするSVGアイコンもそれを実装するJavaScriptも、ゼロから作成すると時間がかかります。 Webページやスマホアプリでよく使用するさまざまなアイテムが用意された、アニメーションに対応したSVGアイコンと埋め込みコードがセットになったJavaScriptのライブラリを紹介します。 実装は非常に簡単で、SVGやJavaScriptが苦手な人でも問題無しです。
Twitterの新UIで使用されているような、丸みがあって可愛いシンプルタイプのアイコンセット 10＋ - NxWorld
ご存じの方も多いように少し前にTwitterのデザインがリニューアルされ、大きな特徴のひとつとして入力欄・ボタン・アイコンなど全体的に丸みを帯びた印象のデザインになりました。 全く同じものでなければTwitterのアイコンに比べると丸みが少なめなものもありますが、同じようなアイコンを使いたいときに利用させてもらえそうな、丸みがあって可愛いシンプルタイプのアイコンセットを集めてみました。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 Basic icons for UI (freebie) 角丸タイプ以外にもスクエアタイプと塗りつぶされたタイプのデザインも同梱されているアイコンセットです。 形式はAI, EPS, PSDの3種類用意されており、ライセンスは再販するのを除けばどこでも好きなように使用可能となっています。 Feather – Simply bea
Mondrian - WebベースのリッチなSVGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でドローをしようとした場合、取り得る選択肢はSVGかCanvasになります。Canvasは埋め込まれるコンテンツがバイナリになってしまいますが、SVGであればテキストベースなのが利点になるでしょう。 そんなSVGコンテンツをWebベースで作成できるのがMondrianになります。 Mondrianの使い方 デモです。 テキストを追加します。 拡大表示です。 画像（PNG）で出力した例です。 SVGで出力しました。エラーが出てしまっています。 Mondrianは様々なオブジェクトをドローできます。レイヤー機能こそありませんが、色を変えたり線の太さを後から変えることも可能です。作成したコンテンツはシェアしたり、埋め込みもできます。 MondrianはCoffeeScript製の
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
Curve App - 手軽に使えるSVGでドローアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ベジュ曲線などを使ったドローイングをやろうと思うとIllustratorやInkscapeのような特別なソフトウェアを使わないといけない気がしてしまいます。それこそ覚えるのに何日もかかるでしょう。 そこで使ってみたいのがCurve Appです。機能は決して多くありませんが、シンプルなUIですぐに使いこなせるドローアプリです。 Curve Appの使い方 Curve Appを起動しました。サンプルのドローが描かれています。 クリックするとポイントがハイライトされます。 適当に色々追加したところ。円や多角形の他、ベジュ曲線を使ったドローもできます。 Curve AppはElectronを使っている点がポイントで、つまりこれはHTMLで動いているということです。データはSVGで保存できる
d3.js超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。 <!DOCTYPE html> <head> <meta charset="utf-8"> <script src="d3
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons
GitHub - SVG-Edit/svgedit: Powerful SVG-Editor for your browser
地図サービスに特化したアイコンが無料で手に入るサイト「Maki」 | ライフハッカー・ジャパン
http://blog.mismithportfolio.com/web/20150617lazy-line-painter
[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js![[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/22479d89713c68e7c04be9754415c079ec9f7950/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032308.png)
