这是一款基于SVG 噪声滤镜、位移映射与 CSS 动画技术实现的轮廓持续变化的圆形撕边头像。头像保持圆形构图，边缘像粗糙纸张一样不断起伏，照片和外轮廓一起产生轻微扭动。效果由多组 SVG 滤镜与样式组织，噪声参数在时间上变化，不需要预先做成动图，适合人物头像和视觉强调。
撕边头像的轮廓怎样持续发生变化
边缘变化来自位移。噪声图参与采样偏移，让圆形轮廓变成不规则毛边。
多组滤镜形成不同状态。切换噪声与位移参数，避免整圈只有机械一致的形变。
图片仍可直接替换。照片通过 CSS 背景引用，整体尺寸与滤镜可以继续沿用。
SVG噪声与位移为什么会影响照片
feTurbulence 生成噪声，feDisplacementMap 用噪声改变原始图像的采样位置，部分噪声频率还带有 SVG 动画。位移会影响整个渲染区域，因此边缘不仅向外抖动，也可能轻微扭曲头像内部；幅度过大会影响人物辨识。
<feDisplacementMap in="SourceGraphic" in2="noise" />
头像照片和毛边强度从哪里调整
头像路径和圆形尺寸在 style.css，滤镜参数位于 index.html 的 SVG 定义中。调整 scale、baseFrequency 或动画周期时，可以先从较小幅度开始；换成长宽差异大的照片，要检查背景裁切。
流动头像的图片构图与边缘限制
一定要使用透明头像吗？
不需要，普通照片也能作为圆形背景，但主体最好保持居中，避免边缘扭动裁掉重要部分。
能让头像内部完全不动，只动边框吗？
当前位移作用于图像区域。若只需要边框，应拆成静态照片和独立的动态边缘层。
适合个人头像、团队介绍和撕纸风格视觉。下载后可查看流动撕边头像的完整结构与参数，按自己的内容继续调整。
