'Bunga Rukun Negara'

Teks Rukun Negara

BAHAWASANYA NEGARA KITA MALAYSIA mendukung cita-cita hendak:

Mencapai perpaduan yang lebih erat dalam kalangan seluruh masyarakatnya;

Memelihara cara hidup demokratik;

Mencipta satu masyarakat yang adil di mana kemakmuran negara akan dapat dinikmati secara adil dan saksama;

Membentuk satu sikap yang liberal terhadap tradisi kebudayaan yang kaya dengan berbagai-bagai corak, dan

Membina satu masyarakat progresif yang akan menggunakan sains dan teknologi moden.

MAKA KAMI, rakyat Malaysia, berikrar akan menumpukan seluruh tenaga dan usaha kami untuk mencapai cita-cita tersebut berdasarkan atas prinsip-prinsip yang berikut: (Klik kelopak bunga putih)

Pertama (1)

KEPERCAYAAN KEPADA TUHAN

Kedua (2)

KESETIAAN KEPADA RAJA DAN NEGARA

Ketiga (3)

KELUHURAN PERLEMBAGAAN

Keempat (4)

KEDAULATAN UNDANG-UNDANG

Kelima (5)

KESOPANAN DAN KESUSILAAN

'Bunga Rukun Negara'

(Paparan terbaik, di Chrome, Edge)

<div class="labu">
    <fieldset>
<input type="color" id="color-top" value="#ffffff"/>
<input type="color" id="color-bot" value="#808000"/>
</fieldset>
<div class="flower">
<div class="leaves">
<div class="leaf">
<article>
<h2 style="font: 16px Georgia;">Pertama (1)</h2>
KEPERCAYAAN KEPADA TUHAN
</article>
</div>
<div class="leaf"></div>
<div class="leaf">
<article>
<h2 style="font: 16px Georgia;">Kedua (2)</h2>
KESETIAAN KEPADA RAJA DAN NEGARA
</article>
</div>
<div class="leaf"></div>
<div class="leaf">
<article>
<h2 style="font: 16px Georgia;">Ketiga (3)</h2>
KELUHURAN PERLEMBAGAAN
</article>
</div>
<div class="leaf"></div>
<div class="leaf">
<article>
<h2 style="font: 16px Georgia;">Keempat (4)</h2>
KEDAULATAN UNDANG-UNDANG
</article>
</div>
<div class="leaf"></div>
<div class="leaf">
<article>
<h2 style="font: 16px Georgia;">Kelima (5)</h2>
KESOPANAN DAN KESUSILAAN
</article>
</div>
<div class="leaf"></div>
</div>
<button>
<svg viewBox="0 0 448 512" width="100" title="plus">
  <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />
