kachibito.net
oks
ホーム
Resources
ソフトウェア
SVGのフィルターを、結果を見ながら学べる・﹁SVG Filters﹂
Ads
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/uploads/2019/12/site-icon.png)
SVG Filters
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/uploads/2018/09/svg.jpg)
SVG Filtersは<filter>
を、操作しながら学べるソフトウェアです。用意された画像やテキストを対象に、SVGフィルターを直感的な操作で付与、結果を確認しながらコードを学ぶことができます。また、英語ではありますがドキュメント付きの選択も可能です。本ツールはGithubにてソースコードも公開されています。SVGのFilterは複雑な設定が必要とされるのでチートシート代わりに覚えておくのも良いかもしれませんね。
SVG Filters
ソフトウェア
githubWebディレクター向けWebデザイナー向けシンプル
Ads
この記事を共有
Facebookはてブコピー
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.local/blog/wp-content/themes/kachibito6/images/no-amp-logo.png)
かちびと.net
関連記事
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
任意のWebサイトを様々な方法で内容に集中できるようにするChrome拡張・﹁Reader Mode﹂
Reader Mode Reader Modeは任意のWebサイトを様々な方...
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
HTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリ・﹁Waveditor﹂
Waveditor WaveditorはHTMLメールの作成、保存、送信等が...
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
Github GistのコードをSVGのダミー画像に変換するWebアプリ・﹁Faux Code Generator﹂
Faux Code Generator Faux Code Generato...
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
Cookieレスで拡張的なオープンソースなアクセス解析ツール・﹁Swetrix﹂
Swetrix SwetrixはCookieレスで拡張的なオープンソースなア...
Web制作に関するネタやTipsの備忘録
●WordPress
●CSS
●JavaScript
●Resource
●Books
●様々なLLMでAIチャットを試せるシンプルで軽量なOSSチャットツール・﹁LLM Playground﹂ Resource
●自身のすべき事に深く取り組む為のオープンソース生産性向上ツール・﹁shovel﹂ Resource
●簡単な操作でOPMLを編集できるオープンソースのオンラインOPMLエディター・﹁OPML Editor﹂ Resource
●WebサイトのスクショやFigma、ワイヤーフレーム画像などを元にTailwindベースで自動コード生成、更にプロンプトで調整も可能なオープンソースのフロントエンド開発向けAI Copilot・﹁WebCrumbs﹂ Resource
●ReactやNext.js向けに作られたコピペ可能なオープンソースのTailwindベースランディングページコンポーネント・﹁Page UI﹂ Resource
勉強した本
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=20090622&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1702%2F9784798061702.jpg%3F_ex%3D300x300&s=300x300&t=pict)
[PR]
●WPD-gallery
●Web制作案件に関して
●About/Privacy Policy
●Contact
●Twitter
●Facebook
![]()
![](/wp-content/themes/kachibito6/images/iam.jpg)
Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources.
kachibito.net
Copyright © 2009-2024 かちびと.net All Rights Reserved.
ホーム
トップ
Web制作に関するネタやTipsの備忘録
●WordPress
●CSS
●JavaScript
●Resource
●Books
●様々なLLMでAIチャットを試せるシンプルで軽量なOSSチャットツール・﹁LLM Playground﹂ Resource
●自身のすべき事に深く取り組む為のオープンソース生産性向上ツール・﹁shovel﹂ Resource
●簡単な操作でOPMLを編集できるオープンソースのオンラインOPMLエディター・﹁OPML Editor﹂ Resource
●WebサイトのスクショやFigma、ワイヤーフレーム画像などを元にTailwindベースで自動コード生成、更にプロンプトで調整も可能なオープンソースのフロントエンド開発向けAI Copilot・﹁WebCrumbs﹂ Resource
●ReactやNext.js向けに作られたコピペ可能なオープンソースのTailwindベースランディングページコンポーネント・﹁Page UI﹂ Resource
勉強した本
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=20090622&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1702%2F9784798061702.jpg%3F_ex%3D300x300&s=300x300&t=pict)
[PR]
タイトルとURLをコピーしました