SVG | 锤子前端

《DSSSP：React音频均衡器与滤波器可视化库》

Sun, 19 Jul 2026 14:08:41 GMT

《DSSSP：React音频均衡器与滤波器可视化库》

标签：#前端 #React #音频可视化 #SVG #WebAudio

总结：
DSSSP 是一个基于 SVG 的 React 组件库，用于可视化音频频率响应图和交互式控制音频滤波器。它将专业桌面音频软件的参数调节功能移植到 Web 环境，支持拖拽调节增益、频率、Q值等参数。

文章要点：
1. 专业音频可视化：基于 SVG 渲染对数频率图谱，精准呈现音频频谱响应曲线，适合音频编辑工具开发
2. 交互式滤波器控制：支持拖拽操作和直接属性更新，可调节增益（Gain）、频率（Frequency）、Q值（Q-Factor）等核心参数
3. 丰富的滤波器类型：内置多种常见音频滤波器类型，并提供数学函数计算最终信号曲线
4. Web 化专业工具：将传统桌面音频软件的专有处理与可视化能力成功迁移到浏览器环境，安装简单（npm i dsssp）

URL：https://dsssp.io/

dsssp.io

DSSSP: React Library for Audio Equalizers & Filter Visualization

This is a React component library to visualize frequency response graphs and control audio filters. It provides core UI elements for audio editing tools, allowing users to adjust filter parameters interactively.

《Markdown SVG 渲染器：AI 辅助开发的实用小工具》

Sat, 30 May 2026 09:06:14 GMT

《Markdown SVG 渲染器：AI 辅助开发的实用小工具》

标签：#前端 #工具 #Markdown #SVG #AI辅助编程 #SimonWillison #WebComponents

总结：

Simon Willison 分享了他用 Claude Opus 4.8 和 GPT-5.5 辅助开发的一个轻量级 Markdown 渲染工具，核心亮点是对 SVG 代码块的特殊处理——不仅能渲染出图像，还提供「渲染图 / 源代码」双标签切换。该工具支持直接粘贴 Markdown、加载远程文件或 GitHub Gist，并用 Fragment URL 记录状态以便分享。整个项目从需求到安全加固完全由 AI 驱动，是「提示驱动开发」的又一实例。

文章要点：

1. 这个工具的诞生源于一个具体场景：Simon 用 LLM CLI 让 Claude Opus 4.8 生成了五组不同思考深度（low 到 max）的「鹈鹕骑自行车」SVG，想找个优雅的方式展示这些 Markdown 日志
2. 核心定制点在于 SVG 围栏代码块（\\\`svg）——普通 Markdown 渲染器只会显示代码，而这个工具会把它变成可交互的 Web Component，默认展示渲染好的 SVG，点击可切换到源码查看
3. 支持三种内容输入方式：直接粘贴 Markdown、输入 CORS 兼容的远程 Markdown 文件 URL、或者加载 GitHub Gist 中的第一个文件
4. 用 URL Fragment（#）记录当前加载的文件地址，刷新页面或分享链接时能自动恢复状态，不用依赖后端
5. 安全方面，Simon 后续用 GPT-5.5（Codex xhigh 模式）专门审计并修复了 XSS 漏洞，体现了 AI 辅助开发中「生成 + 安全加固」的两步走思路
6. 整个工具属于 Simon 的「HTML Tools」系列——单文件 HTML+JS+CSS、无构建步骤、托管在 tools.simonwillison.net，目前已积累超过 150 个类似小工具

URL：https://simonwillison.net/2026/May/28/markdown-svg-renderer/

Simon Willison’s Weblog

Tool: markdown-svg-renderer

Renders markdown with a live preview from pasted text, a raw URL, or a GitHub Gist loaded through a `?url=` query parameter, and older `#url=` links redirect to that form. …

#SVG 《SVG 路径交互指南》

Tue, 19 Aug 2025 01:25:49 GMT

#SVG 《SVG 路径交互指南》

https://www.joshwcomeau.com/svg/interactive-guide-to-paths/

Joshwcomeau

An Interactive Guide to SVG Paths • Josh W. Comeau

SVG gives us many different primitives to work with, but by far the most powerful is the element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of…

#React #SVG #Motion 通过 React + Framer Motion 实现了一个创新性的无限滚动动画，元素沿自定义 SVG 路径动态移动，并支持多元素分布、深度排序、悬停交互、滚动联动等高级功能，同时提供**响应式适配方案（D3.js 动态路径缩放），兼顾性能与视觉细节

Fri, 20 Jun 2025 01:57:12 GMT

#React #SVG #Motion 通过 React + Framer Motion 实现了一个创新性的无限滚动动画，元素沿自定义 SVG 路径动态移动，并支持多元素分布、深度排序、悬停交互、滚动联动等高级功能，同时提供**响应式适配方案（D3.js 动态路径缩放），兼顾性能与视觉细节。

1. 路径动画突破：传统水平跑马灯升级为任意复杂路径动画（如交叉曲线）。
2. 交互增强：悬停减速、滚动速度联动、深度动态排序（解决路径交叉遮挡）。
3. 响应式设计：D3.js 动态缩放路径坐标，适配不同屏幕尺寸。
4. 性能优化：`useAnimationFrame` 逐帧控制 + 简化路径复杂度。

https://tympanus.net/codrops/2025/06/17/building-an-infinite-marquee-along-an-svg-path-with-react-motion/

Codrops

Building an Infinite Marquee Along an SVG Path with React & Motion | Codrops

Learn how to create an infinite marquee that follows a custom SVG path using React and Motion.