图案生成器

图案类型

基础设置

颜色设置

图案详情

预设图案

图案参数

.pattern-background {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%26lt%3Bsvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%26gt%3B%26lt%3Bcircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%233b82f6%22%20transform%3D%22rotate(0%2020%2020)%22%20%2F%26gt%3B%26lt%3B%2Fsvg%26gt%3B");
  background-repeat: repeat;
  background-size: 50px 50px;
}

/* 简化版本 */
.pattern-simple {
  background: #ffffff url("data:image/svg+xml,%3Csvg width='50' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='5' fill='#3b82f6' transform='rotate(0 20 20)'/%3E%3C/svg%3E") repeat;
}

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="5" fill="#3b82f6" transform="rotate(0 20 20)" /></svg>

导出选项