SVG 圆点图案生成器

创建可重复平铺的 SVG 圆点图案,间距、半径和颜色均可自定义,可下载,也可直接复制为 CSS 背景。100% 在您的浏览器中本地生成。

下载 SVG

工作原理

这里的可平铺圆点图案由一个正方形的 SVG 小图块构成,图块中央只有一个圆点:把这个图块在背景的宽度和高度方向上重复铺开,图案便能无缝衔接。调整间距可以让圆点更密或更疏,调整半径则可以放大或缩小圆点。

如何把这个图案用作我网站的背景?

点击「复制为 CSS」,即可获得以 data URI 编码并已启用重复平铺的 background-image 属性,可直接粘贴到您的样式表中,无需另外托管图片文件。

下载的 SVG 可以无损缩放吗?

可以。SVG 是矢量格式,无论显示或打印的尺寸多大,图案图块都始终保持清晰锐利;而位图(PNG 或 JPEG)在大幅放大后会变得模糊。

SVG 完全在您的浏览器中生成和拼装,不会调用任何外部服务器。