</svg>
</button>
</div>
</div>
<style>
  .labu *,
  .labu *:before,
  .labu *:after {
  box-sizing: inherit;
  background-repeat: no-repeat;
}
  button {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
}
  fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
  .labu {
  display: grid;
  place-items: center;
  margin: 0;
  height: 68vh;
  font: 600 6vmin Arial;
}
  fieldset {
  padding: 1.5rem;
  position: absolute;
  bottom: 0;
  left: 1.5em;
  width: 20%;
  z-index: 1;
  display: flex;
  gap: 1rem;
}
  input[type=color] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 2rem;
  height: 2rem;
  border: 2px solid white;
  border-radius: 50%;
  padding: 0;
}
  input::-webkit-color-swatch-wrapper {
  padding: 0;
}
input::-webkit-color-swatch {
  border-radius: 50%;
}
.flower {
  --leaf-width: 25vmin;
  --leaf-height: 25vmin;
  --leaf-index: 0;
  --leaf-total: 10;
  --leaf-color-top: white;
  --leaf-color-bot: olive;
  --center-size: 14vmin;
  --leaf-open-width: 90vmin;
  --leaf-open-height: 90vmin;
  position: relative;
  top: 0;
  left: 0;
  transition: filter 1s ease-in-out, scale 1s ease-in-out;
  filter: drop-shadow(0 0 4rem rgba(0, 0, 0, 0.5));
  color: var(--text-color);
}
.flower button {
  width: var(--center-size);
  height: var(--center-size);
  background: orange;
  position: absolute;
  top: calc(50% - var(--center-size) / 2);
  left: calc(50% - var(--center-size) / 2);
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.7);
  background-image: radial-gradient(circle at 75% 35%, gold, 40%, orangered);
  color: transparent;
  transition: 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.flower button svg {
  display: block;
  width: 80%;
  rotate: 45deg;
  scale: 0;
  transition: 0.1s;
}
.flower:hover {
  scale: 1.1;
  filter: drop-shadow(0 4rem 2rem rgba(0, 0, 0, 0.5));
}
.leaves {
  display: grid;
  width: 0;
  height: 0;
  rotate: calc(var(--leaves-rotation, 0) * 1turn);
}
  .leaves > * {
  grid-row: 1;
  grid-column: 1;
}
.leaf {
  --color-back: var(--leaf-color-bot);
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: var(--leaf-width);
  height: var(--leaf-height);
  background: var(--color-back);
  border-radius: 76% 24% 100% 0%/100% 24% 76% 0%;
  transform-origin: bottom left;
  rotate: calc(var(--leaf-index) / var(--leaf-total) * 1turn);
  translate: 0 -100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(0.375turn, transparent 50%, rgba(0, 0, 0, 0.05) 50%), linear-gradient(calc(var(--leaf-index) / var(--leaf-total) * -1turn), rgba(0, 0, 0, 0.25), transparent);
  overflow: hidden;
}
.leaf:nth-of-type(odd) {
  --color-back: var(--leaf-color-top);
  z-index: 1;
  cursor: pointer;
}
.leaf:nth-of-type(1) {
  --leaf-index: 1;
}
.leaf:nth-of-type(2) {
  --leaf-index: 2;
}
.leaf:nth-of-type(3) {
  --leaf-index: 3;
}
.leaf:nth-of-type(4) {
  --leaf-index: 4;
}
.leaf:nth-of-type(5) {
  --leaf-index: 5;
}
.leaf:nth-of-type(6) {
  --leaf-index: 6;
}
.leaf:nth-of-type(7) {
  --leaf-index: 7;
}
.leaf:nth-of-type(8) {
  --leaf-index: 8;
}
.leaf:nth-of-type(9) {
  --leaf-index: 9;
}
.leaf:nth-of-type(10) {
  --leaf-index: 10;
}
.leaf:hover {
  scale: 1.2;
}
.leaf:hover + .leaf,
.leaf:has(+ .leaf:hover),
.leaf:first-of-type:hover ~ .leaf:last-of-type,
.leaf:first-of-type:has(~ .leaf:last-of-type:hover) {
  scale: 1.15;
}
.leaf:hover + .leaf + .leaf,
.leaf:has(+ .leaf + .leaf:hover),
.leaf:first-of-type:hover ~ .leaf:nth-last-of-type(2),
.leaf:first-of-type:has(~ .leaf:nth-last-of-type(2):hover) {
  scale: 1.1;
}
.leaf article {
  padding: calc(var(--center-size) / 2);
  align-self: flex-start;
  scale: 0;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.leaf.open {
  rotate: none;
  z-index: 2;
  border-radius: calc(var(--center-size) / 2);
  width: var(--leaf-open-width);
  height: var(--leaf-open-height);
  translate: -50% -50%;
  background-image: linear-gradient(0.375turn, transparent 50%, rgba(0, 0, 0, 0.025) 50%), linear-gradient(calc(var(--leaf-index) / var(--leaf-total) * -1turn), rgba(0, 0, 0, 0.15), transparent);
}
.flower:has(.open) {
  scale: none;
}
.flower:has(.open) .leaves {
  rotate: 0deg;
}
.leaf.open {
  scale: none;
  rotate: 0deg;
  cursor: default;
  transition: scale 0.3s ease-in-out, border-radius 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.leaf.open article {
  scale: none;
  rotate: none;
  opacity: 1;
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.flower:has(.open) button {
  scale: 0.5;
  transition-delay: 0.3s;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  translate: calc((var(--leaf-open-width) - var(--center-size)) / 2) calc((var(--leaf-open-height) - var(--center-size)) / -2);
}
.flower:has(.open) button svg {
  transition: 0.6s 0.6s;
  scale: none;
  rotate: 405deg;
}
  @media screen and (max-width: 600px) {
    .labu {
  height: 32vh;
  font: 600 8vmin Arial;
}
  }
</style>
<script>
  const root = document.documentElement
const flower = document.querySelector('.flower')
const center = flower.querySelector('button')
const rotation = document.getElementById('range-rotation')
const colorTop = document.getElementById('color-top')
const colorBot = document.getElementById('color-bot')
const leafList = document.querySelectorAll('.leaf:nth-of-type(odd)')
leafList.forEach(leaf => {
leaf.addEventListener('click', openLeafHandler)
})
function openLeafHandler(event) {
const leaf = event.currentTarget
leaf.classList.add('open')
}
center.addEventListener('click', closeLeafHandler)
function closeLeafHandler(event) {
const open = document.querySelector('.open')
if(open) open.classList.remove('open')
}
addEventListener('scroll', handleScroll)
function handleScroll(event) {
const docHeight = root.scrollHeight
const winHeight = innerHeight
const scrHeight = docHeight - winHeight
const percent = Math.round(pageYOffset) / scrHeight
root.style.setProperty('--leaves-rotation', percent)
}
flower.style.setProperty(`--leaf-color-top`, colorTop.value)
flower.style.setProperty(`--leaf-color-bot`, colorBot.value)
addEventListener('input', event => {
const input = event.target
if(input.type != 'color') return
flower.style.setProperty(`--leaf-${input.id}`, input.value)
if(input.id == 'color-top') {
flower.style.setProperty(`--text-color`, contrastColor(input.value))
}
})
function contrastColor(hex, light = '#ffffff', dark = '#000000') {
  const color = (hex.charAt(0) === '#') ? hex.substring(1, 7) : hex;
  const r = parseInt(color.substring(0, 2), 16); 
  const g = parseInt(color.substring(2, 4), 16); 
  const b = parseInt(color.substring(4, 6), 16); 
  const uicolors = [r / 255, g / 255, b / 255];
  const c = uicolors.map((col) => {
    if (col <= 0.03928) {
      return col / 12.92;
    }
    return Math.pow((col + 0.055) / 1.055, 2.4);
  });
  const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
  return (L > 0.179) ? dark : light;
}
</script>

Rujukan CSS serta JS di codepen.io/jakob-e/pen/YzBywrK