SVG Pattern Generator - Tạo SVG Pattern Background

Tính năng nổi bật

• Tạo dots pattern (circles)
• Tạo stripes pattern (vertical lines)
• Tạo grid pattern (checkerboard)
• Tạo waves pattern (curved lines)
• Customize 2 colors
• Adjust size (5-100px)
• Adjust spacing (0-50px)
• Adjust opacity (0-1)
• Live preview realtime
• Copy SVG code
• Copy CSS background code
• Download SVG file
• Lightweight và scalable
• Miễn phí 100%
• Giao diện đơn giản

Tại sao dùng SVG Patterns?

SVG patterns có nhiều advantages so với image backgrounds: Scalable - không bị blur khi zoom, File size nhỏ (vài KB vs hàng trăm KB cho images), Có thể customize colors với CSS, Không cần HTTP request nếu inline trong CSS, Sharp trên mọi screen resolutions. SVG patterns tạo visual interest cho backgrounds mà không overwhelm content. Dots patterns cho subtle texture, stripes cho direction, grid cho structure, waves cho organic feel. Combine với gradients và colors để match brand identity. SVG patterns được dùng rộng rãi trong modern web design cho hero sections, cards, footers, và decorative elements.

Lợi ích khi sử dụng

• •Lightweight và fast loading
• •Scalable trên mọi resolutions
• •Customize colors dễ dàng
• •Không cần external images
• •Tạo visual interest
• •Professional appearance
• •SEO friendly (không ảnh hưởng page speed)
• •Miễn phí và dễ sử dụng

Cách sử dụng SVG Pattern Generator

1. 1Chọn Pattern Type (Dots, Stripes, Grid, Waves)
2. 2Chọn Color 1 (primary color)
3. 3Chọn Color 2 (secondary color - cho Grid pattern)
4. 4Adjust Size slider để thay đổi kích thước pattern
5. 5Adjust Spacing slider để thay đổi khoảng cách
6. 6Adjust Opacity slider để thay đổi độ trong suốt
7. 7Xem live preview ở bên phải
8. 8Click 'Copy SVG' để copy SVG code
9. 9Hoặc click 'Copy CSS' để copy background CSS
10. 10Hoặc click 'Download SVG' để tải file
11. 11Paste vào code của bạn

Cách sử dụng SVG Patterns trong CSS

Inline trong CSS: background-image: url('data:image/svg+xml,...'). Không cần external file, tất cả trong CSS. External file: background-image: url('pattern.svg'). Tốt cho reuse across pages. Với background-size: Control pattern repeat size. Ví dụ: background-size: 50px 50px; để pattern lớn hơn. Với background-repeat: repeat (default), repeat-x, repeat-y, no-repeat. Combine với background-color: Pattern overlay trên solid color. Ví dụ: background-color: #1e293b; background-image: url(...); để pattern trên dark background. Với opacity: Adjust trong SVG hoặc dùng opacity property trên element.

Pattern Design Tips

Contrast: Dùng colors với enough contrast nhưng không quá harsh. Subtle patterns (low opacity) work best cho backgrounds. Size: Small patterns (10-20px) cho subtle texture. Large patterns (40-100px) cho bold statements. Spacing: More spacing cho airy feel. Less spacing cho dense texture. Color Harmony: Dùng colors từ cùng palette. Monochromatic (shades của 1 color) cho cohesive look. Analogous colors (next to each other on color wheel) cho harmony. Context: Dots cho modern, minimal. Stripes cho direction, energy. Grid cho structure, organization. Waves cho organic, flowing. Match pattern với brand personality.

Advanced Techniques

Layering: Stack multiple patterns với different opacities. Tạo complex textures. Animation: Animate background-position cho moving patterns. Ví dụ: @keyframes slide { to { background-position: 100px 100px; } }. Gradients: Combine patterns với linear/radial gradients. Pattern overlay trên gradient background. Blend Modes: Dùng mix-blend-mode cho interesting effects. Ví dụ: mix-blend-mode: multiply; overlay pattern lên images. Responsive: Adjust pattern size với media queries. Smaller patterns cho mobile. SVG Filters: Add blur, noise, hoặc other effects trong SVG. Tạo unique textures. Accessibility: Ensure patterns không interfere với text readability. Use sufficient contrast. Provide solid background fallback.

4 Pattern Type có sẵn: khác nhau như thế nào

Dots (circles): tool vẽ một <circle> có bán kính bằng nửa Size, lặp lại theo tile hình vuông kích thước Size + Spacing. Phù hợp cho texture mềm, tối giản, thường dùng trên card, section giới thiệu. Stripes (lines): vẽ một <rect> chiều rộng bằng Size, cao bằng cả tile, tạo hiệu ứng sọc dọc lặp lại theo chiều ngang - hợp cho background có tính chuyển động thị giác hoặc chia section. Grid (checkerboard): vẽ 2 <rect> ở 2 góc chéo nhau với Color 1 và Color 2, tạo hiệu ứng bàn cờ khi lặp lại - hợp cho phong cách structured, kỹ thuật. Waves (curves): vẽ một <path> dạng đường cong Bezier (lệnh Q và T) mô phỏng sóng nhẹ, chỉ dùng Color 1 làm stroke - hợp cho phong cách organic, mềm mại. Lưu ý: Color 2 chỉ có tác dụng với Grid pattern, ở 3 loại còn lại input Color 2 bị disabled vì code generatePattern() không dùng đến biến color2 cho Dots/Stripes/Waves.

Cách kích thước tile pattern được tính (Size + Spacing)

Mỗi pattern được xuất ra dưới dạng một ô SVG nhỏ (tile) có chiều rộng và chiều cao bằng nhau, bằng tổng của Size và Spacing (total = size + spacing). Khi CSS lặp lại (background-repeat: repeat) tile này theo cả 2 chiều, ta có được pattern liên tục. Size quyết định kích thước hình vẽ chính (đường kính dot, độ rộng stripe, cạnh ô vuông grid), còn Spacing là khoảng trống thêm vào giữa các lần lặp. Size nhỏ + Spacing nhỏ tạo texture dày đặc; Size lớn + Spacing lớn tạo pattern thưa, rõ từng hình. Vì công thức là cộng đơn giản (không phải tỷ lệ phần trăm), tăng Spacing luôn làm tile lớn hơn chứ không làm hình vẽ nhỏ lại.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• svg background pattern
• repeating pattern css
• svg texture
• background pattern generator
• css pattern
• svg dots pattern
• svg stripes
• geometric pattern
• decorative background
• svg pattern design
• svg grid pattern
• svg waves pattern
• tạo pattern svg online
• background image svg
• svg pattern css background
• tile pattern generator
• data uri svg pattern
• svg pattern miễn phí