9.10.25 |
8
nhận xét
|
lượt xem
Giới thiệu
Nếu bạn đang áp dụng thủ thuật Gắn biểu tượng sự kiện cạnh logo bằng shortcode thì bài viết này mình sẽ cung cấp cho anh em một số biểu tượng cho các sự kiện sắp tớiVà mình sẽ update dần
🎄 Noel
<!-- Noel -->
<svg viewBox="0 0 300 360" width="260" role="img" aria-label="Cây thông Noel" xmlns="http://www.w3.org/2000/svg">
<style>
.tree{fill:#1f8a52}.shadow{fill:#166b3f;opacity:.65}.trunk{fill:#6b3f27}.star{fill:#f6d246}.garland{fill:none;stroke:#f7c6d0;stroke-width:6;stroke-linecap:round}.orn{stroke:#fff;stroke-width:3}.glow{filter:url(#glow)}@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.25}}.tw1{animation:twinkle 2.2s linear infinite}.tw2{animation:twinkle 2.8s linear infinite .5s}.tw3{animation:twinkle 3.3s linear infinite .8s}
</style>
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<ellipse cx="150" cy="330" rx="110" ry="14" fill="#e7edf4"/>
<g class="glow">
<polygon class="star" points="150,20 160,46 188,48 166,66 173,94 150,79 127,94 134,66 112,48 140,46"/>
<circle cx="150" cy="58" r="10" fill="#ffe88a" opacity=".7"/>
</g>
<g>
<path class="tree" d="M150 60 L225 140 L195 140 L260 210 L210 210 L280 290 L20 290 L90 210 L40 210 L105 140 L75 140 Z"/>
<path class="shadow" d="M150 60 L225 140 L205 140 L255 200 L215 200 L270 285 L150 285 Z"/>
</g>
<rect class="trunk" x="135" y="285" width="30" height="32" rx="5"/>
<path class="garland" d="M70 160 C120 190,180 190,230 160"/>
<path class="garland" d="M55 205 C115 235,185 235,245 205"/>
<path class="garland" d="M40 250 C110 278,190 278,260 250"/>
<g class="glow">
<circle class="orn" cx="105" cy="165" r="8" fill="#ff5b5b"/>
<circle class="orn" cx="190" cy="175" r="7" fill="#5bb3ff"/>
<circle class="orn" cx="135" cy="205" r="9" fill="#ffb84d"/>
<circle class="orn" cx="220" cy="215" r="8" fill="#b06bff"/>
<circle class="orn" cx="85" cy="225" r="7" fill="#41d17a"/>
<circle class="orn" cx="165" cy="250" r="8" fill="#ff6fb1"/>
<circle class="orn" cx="120" cy="255" r="7" fill="#ffd166"/>
<circle class="orn" cx="210" cy="255" r="7" fill="#6ee7ff"/>
</g>
</svg>
📘 Nhà Giáo Việt Nam 20-11
<!-- Nhà giáo Việt Nam 20-11 -->
<div class="svg-demo">
<svg viewBox="0 0 320 250" width="260" xmlns="http://www.w3.org/2000/svg">
<style>
.cover{fill:#2e7d94}
.spine{fill:url(#spineGrad)}
.num{font:700 54px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;text-anchor:middle;fill:url(#gold)}
</style>
<defs>
<linearGradient id="spineGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#cfd8df"/>
<stop offset=".5" stop-color="#aeb7bf"/>
<stop offset="1" stop-color="#cfd8df"/>
</linearGradient>
<linearGradient id="gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffe08a"/>
<stop offset=".5" stop-color="#f6c244"/>
<stop offset="1" stop-color="#e3a72a"/>
</linearGradient>
</defs>
<path class="cover" d="M50 50 C100 35,130 35,160 50 C190 35,220 35,270 50 L270 200 C220 185,190 185,160 200 C130 185,100 185,50 200 Z"/>
<path class="spine" d="M160 50 C162 90,162 160,160 200 C158 160,158 90,160 50 Z" opacity=".9"/>
<text class="num" x="112" y="130">20</text>
<text class="num" x="210" y="130">11</text>
</svg>
</div>
🟩 Tết Nguyên Đán
<!-- Tết Nguyên Đán -->
<svg viewBox="0 0 300 300" width="260" xmlns="http://www.w3.org/2000/svg">
<style>
.leaf{fill:url(#leafGrad)}
.rim{fill:none;stroke:#103f2b;stroke-opacity:.35;stroke-width:3}
.rope{fill:#e7e8b0}
.ropeLine{stroke:#cfd38a;stroke-width:2}
.knot{fill:#e7e8b0;stroke:#cfd38a;stroke-width:2}
</style>
<defs>
<radialGradient id="leafGrad" cx="50%" cy="40%" r="70%">
<stop offset="0" stop-color="#3ba566"/>
<stop offset="1" stop-color="#256f49"/>
</radialGradient>
<filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="b"/>
<feOffset dy="3" result="o"/>
<feMerge><feMergeNode in="o"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<path class="leaf" filter="url(#soft)" d="M52 30 H248 A22 22 0 0 1 270 52 V248 A22 22 0 0 1 248 270 H52 A22 22 0 0 1 30 248 V52 A22 22 0 0 1 52 30 Z"/>
<path class="rim" d="M52 30 H248 A22 22 0 0 1 270 52 V248 A22 22 0 0 1 248 270 H52 A22 22 0 0 1 30 248 V52 A22 22 0 0 1 52 30 Z"/>
<rect x="136" y="30" width="28" height="240" class="rope"/>
<rect x="30" y="136" width="240" height="28" class="rope"/>
<line x1="150" y1="30" x2="150" y2="270" class="ropeLine"/>
<line x1="30" y1="150" x2="270" y2="150" class="ropeLine"/>
<rect x="136" y="136" width="28" height="28" class="knot" rx="5"/>
</svg>
💮 Cành đào
<svg viewBox="0 0 360 360" width="280" role="img" aria-label="Cành đào" xmlns="http://www.w3.org/2000/svg">
<style>
.branch{fill:none;stroke:#6a4633;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.twig{fill:none;stroke:#7a523d;stroke-width:5;stroke-linecap:round}
.petal{fill:url(#gPetal)}
.petal2{fill:url(#gPetal2)}
.center{fill:#f1b14f}
.dot{fill:#e98a3b}
.leaf{fill:url(#gLeaf)}
.bud{fill:#f6a3b3;stroke:#e47490;stroke-width:1.5}
</style>
<defs>
<radialGradient id="gPetal" cx="50%" cy="40%" r="70%">
<stop offset="0" stop-color="#ffd7e5"/>
<stop offset="1" stop-color="#ff9ec1"/>
</radialGradient>
<radialGradient id="gPetal2" cx="50%" cy="50%" r="70%">
<stop offset="0" stop-color="#ffe5ef"/>
<stop offset="1" stop-color="#ffb3cd"/>
</radialGradient>
<linearGradient id="gLeaf" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7ad382"/>
<stop offset="1" stop-color="#4caf60"/>
</linearGradient>
</defs>
<path class="branch" d="M30 260 C100 240, 150 220, 210 200 S320 160, 330 120"/>
<path class="twig" d="M160 220 C180 210, 195 198, 212 186"/>
<path class="twig" d="M210 200 C235 190, 258 176, 278 158"/>
<path class="twig" d="M120 240 C138 232, 152 224, 168 212"/>
<path class="twig" d="M250 176 C270 168, 292 150, 310 132"/>
<g transform="translate(155,214)">
<ellipse class="petal" cx="-10" cy="0" rx="14" ry="10" transform="rotate(-18)"/>
<ellipse class="petal" cx="10" cy="0" rx="14" ry="10" transform="rotate(18)"/>
<ellipse class="petal2" cx="0" cy="-10" rx="12" ry="9"/>
<ellipse class="petal2" cx="0" cy="10" rx="12" ry="9"/>
<circle class="center" cx="0" cy="0" r="4"/>
<circle class="dot" cx="2" cy="-4" r="1.6"/>
<circle class="dot" cx="-3" cy="3" r="1.4"/>
</g>
<g transform="translate(212,186) rotate(-8)">
<ellipse class="petal" cx="-10" cy="0" rx="14" ry="10" transform="rotate(-18)"/>
<ellipse class="petal" cx="10" cy="0" rx="14" ry="10" transform="rotate(18)"/>
<ellipse class="petal2" cx="0" cy="-10" rx="12" ry="9"/>
<ellipse class="petal2" cx="0" cy="10" rx="12" ry="9"/>
<circle class="center" cx="0" cy="0" r="4"/>
<circle class="dot" cx="-2" cy="-4" r="1.6"/>
<circle class="dot" cx="3" cy="3" r="1.4"/>
</g>
<g transform="translate(275,158) rotate(6)">
<ellipse class="petal" cx="-10" cy="0" rx="14" ry="10" transform="rotate(-18)"/>
<ellipse class="petal" cx="10" cy="0" rx="14" ry="10" transform="rotate(18)"/>
<ellipse class="petal2" cx="0" cy="-10" rx="12" ry="9"/>
<ellipse class="petal2" cx="0" cy="10" rx="12" ry="9"/>
<circle class="center" cx="0" cy="0" r="4"/>
<circle class="dot" cx="3" cy="-3" r="1.6"/>
<circle class="dot" cx="-3" cy="3" r="1.4"/>
</g>
<g transform="translate(126,238) rotate(-12)">
<ellipse class="petal2" cx="-9" cy="0" rx="11" ry="8" transform="rotate(-20)"/>
<ellipse class="petal2" cx="9" cy="0" rx="11" ry="8" transform="rotate(20)"/>
<ellipse class="petal" cx="0" cy="-9" rx="10" ry="8"/>
<ellipse class="petal" cx="0" cy="9" rx="10" ry="8"/>
<circle class="center" cx="0" cy="0" r="3.6"/>
</g>
<ellipse class="leaf" cx="190" cy="198" rx="10" ry="16" transform="rotate(-25 190 198)"/>
<ellipse class="leaf" cx="232" cy="178" rx="9" ry="14" transform="rotate(20 232 178)"/>
<ellipse class="leaf" cx="294" cy="136" rx="8" ry="12" transform="rotate(28 294 136)"/>
<ellipse class="leaf" cx="146" cy="228" rx="9" ry="14" transform="rotate(-10 146 228)"/>
<circle class="bud" cx="214" cy="186" r="4.2"/>
<circle class="bud" cx="260" cy="164" r="3.8"/>
<circle class="bud" cx="170" cy="214" r="3.8"/>
</svg>
👻 Halloween
<svg viewBox="0 0 360 360" width="280" role="img" aria-label="Bóng ma" xmlns="http://www.w3.org/2000/svg">
<style>
.body{fill:url(#gBody)}
.edge{fill:none;stroke:#ffffff;stroke-opacity:.6;stroke-width:3}
.shadow{fill:#000;opacity:.08}
.eye{fill:#1a1a1a}
.mouth{fill:#1a1a1a}
.blush{fill:#ff9db3;opacity:.5}
</style>
<defs>
<radialGradient id="gBody" cx="50%" cy="35%" r="70%">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#eaf1ff"/>
</radialGradient>
</defs>
<ellipse class="shadow" cx="180" cy="300" rx="90" ry="16"/>
<path class="body" d="
M180 60
C220 60, 260 88, 268 130
C274 162, 270 190, 292 212
C274 214, 264 228, 258 246
C248 234, 236 226, 224 240
C212 228, 198 226, 188 242
C176 228, 160 226, 148 242
C138 226, 124 228, 112 240
C100 226, 88 234, 78 246
C72 228, 62 214, 44 212
C66 190, 62 162, 68 130
C76 88, 120 60, 180 60 Z"/>
<path class="edge" d="
M188 64
C232 66, 262 92, 268 130
M92 104
C106 86, 140 70, 176 66"/>
<ellipse class="eye" cx="145" cy="150" rx="12" ry="16"/>
<ellipse class="eye" cx="215" cy="150" rx="12" ry="16"/>
<path class="mouth" d="M150 188 C166 206, 194 206, 210 188 C204 202, 196 210, 180 210 C164 210, 156 202, 150 188 Z"/>
<circle class="blush" cx="126" cy="178" r="8"/>
<circle class="blush" cx="234" cy="178" r="8"/>
</svg>
tết kiếm cái nhành mai, bông mai, bông đào gì á, để cái bánh chưng hết diện tích 😁
REPLY DELETEDemo phải để lớn cho mọi người dễ nhìn chứ đưa cạnh logo phải fix kích thước cho phù hợp chứ 😁
REPLY DELETEHalloween tui có con dơi kk 🤣
REPLY DELETEThấy con ma đen xì mà, đâu giống con dơi 😁
REPLY DELETEtìm svg ít quá, ko có cái nào đẹp lắm
REPLY DELETETìm làm gì vậy? Bảo CHAT GPT làm luôn cho nhanh 😂
REPLY DELETEmới tìm được svg cái vớ Noel hơi bị xịn nha 😀
REPLY DELETENhìn đẹp nhỉ? Nhưng Noel giờ hơi sớm 20-11 đã 🤣
REPLY DELETE