«Зірки і CSS-Doodle» – генеративна графіка

:doodle { @grid: 33 / 100vmax; } :after { animation: star @r(7s, 12s) infinite alternate; content: \2605; color: hsla(@r(174, 286), @r(100%, 77%), @r(100%, 46%), @r(0, .9)); font-size: @r(3vmin); filter: blur(@r(0, 5px)); position: relative; transition: .3s linear; } @keyframes star { 0% { transform: rotate(@r(0deg, 360deg)) scale(@r(1.3, .25)) translate(@r(-25vmin, 15vmin), @r(-25vmin, 15vmin)); } 100% { transform: rotate(@r(0deg, 360deg)) scale(@r(.25, 1.3)) translate(@r(-5vmin, 5vmin), @r(-5vmin, 5vmin)); } }

Exp: Star Animation CSS-DOODLE

Експеримент із генеративною графікою на основі CSS-Doodle

Цей візуальний ефект створено за допомогою HTML, CSS, JavaScript і CSS-Doodle як приклад генеративного підходу у цифровій графіці. Фон складається з м’якого градієнта, поверх якого анімовано випадкові зірки — вони блимають і рухаються, створюючи відчуття глибини та легкості. Ефект демонструє, як сучасний код може працювати не лише функціонально, а й емоційно — формуючи атмосферу тепла, натхнення та візуальної виразності.

Example code in CodePen →