/
webdev
/
Smiley-face-preloader
Обзор
Документация
Войти
/
webdev
/
Smiley-face-preloader
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
index.html
42 строки
2 KB
Evgeny
Add files via upload
13 июл 2023, 23:08
Не верифицирован
13 июл 2023, 23:08
ef9cf35
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smiley face preloader</title> <link rel="stylesheet" href="style.css"> </head> <body> <svg role="img" aria-label="Smiley face preloader, eye blinks, rotate clckwise" class="smiley" viewBox="0 0 384 384" width="128px" height="128px"> <defs> <clipPath id="smiley-eyes"> <circle class="smiley__eye1" cx="64" cy="64" r="8" transform="rotate(-40,64,64) translate(0,-56)" /> <circle class="smiley__eye2" cx="64" cy="64" r="8" transform="rotate(40,64,64) translate(0,-56)" /> </clipPath> <linearGradient id="smiley-grad" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#000" /> <stop offset="100%" stop-color="#fff" /> </linearGradient> <mask id="smiley-mask"> <rect x="0" y="0" width="128" height="128" fill="url(#smiley-grad)" /> </mask> </defs> <g stroke-linecap="round" stroke-width="12" stroke-dasharray="175.93 351.86"> <g> <rect fill="hsl(193,90%,50%)" width="128" height="64" clip-path="url(#smiley-eyes)" /> <g fill="none" stroke="hsl(193,90%,50%)"> <circle class="smiley__mouth1" cx="64" cy="64" r="56" transform="rotate(180,64,64)" /> <circle class="smiley__mouth2" cx="64" cy="64" r="56" transform="rotate(0,64,64)" /> </g> </g> <g mask="url(#smiley-mask)"> <rect fill="hsl(223,90%,50%)" width="128" height="64" clip-path="url(#smiley-eyes)" /> <g fill="none" stroke="hsl(223,90%,50%)"> <circle class="smiley__mouth1" cx="64" cy="64" r="56" transform="rotate(180,64,64)" /> <circle class="smiley__mouth2" cx="64" cy="64" r="56" transform="rotate(0,64,64)" /> </g> </g> </g> </svg> </body> </html>