Developer copy kit

Malaysia corner ribbon

A self-contained, original Malaysian-flag corner detail for the top-right of any website. No image download or third-party dependency required.

Live preview

On Avante, the component is fixed at the viewport’s top right. Use the same SVG inside a positioned container when you need it to belong to one section or card instead.

Copy and paste

HTML + CSS

Paste this immediately after your opening <body> tag. It is decorative, so it stays hidden from screen readers.

<style>
.malaysia-corner-ribbon { position: fixed; top: 0; right: 0; z-index: 1000; width: clamp(144px, 15vw, 208px); pointer-events: none; animation: malaysia-flag-wave 3.8s ease-in-out infinite; transform-origin: top right; }
.malaysia-corner-ribbon svg { display: block; width: 100%; height: auto; }
@keyframes malaysia-flag-wave { 0%, 100% { transform: rotateY(0deg) skewY(0deg); } 30% { transform: rotateY(-4deg) skewY(-1.25deg); } 65% { transform: rotateY(3deg) skewY(1deg); } }
@media (prefers-reduced-motion: reduce) { .malaysia-corner-ribbon { animation: none; } }
</style>

<div class="malaysia-corner-ribbon" aria-hidden="true">
  <svg viewBox="0 0 420 280" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <rect width="420" height="280" fill="#fff" />
    <path d="M0 0H420V20H0zM0 40H420V60H0zM0 80H420V100H0zM0 120H420V140H0zM0 160H420V180H0zM0 200H420V220H0zM0 240H420V260H0z" fill="#D7193F" />
    <rect width="210" height="140" fill="#010066" />
    <circle cx="96" cy="70" r="48" fill="#FFCC00" />
    <circle cx="113" cy="56" r="43" fill="#010066" />
    <polygon points="154,36 159,52 172,41 166,58 183,54 169,65 185,70 168,75 182,88 165,82 171,100 157,88 153,105 148,88 134,100 140,82 123,88 137,75 120,70 137,65 123,54 140,58 134,41 147,52" fill="#FFCC00" />
  </svg>
</div>