Home
Tips

Biểu tượng các sự kiện bằng SVG

Đỗ Thu Hoài

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ới
Và 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

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>

About the author

Đỗ Thu Hoài
Ko biết để gì cho hợp lý! https://www.threads.com/@dwo_th

8 comments

  1. Anh Trai Nắng
    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 😁
  2. A Đê Min
    Demo 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ứ 😁
  3. Anh Trai Nắng
    Halloween tui có con dơi kk 🤣
  4. A Đê Min
    Thấy con ma đen xì mà, đâu giống con dơi 😁
  5. Anh Trai Nắng
    tìm svg ít quá, ko có cái nào đẹp lắm
  6. A Đê Min
    Tìm làm gì vậy? Bảo CHAT GPT làm luôn cho nhanh 😂
  7. Anh Trai Nắng
    mới tìm được svg cái vớ Noel hơi bị xịn nha 😀
  8. A Đê Min
    Nhìn đẹp nhỉ? Nhưng Noel giờ hơi sớm 20-11 đã 🤣