LaTeXの数式を映えさせる - Qiita
本稿は TeX ＆ LaTeX Advent Calendar 2019 の17日目の記事です. 16日目は muscle_keisuke さんによる「日本列島をLaTeXで表示させたかったのでSVGをTikZに変換するプログラムを作った」でした. 17日目は @Xs_TeX さんによる「LaTeXで目次のカスタマイズをしてみた」です. 2日連続でTikZネタです. TeX ＆ LaTeX Advent Calendar は今年が初参加ですが, 初参加のくせに2回投稿させていただきました. 1個目は「xfakebold.styの紹介」でした (宣伝). はじめに 「インスタ映え」という言葉が定着して久しいですが, いまや様々なコンテンツで「映え (ばえ)」を意識する時代となりました. これからの時代, 映えないコンテンツは衰退していくと言っても過言ではないでしょう. では, LaTeXとい
eleventy-high-performance-blog/_11ty/blurry-placeholder.js at 624aaa9ede9df609e2d4656f23d819621f5cb464 · google/eleventy-high-performance-blog
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
(English version here) 明けましておめでとうございます。モバイル基盤部のヴァンサン(@vincentisambart)です。 最近Appleがアプリの画面で使えるシンボルSF Symbolsに力を入れています。SF SymbolsはAppleの用意してくれたシンボルだけではなく、自分の作ったカスタムシンボルも使えます。Appleの紹介しているカスタムシンボルを作るワークフローに従うと手間がかかるので、既存のSVGからカスタムシンボルを自動生成できないか挑戦してみました。 経緯 だいぶ前からiOSクックパッドアプリで色んな画面で使われている単色アイコンはCookpadSymbolsというシンボルのみのフォントが使われていましたが、数ヶ月前デザイナーからシンボルの運用をフォントファイルからSVGに変えたいという要望が挙がりました。 アイコンは元々SVGで作成されていました
Vector Creatorは最近よく見かけるゆるーいスタイルのイラストを組み合わせてオリジナルイラストを作成、ダウンロードできるWebアプリです この手のイラストを配布しているicon8が公開したアプリで、沢山のイラストを組み合わせてダウンロードできるようになっています 作ってDLするだけならユーザー登録も不要みたいですね
HTML SVG の基本的な使い方（SVG入門） SVG の基本的な使い方に関する覚書です。 HTML ファイルに直接 svg 要素を記述するインライン SVG の使い方（viewBox の説明や動作確認サンプル、基本図形要素、fill と stroke、スタイルの設定、グループ化を行う g 要素や再利用可能な部品の定義に使う defs 要素、図形などのひな形を定義するための symbol 要素、マーカー、変形、グラデーション、パターン、クリッピングやマスキング）や SVG ファイルの最適化などの基本的な事項をまとめています。 以下は2020年12月時点での内容になります。仕様などに関しては変更になる可能性があります。 関連ページ： SVG アニメーション（SMIL を使ったアニメーション） CSS clip-path の使い方 CSS マスキング mask-image の使い方 Phot
はじめに Hello world, I give you Zdog 🐶 https://t.co/yL9FsIN6C7 Round, flat, designer-friendly pseudo-3D engine for canvas & SVG pic.twitter.com/JXhYlCd8Sb — Dave DeSandro (@desandro) 2019年5月28日 先日、CodePenを眺めていたところ、Zdogというものを見つけて、とてもよかったので一通りドキュメントをみていろいろ作ってみました。 いつもならそれで終わりなのですが、6月4日にリリースされたばかり1で日が浅く、まだ日本語の情報が少なかったため、自分のための備忘録も兼ねて簡単にご紹介します。 Zdogとは Round, flat, designer-friendly pseudo-3D engine for
Iconify is an open source project. Almost all parts of the project use MIT license. Some older packages use Apache 2.0 and/or GPL 2.0 licenses. This license does not apply to icons. Icon sets use various open source licenses, see each icon set for details.
Building an adaptive favicon Stay organized with collections Save and categorize content based on your preferences. In this post I want to share thinking on how to build an adaptive favicon with SVG. Try the demo. Browser tabs shown adapting to MacOS system light and dark theme changes. Try the Demo If you prefer video, here's a YouTube version of this post: Overview A custom favicon is a great wa
今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。 その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます。今回紹介するCoreUI Iconsはフリーでも1,500、有料版では3,000のアイコンが提供されます。 CoreUI Iconsの使い方 各カテゴリの最初の部分だけ紹介します。まずはブランド。 AppleやAmazonなどもあります。 国旗。 アクセシビリティ。 アラート。 ファシリティ。 ビジネス、マーケティング。 チャット。 顔。 ファイル、ドキュメント、メール。 フード、ドリンク。 手。 イメージ編集。 インタフェース。 メディア、オーディオ、動画。 電話系。
blog.utgw.net 私も緊急事態宣言してみました。文字のオタクサイドです。 フォント 元ネタのNHKのやつはたぶんニューロダンです。 lets.fontworks.co.jp これを使うとめっちゃそれっぽくなることは知られていますが、残念ながら私はLETSと契約していないので、Google Fontsで使えるNoto Sans JP Boldにします。 あと、なんとなくそれっぽくなりそうなので90%長体をかけました。 該当部分だけ抜き出すとこんなかんじです。Google Fontsはお手軽に使えて良いですね。 <head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /
CSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリ・「Scene.js」
Scene.jsはCSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリです CSSとJSの両方をサポート、SVGサポート、時間の制御、タイムラインベースで複数要素を同時に制御、アニメーションエフェクトを手軽に付与できるプリセットなどを特徴としています アイデアと応用次第で高度なアニメーションコンテンツを実装する事が可能です サンプル このような高度なアニメーション（だと僕は思いましたが感覚は個人差あると思います）の実装をサポートしてくれます <script src="http://daybrush.com/scenejs/release/latest/dist/scene.js"></script>CDNも用意されています。ちょっと学習コストは高いですが、覚えればいろいろなアニメーションコンテンツが作れそうです 開発者は本家NAVERのフ
IconHunt
Required parameter: searchterm, string: searchterm Keywords: palette, boolean: Filter icons by palette. Example queries: "arrow palette=false", "car palette=true". style, "fill" or "stroke": Filter icons by style. Example queries: "arrow style=fill", "car style=stroke". prefix, string: Icon set prefix if you want to get result only for one icon set. Example queries: "arrow prefix=mdi", "car prefix
Illustrations to create breath-taking projects without breaking the bankConvert your visitors to customers with awesome designs. We have a range of premium illustrations fit for your project!
decent looking diagrams for engineers
Customize Customize and animate 3D elements. All in your browser.
Royalty free Vector Illustrations for Commercial Use | Scale
Yes, the illustrations you find on scale are literally "royalty-free vector illustrations for commercial use" - absolutely free and no attribution needed. Academic, personal or commercial use, doesn't matter - feel free to use Scale's illustrations! The only condition is to not use our illustrations to resell, or repackage. Basically don't duplicate Scale or create a competitor product. Otherwise,
It's been a while since I introduced a new syntax to the css-doodle project to solve my own problems. While I'm not sure it would be useful elsewhere, I need to make some notes before I forget the details. Motivation I always find it a bit hard to write SVG without the help of additional tools or libraries. The main issue for me is that SVG code grows too fast to keep up. If we take a closer look
Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease. Read Our Articles Solving the ‘metadata-generation-failed’ Error in Python Solving the ImportError in Django: ‘cannot import name ‘force text’ from ‘django.utils.encoding’
ShapeDividers.com The easiest way to add vertical, responsive or animated Shape Dividers to your websites. This tool is available only from a desktop computer. We recommend that you email yourself this page and come back from your computer! While you are here, have a look at the features! Features ➔
皆さん、こんにちは。サツキです。 今回は、SVGアニメーションの話をしようと思います。 「SVGアニメーション」と聞いて難しいのでは？と思った方もおられるかもしれませんが、今回はCSSのみを使用した簡単に実装できるSVGアニメーションをご紹介しようと思います。 この先、SVGの利用はますます増えていくことになるかと思いますのでSVGアニメーションの経験の無い方はこの記事を読んで是非一度作成してみてください。 そもそもSVGとは？ SVG（Scalable Vector Graphics）とは、XMLをベースにしたベクターデータで構成された画像形式の一種です。 WEBサイトでよく利用される「PNG」や「JPG」といった画像形式はドット（点）の集まりで構成されるビットマップデータなのですが、このビットマップデータには画像の拡大・縮小などの編集の際に画質が落ちてしまう特徴があります。 一方、ベク
Origami Simulator
× ORIGAMI SIMULATOR This app allows you to simulate how any origami crease pattern will fold. It may look a little different from what you typically think of as "origami" - rather than folding paper in a set of sequential steps, this simulation attempts to fold every crease simultaneously. It does this by iteratively solving for small displacements in the geometry of an initially flat sheet due to
無料で使いやすい！極上の最新フリーアイコン素材40選
この記事では、無料ダウンロードができて高品質なフリーアイコン素材を厳選してご紹介します。デザインコレクションに加えておくと、ウェブサイトやアプリの制作はもちろん、プレゼン資料やスライド作成、ブログ運営など何かと重宝するものばかりです。 無料で使いやすい！極上の最新フリーアイコン素材まとめ Motion Icons SVGアイコンにアニメーションを加えたデジアン素材で、無料版では12種類のモーションアイコンが実際のHTMLサンプルと一緒に同梱されています。 8000+ Essential Icon Pack 一度アプリをインストールしてしまえば、8000を超える商用ライセンス付きのアイコン素材から探すことができ、PhotoshopやIllustrator、Sketchといったデザインアプリに、ドラッグ＆ドロップでアイコンを追加できます。WindowsとMacどちらにも対応。 Pure Sug
SVGとanimationで滑らかな動きの波っぽいやつ
Result ヒーローイメージに目が疲れない程度のアニメーションフレームを用意して注視を促し、訴求力向上を期待する的なやつ。向上するかは分かりません ユーザーにストレスないものが望ましいという事で癒されそうな波をSVGとCSSだけで表現するサンプルです まぁこれでもストレス感じる人がいないわけではないでしょうけども。 css.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration:
本記事は<svg>要素のみを持つ<button>要素（アイコンボタン）にアクセシブルな名前（accessible name）を持たせる方法について調査した結果と、WCAG 2.2のSuccess Criterion 1.1.1 Non-text Contentに関する私見をまとめたものです。 結論 アイコンボタンの非テキストコンテンツは装飾ではなく意味を持つ画像なので、ボタンではなくアイコン画像自体にアクセシブルな名前を持たせるべきだと考えます 一方で、非テキストコンテンツの範囲をアイコンのみではなくアイコンボタン全体と捉えると、ボタンにアクセシブルな名前を持たせることも妥当に思えますが、<img>要素や<svg>要素など様々な種類のアイコン画像の実装を想定した場合、やはりボタンにアクセシブルな名前を持たせない方針に倒す方がシンプルだと思います <svg>要素のみを持つ<button>要素
Heroicons
Heroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required. Icons by @steveschoger. Website by @username_ZAYDEK.
任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタ・「Norde Source」
Norde Sourceは任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタです 各OSに対応したデスクトップアプリで現在は無料で利用する事が出来ます 試しに使ってみました 動作テスト シンプルなUIです。デフォルトではFeatherやFontAwesome、IoniconsなどオープンソースのSVGアイコンセットを配布するプロジェクトが項目に入れられており、その場でアイコンセットを作る事が可能となっています。ついでにOpen Peepsも入れられtました ↑ 勿論、+ADDから任意のアイコンを複数選択して、管理、一括でスタイルを変更する事も可能です。任意のセット名にしたり検索も出来るように。 ↑ エクスポートはSVG、PNG、JPGなどのお馴染みの拡張子からWebPやVeu.js向けなども用意されています ↑ Open Peepsなどのように複
令和のワードアートを発表してきた＠LINE UIT - No Regrets in Bathing
UIT meetup vol.7で登壇してきました。 普段はReactやVue, BFFなどのゴリゴリの内容をやっているmeetupだそうです。 ただ、最近堅い内容が続いたので「○○芸人」を集める箸休め的な回をやりたかったそうです。 ということで、SVG芸人を名乗っている私にも声がかかりました。 （自分で言うのもなんですがSVG芸人ってなんなんだ…？） スライドはこれです。 slides.com 「ワードアートの歴史」から始まって「ベジェ曲線の手書きの仕方」とか横道にそれつつ、 最後はTシャツという謎終着点に行き着くような内容なので、あんまり真面目に見なくていいです。 話下手なので終始しどろもどろになりながらの発表でしたが、 徹夜で仕込んだ「令和のワードアート」やワードアートエディタがそれなりに受けてくれたようです。 「contenteditable」の単語だけで笑いが取れる場は貴重ですね
SVGでCSSアニメーション｜sumi｜note
はじめにカラフルな線が印象的なアイコンができたので、ラインを描いていくようなアニメーション（ドローアニメーションというのかな？）にしていきます。 最初に見かけた方法はvivusというSVGアニメーションのJavascriptライブラリ。 簡単に手書き風？アニメーションができそうです。 でもvivusはやめました。Javascript重いのでCSSだけでいけるならそのほうが良いですよね・・。ということで調べつつやってみました。 SVGを表示する/mozart.svg（モーツァルトの顔部分） <svg id="icon" xmlns="http://www.w3.org/2000/svg"> . . . </svg> /mozart-text.svg（Wolfgang Amadeus Mozartの部分） <svg id="icon" xmlns="http://www.w3.org/2000
ダン・ラティガン（Dan Rhatigan）。Adobe タイプ開発シニアマネジャー。Adobeでバリアブルフォントや、Photoshop、Illustratorのカラーフォント作成などに携わる。25年以上にわたる、タイプセッター、グラフィックデザイナー、書体デザイナーとしての経歴のほか、Adobe入社以前は教師としても勤務。ボストン大学でグラフィックデザインの学士、英国レディング大学でフォントデザインの修士号を取得 ケン・ランディ（Ken Lunde）。CJK言語（中国語、日本語、韓国語）での情報処理を専門とし、フォント開発とプログラミングに取り組む。28年以上にわたりAdobeにて日中韓の漢字圏フォントの開発に努めてきた。日中韓を統合したオープンソースの書体ファミリーである源ノ角ゴシック（2014年リリース）と源ノ明朝（2017年リリース）の構築および管理を担当。CJKV日中韓越情報処
[レベル: 上級] 組織のロゴを指定する構造化データの画像フォーマットに .svg と .webp を Google は追加しました。 これまでサポートしていた画像フォーマットは次の 3 種類でした。 .jpg .png .gif .svg と .webp を合わせて、5 種類の画像フォーマットを現在はサポートしています。 ロゴ構造化データはナレッジパネルの画像に使われる ロゴの構造化データを設定しているサイトは多くないかもしれません。 ロゴの構造化データを schema.org でマークアップしていると、Google の検索サービスで利用されます。 代表的な使われ方はナレッジパネルのロゴです。 構造化データで設定したロゴを Google は必ず使うわけではありませんが、強いシグナルとして参考にします。 自社のナレッジパネルのロゴが適切な画像になっていなければ、構造化データで指定するといい
とにかく Material Design Icons を開きます Search... ボックスに face と入力します 一覧からお好みの SVG をクリックします </> ボタンを押し、プルダウンメニューから View SVG を選択します テキストエリアの中身をすべてコピー…するのではなく、 d 属性の中身のみコピーします。 <path fill="#000000" d="..." /> の ... です 下記のようなスタイルシートを記述し、 ... の部分にコピーした内容をペーストして完了です <style> .c-icon--face { background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"
skip to content Latest Update 0.6.1 read more Details for Pattern 1 Details for Pattern 2 Details for Pattern 3 Details for Pattern 4 Details for Pattern 5 Details for Pattern 6 Details for Pattern 7 Details for Pattern 8 Details for Pattern 9 Details for Pattern 10 Details for Pattern 11 Details for Pattern 12 Details for Pattern 13 Details for Pattern 14 Details for Pattern 15 Details for Patter
Blush: みんなのためのイラスト
イラストでストーリーを語る世界中のアーティストが作成したコレクションを使用して、すばらしいイラストを簡単に作成、カスタマイズできます。お試しください。楽しいですよ。
GitHub - hikerpig/pintora: An extensible text-to-diagrams library that works in both browser and node.js
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
ロゴとかアイコンとかシンボルとか、Webサイトの中のいろいろなところで使われていて、それでいて色違いも必要だったりする小っこい画像たち。みるみる増えてしまってもう仕方ないですね…X(。そんな小っこい画像をひとまとめに管理できる、SVGスプライトについてまとめます。 アイコン一式SVG バラバラのアイコンたちをひとまとめにして、取っ散らかった画像フォルダをスッキリ片付けちまいたいXO！ ということで、例えば、ボタンの矢印とかアイコンとか、ロゴとかシンボルとか、Webサイトの至るところに蔓延（はびこ）る小っこいアイコンを、ひとつのSVGファイルに詰め込んで使いたいやつだけ表示させるやつのつくり方をまとめます。 仕組み 「SVGでやることのまとめ。」という記事で紹介したuse要素を使います。 ひとつのSVGファイルに、アイコンぜんぶを詰め込んで、それぞれにid属性を割り振れば、use要素でお目当
Paaatternsはアートライクな背景パターンを配布するプロジェクトサイトです。 いくつかのアートなパターンがSketch,やFigma、Adobe XD、Illustrator用のファイルやpng、svgなどで配布されています。 パターンは20種以上あり、それぞれデザインはほぼ完成されている印象です。元ファイルの配布なのでコンテンツに応じて変更する事も出来ますね。 ライセンスは独自ライセンスですが商用でも無料で利用できます。 Paaatterns
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 複雑なチャートを描く際に、ExcelやPowerPointを使っていては、後々の更新コストが大きくなります。そこでお勧めなのがGraphvizです。dotファイルを作れば、チャート化する部分は自動で任せられるようになります。 今回紹介するGraphvizOnlineはWeb上でGraphvizを試せるツールです。各自のローカルにインストールする手間がなくなるのでお勧めです。 GraphvizOnlineの使い方 左側にエディタ、右側に生成されたチャートが表示されます。 エンジンを変えることで、同じ内容でも異なった表示になります。 フォーマットは画像の他、SVGも選択できます。 別なファイルでの例。 内容によって最適なエンジンがありそうです。 GraphvizOnlineを社内に一台
Free icons for your better UI A pack of simple, neutral, carefully crafted icons that you can use in your personal and commercial projects for free. Install Humbleicons are published to npm, but they can also be manually downloaded if needed. npm Install Humbleicons — including SVGs and icon sprite. Then, choose how you’d like to include the icons with the usage instructions. npm i humbleicons Dow
ep.44『SVGで実現する日本地図マッピングライブラリ』 - LINE のフロントエンドエンジニアの GW | UIT INSIDE
LINE のフロントエンドエンジニア の GW の活動を5日連続で紹介する企画 vol.2。@spring_raining が miyoshi が開発した SVG ベースの日本地図マッピングライブラリ開発について話を聞いてみました。 まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING miyoshi Front-End Dev 1 チーム LINE NEWS のフロントエンド開発 UIT INSIDE ep.3 に出演 https://uit-inside.linecorp.com/episode/3 自由研究とその経緯 COVID-19 のための開発の副産物として、SVG の日本地図に対してマッピングを行うことができる汎用の Vue Component を開発した。 もともと LINE NEWS で COVID-19 関連の情報提供のために
GitHub - LingDong-/psvg: Programmable Scalable Vector Graphics -- drawings that draw themselves
Doc | Playground | Examples | NPM PSVG is an extension of the SVG (Scalable Vector Graphics) format that introduces programming language features like functions, control flows, and variables -- Instead of writing a program that draws a picture, write a picture that draws itself! PSVG is compliant with XML and HTML specs, so it can be easily embedded in a webpage or edited with an XML editor. This
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カスタムなSF SymbolsをSVGから自動生成する - クックパッド開発者ブログ
ゆるいスタイルのイラストを組み合わせてオリジナルイラストを作成、ダウンロードできる・「Vector Creator」
HTML SVG の基本的な使い方（SVG入門）
かわいい3Dエンジン「Zdog」の紹介 - Qiita
Iconify Design: All popular icon sets, one framework.
Building an adaptive favicon | Articles | web.dev
CoreUI Icons - 1,500種類を超える多彩なアイコン集
SVGフィルタで緊急事態宣言 - すずしめにっき
2500+ High Quality Illustrations & Animations Pack
Decent looking diagrams for engineers
Morflax shift - Convert SVG to 3D
Experimenting A New Syntax To Write SVG
Blobs.app - Generate Beautiful Blob SVG Shapes
SVG Shape Dividers Generator Tool
ロゴをリッチに！？SVGアニメーションの簡単作成
アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
Adobeのフォント開発者が、日本の楽しく独特なフォント使いと未来を語る
Google、ロゴ構造化データの画像フォーマットにSVGとWebPをサポート
多分これが一番早い SVG Background Image の利用手順だと思います - Qiita
Basic Pattern Repository
使いまわせるSVG
アートライクな背景パターンを配布する・「Paaatterns」
GraphvizOnline - GraphvizをWebブラウザ上で使う
Humbleicons – free icons for your better UI