いや、ブラウザでHTMLとJavaScript以外の何かを動かそうという試みは、FlashとSilverlight以後両手の指で数え切れないほど生まれたけど、全てポシャったよ Pyodideが物好きの玩具を越えるというのは非常に胡散臭い（驚き屋案件）
いや、ブラウザでHTMLとJavaScript以外の何かを動かそうという試みは、FlashとSilv..
いや、ブラウザでHTMLとJavaScript以外の何かを動かそうという試みは、FlashとSilverlight以後両手の指で数え切れないほど生まれたけど、全てポシャったよ Pyodideが物好きの玩具を越えるというのは非常に胡散臭い（驚き屋案件）
SVGのパスアニメーションはgetTotalLengthメソッドが便利 - Qiita
はじめに こんにちは。CMA制作部スタッフYaatonです。 SVGを使ったアニメーションは細かい設定ができ、こだわった動きができるので実装する機会も多いのではないでしょうか。今回はSVGのパスアニメーションを実装するときに便利な記述や、つまづきがちなポイントを紹介したいと思います。 SVGのパスアニメーションとは SVGのパスアニメーションとはstroke-dashoffsetプロパティを使って破線の間隔を変化させることで、あたかも線が描かれているかのような演出ができるアニメーションです。 See the Pen svg path animation(css) by CMA Designer (@CMA-Designer) on CodePen. これをCSSのanimationで実装すると以下の様になります。 @keyframes pathAnime { to { stroke-das
【海外記事紹介】HTMLは死んだ — 問題だらけのWeb技術をどう未来につなげるか
8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 以下に、その内容を紹介する。 DOMとHTMLの現状：終焉と限界 記事は、Web開発の現場において、HTMLやDOMが肥大化し、今や誰も全容を把握できないほど複雑化しているという問題意識から始まる。 たとえば、Chromeにおけるdocumen
複雑な SVG を描くための LLM｜kawamou
SVG はテキストベース（XML）なので、LLM の生成と相性が良いのは周知の事実かと思う。ただの自然言語を吐くように、順に XML を吐いていくことでベクター画像が生成できる。 例えば下記は OmniSVG のデモ動画であるが、LLM の出力をインタラクティブに可視化することで徐々に画像が「描かれていく」ことも演出できる。 OmniSVGOmniSVG汎用 LLM ではうまく生成できない SVG汎用 LLM（Claude や GPT 等）で SVG を生成させようとしてうまくいかないケースは多い。 例えば下記は Noto Emoji のexpressionless-face（PNG 版）を Sonnet 4 に渡してその通りに生成してね！とお願いした様子。愛嬌はあるがもうひと頑張り。 渡した画像生成 SVG汎用LLMは幅広い適応性と膨大な事前トレーニング済み知識ベースを備えているため、ド
SVG to CSS Shape Converter
This tool will convert an SVG shape created with <path d="..."> into a CSS Shape. You will get a responsive code made with the new shape() function of clip-path. A single-element implementation that works with images and supports gradient coloration! Paste your SVG path below. Keep only what is inside the d attribute.
<svg>ではaltが使えないからaria-labelはロジックをすっ飛ばしている - 水底の血
@_yuheiyによる当エンジニアブログで実施したアクセシビリティ改善の方法についての解説は全体的に丁寧に説明しているだけに、下記の記述がちょっと気になったという話です。 これがimg要素であればalt属性を使って代替テキストを設定すべきですが、svg要素ではそれができません。そこで、WAI-ARIAの出番です。次のようにすることで、alt属性と同様に代替テキストが設定できます。 SVGネイティブに代替テキストを設定する方法は（SVGの）title要素だ、ということはおさえておくべきかなと。SVG2仕様書訳（原仕様書）に次のように書かれています。 title 要素は、 その親要素用の短いテキスト代替を表現する。 つまり、aria-labelを使うことなく、次のように書けます。（HTML解体新書のp.339にもあります。） <a href="..."> <svg role="img"><ti
複雑なキャラの高品質なSVG画像を生成するAI「OmniSVG」、異なる写真同士を合体生成する「UNO」など生成AI技術5つを解説（生成AIウィークリー） | テクノエッジ TechnoEdge
2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless（シームレス）を運営し、執筆しています。 この1週間の気になる生成AI技術・研究をいくつかピックアップして解説する「生成AIウィークリー」（第91回）では、複数の写真に写る被写体を1枚の写真に統合させる画像生成AI「UNO」や、1枚の写真から音声に応じた話す人物映像を作成するトーキングヘッド生成AI「FantasyTalking」を取り上げます。 また、複雑で高品質なデザインでもSVG画像生成できるAI「OmniSVG」や、3Dモデルを意味のあるパーツに分解するAI「HoloPart」をご紹介します。 そして、生成AIウィークリーの中でも特に興味深いAI技術や研究にスポットライトを当てる「生成AIクローズアップ」では、大規模言語モデル（LLM）が人間の本質をどのように捉えているかを調査した
人間によるコーディング禁止の CLINE 縛りでゲームを作らせてみた感想
現時点の AI コーディングの実力を測るために、自分はプロンプトのみ、直接コードを書くのは禁止で Roo Code による VS Code によるエディタ操作のみでコードを書かせた。その感想 (急いで書いたのでいろいろと雑です) tl;dr 良し悪しはともかく、人類は確実にAIによる自動操縦型のプログラミング体験に依存するという確信を持った。 ただ、その基盤である CLINE(系)自体のツールとしての完成度はいまいち。 CLINE以外の、各モデルのコーディング性能も、現時点では物足りない。 CLINE とは何か(知らない人向け) いろいろと機能はあるが、コア機能としてはヘッドフルな vscode runner で、AI にコードを書かせるために必要な情報を受け渡しするインターフェースを持っている。ファイルの読み書きや、コマンドを実行結果をプロンプトにしてAIに渡す。puppeteer によ
様々なサービスロゴをSVG形式でダウンロードできる「Svgl」｜BLACKFLAG
SNSやブラウザ、CMS、ソフトウェア、AIなど様々なサービスのロゴをSVGのアイコン形式でコピーまたはダウンロードすることができる「Svgl」がとても便利に活用できそうだったのでメモ書きとして紹介します。 A beautiful library with SVG logos – Svgl A beautiful library with SVG logos – Svgl 各サービスのロゴはSVG形式でコピーまたはダウンロードすることができます。 「Svgl」では下記のジャンルに分かれた形で様々なサービスロゴが400種類以上も提供されています。 ※2024年5月28日現在 ・AI – 人工知能 ・Browser – ブラウザ ・CMS – コンテンツ管理システム ・Community – コミュニティ ・Compiler – コンパイラ ・Crypto – 暗号 ・Database – デ
SVG Viewer
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 124 124" fill="none"> <rect width="124" height="124" rx="24" fill="#F97316"/> <path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"/> <circle cx="63.2109" cy="37.53
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを
Apache(tm) Batik SVG Toolkit - a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG)
Apache Batik¶ Overview License Download Notes Status Demo FAQs Batik Wiki Mailing lists Contributors Bug database Projects using Batik Batik Tools¶ Overview Browser Rasterizer Font converter Pretty printer Using Batik¶ Overview Architecture Javadoc APIs DOM API Parsers Scripting¶ Scripting with ECMAScript Scripting with Java Scripting with Security SVG generator Swing components Transcoder API Ext
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
<feMorphology> - SVG | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn more See full compatibility Report feedback The <feMorphology> SVG filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects. Like other filter primitives, it handles color components in th
On-Scroll SVG Filter Effect | Codrops
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani. The other day I stumbled across this demo by Fabio Ottaviani and I was wondering how this animation could work on scroll. The idea of the demo is to animate a mask shape that has a SVG turbulence filter applied to it. Magically, this results in an apparent animation of the the whole distortion around th
SVGator: Free Animation Maker Online
The easiest way to animate SVGCreate SVG animations the easy way. Export production-ready code as a single file, in seconds. Perfect for product teams, agencies, and designers who ship daily. SVG animation for FigmaAnimate your designs and bring them to your Figma projects. Deliver optimized production files in an instant right in Figma. Start from Figma as simple as copy & paste Generate MP4 or G
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Microsoft Edge」がSVG画像のコピペに対応 ～他のChromium系ブラウザーにも恩恵／ネイティブアプリとのやり取りも簡単に
SVGL
これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl
Adobe Express