SVG奇思妙想，使用SVG实现各类图形

圆形
SVG多边形 hover、active 可变换效果
SVG多边形自由切换动画 SVG动画的前提是，确定最终形状的点的数目，必须和初始形状的点的数目一样
气泡对话框
Close icon
star
triangle2rect clip-path 图形
使用 SVG PATH 绘制的矩形 使用审查元素看看 html 结构，绘画内容在 svg 标签内
使用 SVG PATH 绘制平滑曲线 使用审查元素看看 html 结构，绘画内容在 svg 标签内 本曲线使用二次贝塞尔曲线生成
使用 SVG PATH 绘制平滑曲线 使用审查元素看看 html 结构，绘画内容在 svg 标签内 本曲线使用三次贝塞尔曲线生成
使用 SVG PATH 绘制平滑曲线，用于文字效果 使用审查元素看看 html 结构，绘画内容在 svg 标签内 可以让文字跟随 SVG 路径做出各种形状
这是一段随着path路径绘制的文字 这是另一段随path路径绘制的文字
使用 SVG 绘制的文字阴影效果 使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内 运用了大量 SVG 滤镜
SVG filter & mask
使用 SVG 绘制的文字故障效果 使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内 运用了大量 SVG 滤镜
Amazing SVG
使用 SVG 绘制的文字在水下的效果（textUnderWater） 使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内 运用了大量 SVG 滤镜
textUnderWater
使用 SVG stroke 虚线效果，绘制文字边框动画 使用审查元素看看 html 结构，绘画内容在 svg 标签内 改变 SVG 元素的虚线效果生成补间动画
HOVER ME
使用 SVG stroke 虚线效果，绘制的线条动画 使用审查元素看看 html 结构，绘画内容在 svg 标签内
使用 SVG stroke 虚线效果，绘制的线条动画 绘画内容在 svg 标签内（刷新查看动画）
使用 SVG stroke 虚线效果，绘制 loading 图 使用审查元素看看 html 结构，绘画内容在 svg 标签内 改变 SVG 元素的虚线效果生成补间动画
使用 SVG PATH 绘制饼图 使用审查元素看看 html 结构，绘画内容在 svg 标签内 点击饼图查看动画过渡效果！
75%
使用 SVG 绘制百分比图 使用审查元素看看 html 结构，绘画内容在 svg 标签内 使用了 SVG 动画 animate
50.0%
使用 SVG 绘制可调节数值百分比图 使用审查元素看看 html 结构，绘画内容在 svg 标签内 使用原生JS控制svg百分比，并生成动画，刷新页面观看动画
50.0%
使用 SVG 绘制莲花图 使用审查元素看看 html 结构，绘画内容在 svg 标签内
使用 SVG 绘制风车 使用审查元素看看 html 结构，绘画内容在 svg 标签内
使用 SVG 绘制 360 极速浏览器图标 使用审查元素看看 html 结构，绘画内容在 svg 标签内
d
因部分图案使用 clip-path，兼容性不佳，建议使用高版本 Chrome 内核浏览器观看。