Patterns & graphics

Họa tiết, divider, glow — tất cả SVG/CSS tinh giản. Tổng dung lượng < 4KB. Tái dùng được như utility class. Không ảnh hưởng Core Web Vitals.

5 GROUP · ~20 ASSET · 0 IMAGE FILE
SOITAROT.VN · 2026
// PERF
0 KBImage files (PNG/JPG)
~4 KBTổng SVG inline
~1 KBCSS utility
100msRender budget (paint pass)
01

Dot patterns

Họa tiết chấm gợi sao xa, làm texture nền section. Dùng CSS radial-gradient tileable — zero asset weight, GPU-cached.

SECTION 01 / 05
DOT · CSS
Sparse · 32pxFOR HERO BG
Thưa nhất — đặt làm nền hero hoặc section lớn, gợi không gian.
// CSS · click to copybackground-color: #0F1B3D; background-image: radial-gradient(circle, rgba(248,244,227,0.10) 1px, transparent 1.2px); background-size: 32px 32px;
Medium · 22pxFOR CARD BG
Density vừa phải — texture cho card lớn hoặc panel.
// CSSbackground-color: #0F1B3D; background-image: radial-gradient(circle, rgba(248,244,227,0.12) 1px, transparent 1.4px); background-size: 22px 22px;
Dense · 14pxFOR SMALL AREA
Dày — chỉ dùng cho vùng nhỏ (badge, chip, divider band).
// CSSbackground-color: #0F1B3D; background-image: radial-gradient(circle, rgba(248,244,227,0.10) 1px, transparent 1.4px); background-size: 14px 14px;
Offset · 2-layer goldSIGNATURE
2 layer chồng nhau — chấm vàng to 48px + chấm ivory nhỏ 24px lệch nửa ô. Chữ ký cosmic của SoiTarot.
// CSS · 2 layerbackground-color: #0F1B3D; background-image: radial-gradient(circle, rgba(212,165,116,0.18) 1px, transparent 1.4px), radial-gradient(circle, rgba(248,244,227,0.08) 1px, transparent 1.4px); background-size: 48px 48px, 24px 24px; background-position: 0 0, 12px 12px;
02

Constellation lines

Cụm điểm sao nối bằng đường mảnh — trang trí góc, hero corner accent, decorative separator. 6 cluster — chọn theo bố cục.

SECTION 02 / 05
CONSTELLATION · SVG
Triangle cluster3 STAR
Hero corner accent. Tam giác bất đối xứng với 2 star phụ rải bên trong.
// SVG<svg viewBox="0 0 100 100"> <line ... stroke-dasharray="2 3" stroke="#D4A574"/> <circle cx="20" cy="30" r="2.5" fill="#D4A574"/> ... </svg>
Big Dipper7 STAR
Chòm Bắc Đẩu cách điệu — long horizontal. Lavender variant cho section phụ.
// SVG · Big Dipper<svg viewBox="0 0 120 80"> <path d="M10 60 L26 68 L42 56 L58 50 L72 36 L88 28 L98 14" stroke="#B8A8D9" opacity="0.5" stroke-dasharray="2 3"/> <circle cx="..." fill="#B8A8D9"/> × 7 </svg>
Cross asterism5 STAR
Đối xứng — cho ornament chính giữa section, hoặc decoration footer.
// SVG<svg viewBox="0 0 100 100"> <line x1="50" y1="14" x2="50" y2="86" ...> <line x1="20" y1="50" x2="80" y2="50" ...> <circle .../> × 5 </svg>
Loose flow4 STAR
Đường cong quadratic. Cho separator có chuyển động nhẹ.
// SVG<svg viewBox="0 0 120 80"> <path d="M16 22 Q40 50 64 28 T108 56" ... fill="none"/> <circle .../> × 4 </svg>
Diamond4 STAR
Hình kim cương đối xứng + chấm lavender giữa — section divider có "trọng tâm".
// SVG<svg viewBox="0 0 100 100"> <path d="M50 14 L80 50 L50 86 L20 50 Z" ... fill="none"/> <circle .../> × 5 </svg>
Twinkling cluster · animatedANIMATED
Twinkle nhẹ — opacity animation 2.5s. Chỉ dùng ở hero / above-the-fold để không tốn CPU lúc cuộn.
// CSS@keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .twinkle circle { animation: twinkle 2.5s ease-in-out infinite; } .twinkle .t2 { animation-delay: 0.6s; } /* ... stagger từng circle ... */
03

Starfield

Trường sao rải rác (SVG inline). 60-80 chấm với 3 size + 1 vài glow. Cho hero background. Tĩnh cho SEO landing; có thể opt-in animate ở homepage interactive.

SECTION 03 / 05
STARFIELD · SVG
Static · light densitySEO-SAFE
Phiên bản tĩnh — render 1 lần, zero JS, zero animation. Dùng cho mọi trang SEO.
// SVG · static<svg viewBox="0 0 400 280" preserveAspectRatio="xMidYMid slice"> <g fill="#F8F4E3"> <circle cx="..." cy="..." r="0.6" opacity="0.55"/> <!-- ~30 ivory stars · r=0.5..1.4 · opacity=0.4..1 --> </g> <g fill="#D4A574"> <circle cx="120" cy="60" r="1.6" opacity="0.9"/> <!-- 3-4 accent gold stars to nhỉnh --> </g> </svg>
Animated · twinkleHERO ONLY
Twinkle 6 nhóm stagger 0.6s. Chỉ dùng hero / above-fold. Tránh dùng full-page — sẽ tốn CPU khi scroll.
// CSS@keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .twinkle .t1 { animation: twinkle 2.5s ease-in-out infinite; } .twinkle .t2 { animation: twinkle 2.5s ease-in-out infinite 0.6s; } .twinkle .t3 { animation: twinkle 2.5s ease-in-out infinite 1.2s; } /* stagger ~6 nhóm — chỉ 30% stars animate, 70% tĩnh */
04

Cosmic dividers

5 kiểu phân cách section — từ tối giản nhất (line + dot) đến ornate nhất (4-point diamond).

SECTION 04 / 05
DIVIDER · CSS / SVG
Line + glowing dotDEFAULT
Default cho mọi section separator. Glow dot tự nhiên dẫn mắt.
// HTML + inline CSS<div style="display:flex;align-items:center;gap:18px;"> <div style="flex:1;height:1px; background:rgba(212,165,116,0.35);"></div> <div style="width:6px;height:6px;border-radius:50%; background:#D4A574;box-shadow:0 0 10px #D4A574;"></div> <div style="flex:1;height:1px; background:rgba(212,165,116,0.35);"></div> </div>
Gradient fadeQUIET
Đơn nhất — dùng giữa các content block nhẹ, không cần "ngắt mạnh".
">// HTML <hr><hr style=" border: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(212,165,116,0.5) 50%, transparent 100%); "/>
Sparkle motifDECORATIVE
4-point sparkle ở giữa — gắn với chữ ký brand. Dùng giữa section quan trọng.
// HTML + inline SVG<div style="display:flex;align-items:center;gap:14px;"> <div style="flex:1;height:1px; background:rgba(248,244,227,0.10);"></div> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#D4A574" stroke-width="1.2" stroke-linecap="round"> <path d="M12 2.5 L13 11 L21.5 12 L13 13 L12 21.5 L11 13 L2.5 12 L11 11 Z"/> </svg> <div style="flex:1;height:1px; background:rgba(248,244,227,0.10);"></div> </div>
Double thinEDITORIAL
2 line song song (1 đậm, 1 mờ 60% rộng) — feel editorial / magazine.
// HTML + inline CSS<div style="display:flex;flex-direction:column;gap:4px;"> <div style="height:1px; background:rgba(212,165,116,0.4);"></div> <div style="height:1px;width:60%;margin:0 auto; background:rgba(212,165,116,0.18);"></div> </div>
Diamond bulletSECTION MAJOR
Decorative ornate — chỉ dùng ngắt section "lớn" (chuyển chương). Hai diamond outline + 1 line vàng đậm ở giữa.
// HTML + inline CSS<div style="display:flex;align-items:center; gap:14px;justify-content:center;"> <div style="width:60px;height:1px; background:rgba(212,165,116,0.3);"></div> <div style="width:8px;height:8px; border:1px solid #D4A574; transform:rotate(45deg);"></div> <div style="width:80px;height:1px;background:#D4A574;"></div> <div style="width:8px;height:8px; border:1px solid #D4A574; transform:rotate(45deg);"></div> <div style="width:60px;height:1px; background:rgba(212,165,116,0.3);"></div> </div>
05

Glow & aura

3 cách làm halo bằng box-shadow hoặc radial-gradient overlay — đều GPU-compositable, không trigger layout, miễn phí về perf.

SECTION 05 / 05
GLOW · CSS
Box-shadow goldCTA · BUTTON
Rút lá bài →
Box-shadow blur 32px, gold 35%. Cho CTA primary, hover state.
// CSSbox-shadow: 0 0 32px rgba(212,165,116,0.35);
Box-shadow lavenderDECORATIVE
trực giác
Glow tím — cho element có "Tarot" italic, pupil, decorative star.
// CSSbox-shadow: 0 0 32px rgba(184,168,217,0.30);
Radial aura overlayCARD WRAPPER
Lá bài hôm nay
Pseudo-element ::before mở rộng -40px, radial gradient từ gold 18% → trong suốt. Cho card spotlight.
// CSS · pseudo overlay.card { position: relative; } .card::before { content: ''; position: absolute; inset: -40px; background: radial-gradient(circle, rgba(212,165,116,0.18) 0%, transparent 60%); pointer-events: none; z-index: 0; } .card > * { position: relative; z-index: 1; }
// PERFORMANCE NOTES
06

Layered demo

Tất cả combo lại: dot sparse + starfield + gold aura + sparkle divider. Hero pattern thực tế dùng trên homepage.

DEMO · COMBINED
HERO RECIPE

Soi mình qua những lá bài

Hero recipe · dot + starfield + aura + sparkle divider
// HERO RECIPE · CSS · click to copy
.hero { position: relative; overflow: hidden; background: #0F1B3D; background-image: radial-gradient(circle, rgba(248,244,227,0.06) 1px, transparent 1.4px); background-size: 28px 28px; } .hero::after { content: ''; position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(212,165,116,0.22) 0%, transparent 65%); pointer-events: none; } /* + inline SVG starfield + sparkle divider */