Пример:
Если применять это решение в качестве иконки, например, для оформления заголовков или списков, то подключать SVG удобнее через JS. Подробнее об этом в теме: Варианты установки SVG иконки
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="chicken"> <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"> <rect width="256" height="256" fill="#FFF"/> <polygon points="215.8 128 178.7 157.3 171.9 204 128 186.5 84.1 204 77.3 157.3 40.3 128 77.3 98.8 84.1 52 128 69.5 171.9 52 178.7 98.8 " fill="#F5BB41"/> <polygon points="128 11 157.3 77.3 229.3 69.5 186.5 128 229.3 186.5 157.3 178.7 128 245 98.8 178.7 26.7 186.5 69.5 128 26.7 69.5 98.8 77.3 " fill="#FFCE55"/> <path d="M137.4 75.6c-1.4-15-2.4-19.4-3.8-23.5 -1.4-4.1-7.5-10.9-12.2-9.9 -4.7 1.1-7.8 9.1-8.3 12.3 -4.7-6.4-9.5-4.7-11.5-2.9 -2 1.7-6.4 7.8-2.4 13.6 -8.1 6.3-7.6 7.8-7.7 9.4 -0.2 1.6-0.6 4.4 7.5 7.3C107.2 84.8 137.4 75.6 137.4 75.6z" fill="#D8344B"/> <path d="M138.3 75.6c-0.6-6.1-1.1-12.2-2.3-18.1 -0.7-3.6-1.7-7.2-4.1-10.1 -2.9-3.6-7.4-7.5-12.2-5.4 -4.2 1.9-6.6 8.2-7.4 12.4 0.5-0.1 1-0.3 1.4-0.4 -2.9-3.6-6.8-6-11.3-3.9 -3.7 1.8-6.3 7.4-5.6 11.3 0.1 0.7 1.4 3.6 0.8 4 -1.3 1-2.5 2.1-3.7 3.3 -1.1 1.1-2.4 2.4-2.9 3.9 -0.7 1.9-0.6 4.2 0.6 5.9 2.2 3.1 7 4.6 10.6 4.9 4.5 0.3 9.3-0.6 13.7-1.5 7.3-1.4 14.6-3.3 21.8-5.4 1.1-0.3 0.6-2-0.5-1.7 -9.2 2.8-18.7 5.3-28.2 6.5 -2.4 0.3-4.9 0.5-7.4 0.3 -3.1-0.2-7.9-1.9-9.1-4.9 -1.8-4.5 4.7-8.7 7.4-10.8 0.3-0.2 0.3-0.7 0.1-1 -2.6-4.3-1.3-9.3 2.3-12.6 3.6-3.2 7.9 0 10.3 3 0.4 0.5 1.3 0.2 1.4-0.4 0.7-4 2.6-8.5 6-11 4.9-3.6 11.3 4.5 12.9 8.5 2.8 7.3 3.1 15.7 3.8 23.3C136.6 76.7 138.4 76.7 138.3 75.6z" fill="#000101"/> <path d="M165.2 185.1c5.4 0.9 24.2 5.4 26 7 1.9 1.6 5.5 6.1 9.2 1.8 3.6-4.3 4.3-6.3 5-8 0.7-1.7 0.7-5.9-1.3-6.4 -2-0.5-7.4 4.8-8.4 6.7 -8.1-4.7-25.2-11.7-27.8-12.4C165.4 173.1 165.2 185.1 165.2 185.1z" fill="#FFCF58"/> <path d="M165 186c6.6 1.1 13.2 2.8 19.6 4.7 2.4 0.7 5.1 1.2 7 3 1.8 1.7 4.9 4.2 7.6 2.4 4.3-2.9 9.1-10.2 7-15.7 -2.1-5.5-9.9 3.2-11.2 5.4 0.4-0.1 0.8-0.2 1.2-0.3 -8.4-4.9-17.7-8.8-26.8-12.1 -5.4-1.9-4.9 8.6-5 11.8 0 1.1 1.7 1.1 1.7 0 0-2.4 0.2-4.9 0.6-7.3 0.1-0.7 0.4-3.4 1.5-3.1 1.2 0.4 2.4 0.9 3.7 1.4 8 3.1 16 6.5 23.4 10.8 0.4 0.2 0.9 0.1 1.2-0.3 1.3-2.2 3.5-4.1 5.6-5.5 3.6-2.5 2.8 3.8 2 5.6 -1.2 2.7-3.9 7.8-7.1 8.1 -2.5 0.3-4.1-2.9-6.1-3.9 -3.7-1.9-8.1-2.7-12-3.7 -4.5-1.1-9-2.3-13.5-3C164.3 184.1 163.9 185.8 165 186z"/> <path d="M99.2 189.5c-5.5 4-17.6 14-19.5 16.1 -1.9 2.1-6.5 6.9-8.3 6.2 -1.8-0.7-4.1-7.7-4.5-9.9 -0.4-2.2-0.7-5.6 1.6-6.1 2.3-0.5 5.8 1.7 7.2 4.1 6.3-7.1 16.2-15.4 18.5-16.6C96.5 182 99.2 189.5 99.2 189.5z" fill="#FFCF57"/> <path d="M98.7 188.7c-6.7 4.9-13.6 10.1-19.5 16 -1.4 1.4-2.6 2.8-4 4.1 -0.9 0.9-2 1.7-3.2 2.1 -0.9 0.3-1.9-2.3-2.2-2.9 -0.9-2-1.7-4.2-2.1-6.4 -0.3-1.3-0.8-4.9 1.5-5.1 2.3-0.2 4.6 2.1 5.7 3.8 0.3 0.4 1 0.6 1.4 0.2 4.4-4.9 9.2-9.4 14.3-13.5 1.5-1.3 3.9-4.1 5.6-1.8 1 1.3 1.7 2.9 2.2 4.5 0.4 1 2 0.6 1.7-0.5 -1-2.7-3.2-8.7-6.9-6.3 -6.7 4.3-12.8 10.5-18.1 16.4 0.5 0.1 0.9 0.1 1.4 0.2 -2.7-4.1-10.5-7.5-10.7 0 -0.1 2.9 1.1 5.9 2.2 8.5 0.7 1.6 1.6 4.3 3.6 4.7 2.2 0.4 4.8-2.5 6.1-3.8 1.8-1.7 3.4-3.5 5.3-5.2 5.4-4.7 10.9-9.2 16.6-13.4C100.5 189.6 99.6 188.1 98.7 188.7z"/> <path d="M64.5 149.3c-6.4 1.6-15 4.7-17.6 6.2s-7.4 6.9 0 8.1c-12.9 5.1-11.4 12.8-10.8 14.5 0.6 1.7 4.1 4.7 9.3 2.5 -3.5 7.7-1.5 12.7 2.6 14 4 1.3 7.7-2.4 10.8-6.6 4.4-6.2 12.6-13.5 33.8 0.4 21.1 13.9 2.3-34.7 2.3-34.7L64.5 149.3z" fill="#D8344B"/> <path d="M64.3 148.4c-6.2 1.6-14.2 3.3-19.3 7.4 -4.1 3.3-3.6 7.5 1.7 8.6 0-0.6 0-1.1 0-1.7 -5.6 2.3-11.6 6.1-11.8 12.8 -0.2 5.8 6 7.6 10.7 5.8 -0.3-0.4-0.7-0.8-1-1.3 -2 4.6-3.8 12.7 2.5 15 6.6 2.5 10.6-4.9 14.2-9 3.4-3.8 7.9-5.2 12.9-4.8 8.2 0.8 14.1 6.5 21.4 9.6 7.4 3.2 8.3-5 7.7-10.3 -0.9-8.3-3.6-16.6-6.5-24.4 -0.3-0.9-0.7-1.9-1-2.8 -0.1-0.3-0.3-0.6-0.6-0.6 -10.1-1.4-20.2-2.9-30.3-4.3 -1.1-0.2-1.6 1.5-0.5 1.7 8.5 1.2 17 2.4 25.5 3.6 1.5 0.2 2.9 0.4 4.4 0.6 0.7 0.1-0.3-1.1 0.2 0.3 1.1 3 2.1 6 3.1 9 1.4 4.4 2.6 8.9 3.5 13.5 0.6 3.4 1.6 8 0 11.3 -2 4.2-9.4-1.8-11.3-3 -5.7-3.4-12.5-6.5-19.4-5.9 -4.2 0.4-7.8 2.6-10.5 5.7 -2.5 2.8-4.4 6.1-7.8 8 -3.1 1.8-6.2-0.3-7.2-3.2 -1-2.9 0.2-6.4 1.4-9.1 0.3-0.6-0.2-1.6-1-1.3 -4.5 1.7-9.1-0.2-8.5-5.2 0.7-5.2 6.1-8.3 10.5-10.1 0.7-0.3 0.9-1.5 0-1.7 -6.8-1.4-0.7-6.2 2.5-7.6 4.9-2.2 10-3.7 15.2-5.1C65.8 149.8 65.4 148.2 64.3 148.4z" fill="#000101"/> <path d="M197.6 125.8c6.2-8.1 4.4-16.7-1.7-16.7 -6.2 0-19.9 12.7-23.3 21 -0.2-2.1-2.3-11.1-5.1-20.2 1.5-3.2 2.3-6.5 2.3-10.1 0-16.7-18.3-30.2-40.8-30.2 -22.5 0-40.8 13.5-40.8 30.2 0 3.6 0.8 7 2.4 10.1 -1.4 0.2-2.3 0.4-2.4 0.5 -0.9 1.5-4 8.5-4.2 24 -1.4-8-8.6-9.7-14-13.9 -5.4-4.1-21.4-1.9-9.9 12.7 -12.2 5.1-13.9 14 0.6 17 -7.8 12.4-1.2 13.6 5.7 14 6.9 0.4 15.1-8.4 16-9.5 0.1 1.2-0.1 1.6-0.5 6.6 0 0 0 0 0 0.1 -0.2 1.5-0.4 2.9-0.4 4.5 0 19.8 22.4 35.9 49.9 35.9 24.2 0 44.4-12.4 49-28.9 0 0 0 0 0 0 1.6-4.3 2-14-0.6-25.4 2.3 6.9 12.9 4.6 18.4 3.9 5.5-0.7 12.2-10.7 1.8-12.5C217.5 128.8 207 121.4 197.6 125.8z" fill="#FFF"/> <path d="M199.1 126.7c2.9-4.1 5.7-10.3 3.2-15.3 -1.9-3.6-5.6-4.7-9.4-3.4 -4.5 1.5-8.5 5-11.9 8.2 -3.9 3.7-7.7 8.1-9.8 13 1.1 0.3 2.1 0.6 3.2 0.9 -0.3-2.5-0.9-5-1.5-7.4 -0.4-1.9-0.9-3.7-1.4-5.6 -0.4-1.5-2.5-5.9-1.9-7.3 2.7-6 2.7-12.9 0.3-19 -4.7-12.2-17.5-19.2-29.6-21.7 -14-2.9-29.7-0.3-41.2 8.3 -10.8 8-15.5 21.1-9.9 33.6 0.3-0.8 0.7-1.7 1-2.5 -3.8 0.6-4.4 3-5.4 6.4 -1.9 6.4-2.3 13.2-2.4 19.8 1.1-0.2 2.3-0.3 3.4-0.5 -1.2-6-5.5-9.1-10.5-12.1 -3.8-2.3-6.6-4.7-11.2-4.9 -3.4-0.1-7 1.1-8.8 4.1 -2.5 4.3 1 9.7 3.5 13 0.2-0.8 0.4-1.6 0.6-2.4 -4.6 2-10.3 5.4-10.5 11 -0.2 5.7 7.2 8.1 11.5 9.1 -0.3-0.8-0.7-1.7-1-2.5 -2 3.3-4.9 8-3.3 12.1 1.1 2.8 4.2 3.8 6.9 4.2 8.3 1.3 15.7-3.4 20.8-9.7 -1-0.4-2-0.8-3-1.2 0.2 2.3-0.2 5-0.6 7.3 -0.5 3.3-0.3 6.6 0.4 9.8 1.2 6.2 4.8 11.7 9.1 16.1 11 11.3 27.7 15.7 43 15.6 15.4-0.1 31.9-5.6 42.3-17.3 9.8-11 9.7-25.3 6.6-39.2 -1.1 0.3-2.2 0.6-3.3 0.9 1.7 4.3 5.3 5.8 9.7 6.1 3.8 0.3 9.3 0 12.8-1.6 3.2-1.5 6-4.5 6.5-8 0.6-4.2-3-6.4-6.6-7.2 0.1 1.1 0.3 2.1 0.4 3.2 4.3-2.6 12.8-8.2 9.4-14.4 -2.6-4.7-9.8-3.4-13.7-1.7 -2 0.9-0.3 3.9 1.7 3 2.4-1 7.1-2.1 9 0.5 2.5 3.4-6.3 8.5-8.2 9.6 -1.2 0.7-1.1 2.9 0.4 3.2 3 0.6 5.1 2 3.5 5.1 -1 2-3.1 3.6-5.3 4 -4.5 0.8-14.1 3-16.2-2.6 -0.8-2.1-3.8-1.3-3.3 0.9 1.6 7.3 2.7 15.4 1.1 22.8 -0.3 1.4-0.2 0.6-0.5 1.7 -0.4 1.4-0.9 2.8-1.5 4.1 -1.3 2.9-3.2 5.5-5.3 7.9 -9.7 10.9-25.2 15.3-39.3 15.6 -14.3 0.3-29.4-4-39.9-13.9 -4.4-4.1-7.5-9.3-8.8-15.2 -1.3-5.5 0.8-10.8 0.3-16.2 -0.1-1.3-1.9-2.5-3-1.2 -3.4 4.2-9.1 9.1-14.8 9 -2.1 0-5.2-0.2-6.8-1.6 -2.5-2.2 1.5-7.9 2.6-9.7 0.6-0.9 0-2.3-1-2.5 -2.9-0.7-9.6-2.2-9-6.4 0.6-3.8 5.7-6.1 8.8-7.5 0.8-0.3 1.2-1.7 0.6-2.4 -1.9-2.5-5.2-6.6-3.3-9.9 1.3-2.2 5.1-2.2 7.2-1.9 3 0.5 5.3 2.7 7.8 4.2 4.2 2.5 7.9 4.9 8.9 10 0.4 2 3.4 1.4 3.4-0.5 0.1-5.8 0.5-11.5 1.8-17.1 0.4-1.5 0.8-3 1.4-4.5 0.1-0.3 0.3-0.7 0.5-1 0.1-0.1 0.1-0.2 0.2-0.4 -0.5 0.9 0.8 0.2 1.4 0.1 1.2-0.2 1.4-1.6 1-2.5 -5.4-11.9 0.7-23.6 10.8-30.4 11-7.4 25.6-8.8 38.3-5.9 11.1 2.6 22.5 9.7 26 21.1 0.8 2.7 0.9 5.5 0.7 8.2 -0.3 3.4-2.7 6.2-1.7 9.5 1.8 5.9 3.9 12.2 4.6 18.4 0.2 1.5 2.5 2.7 3.2 0.9 3-6.9 9-12.8 15.1-17.1 2.3-1.6 5.7-4 8.5-2.6 5 2.4 0.4 11-1.6 13.7C194.8 126.8 197.8 128.5 199.1 126.7z"/> <path d="M197.6 125.8c6.2-8.1 4.4-16.7-1.7-16.7 -6.2 0-19.9 12.7-23.3 21 -0.2-2.1-2.3-11.1-5.1-20.2 1.5-3.2 2.3-6.5 2.3-10.1 0-16.7-18.3-30.2-40.8-30.2 -22.5 0-40.8 13.5-40.8 30.2 0 3.6 0.8 7 2.4 10.1 -1.4 0.2-2.3 0.4-2.4 0.5 -0.9 1.5-4 8.5-4.2 24 -1.4-8-8.6-9.7-14-13.9 -5.4-4.1-21.4-1.9-9.9 12.7 -12.2 5.1-13.9 14 0.6 17 -7.8 12.4-1.2 13.6 5.7 14 6.9 0.4 15.1-8.4 16-9.5 0.1 1.2-0.1 1.6-0.5 6.6 0 0 0 0 0 0.1 -0.2 1.5-0.4 2.9-0.4 4.5 0 19.8 22.4 35.9 49.9 35.9 24.2 0 44.4-12.4 49-28.9 0 0 0 0 0 0 1.6-4.3 2-14-0.6-25.4 2.3 6.9 12.9 4.6 18.4 3.9 5.5-0.7 12.2-10.7 1.8-12.5C217.5 128.8 207 121.4 197.6 125.8z" fill="#FFF"/> <path d="M198.3 126.2c2.7-3.8 5.6-9.8 3.2-14.4 -1.7-3.3-5-4.2-8.4-3 -4.4 1.5-8.2 4.9-11.5 8 -3.9 3.6-7.6 8-9.7 12.9 0.5 0.1 1.1 0.3 1.6 0.4 -0.3-2.4-0.9-4.8-1.5-7.2 -0.4-1.9-0.9-3.7-1.4-5.6 -0.5-1.9-2.6-6.1-1.8-8 2.6-5.8 2.5-12.4 0.2-18.3 -4.6-11.9-17.2-18.6-29-21.1 -13.7-2.9-29.2-0.3-40.5 8.2 -10.3 7.7-15 20.4-9.5 32.4 0.2-0.4 0.3-0.8 0.5-1.3 -3.5 0.5-3.8 2.6-4.8 5.8 -1.9 6.3-2.3 13.1-2.4 19.6 0.6-0.1 1.1-0.2 1.7-0.2 -1.2-5.8-5.3-8.7-10.1-11.6 -3.7-2.2-6.4-4.6-10.8-4.8 -3.1-0.1-6.4 1-8 3.7 -2.4 4 1.2 9.1 3.5 12.1 0.1-0.4 0.2-0.8 0.3-1.2 -4.3 1.9-9.9 5-10.1 10.3 -0.2 5.3 7 7.4 10.9 8.3 -0.2-0.4-0.3-0.8-0.5-1.3 -1.9 3.1-4.7 7.5-3.2 11.4 1 2.5 4 3.2 6.3 3.6 7.9 1.2 15.1-3.4 20-9.5 -0.5-0.2-1-0.4-1.5-0.6 0.2 2.4-0.3 5.2-0.6 7.5 -0.5 3.1-0.3 6.3 0.4 9.3 1.2 6 4.7 11.4 8.9 15.7 10.8 11.1 27.3 15.4 42.4 15.3 15.2-0.1 31.4-5.5 41.7-17 9.6-10.8 9.3-25 6.4-38.4 -0.6 0.2-1.1 0.3-1.7 0.5 1.5 3.9 4.9 5.2 8.8 5.4 3.6 0.3 9.1 0 12.4-1.5 3-1.4 5.6-4.2 6.1-7.5 0.5-3.7-2.9-5.5-6-6.1 0.1 0.5 0.1 1.1 0.2 1.6 3.8-2.3 12.2-7.5 9.1-13.2 -2.3-4.2-9.1-2.9-12.5-1.4 -1 0.4-0.1 1.9 0.9 1.5 2.9-1.2 8-2.3 10.1 0.8 2.9 4.1-6.1 9.4-8.5 10.8 -0.6 0.4-0.6 1.4 0.2 1.6 3.6 0.7 5.9 2.7 4 6.4 -1.1 2.2-3.4 4-5.9 4.4 -5.1 0.9-14.9 3-17.3-3.2 -0.4-1-1.9-0.6-1.7 0.5 3 13.4 3.1 26.7-6.5 37.4 -9.9 11-25.6 15.5-39.9 15.9 -14.5 0.3-29.9-4.1-40.6-14.2 -4.5-4.2-7.7-9.6-9.1-15.6 -1.3-5.6-0.5-10.7 0.3-16.4 -0.1-0.7-1-1.3-1.5-0.6 -3.6 4.4-9.5 9.3-15.4 9.3 -2.4 0-5.6-0.3-7.5-1.9 -3-2.6 1.1-8.5 2.5-10.8 0.3-0.5 0-1.1-0.5-1.3 -3.5-0.8-10.3-2.6-9.6-7.4 0.6-4.1 5.9-6.5 9.2-8 0.4-0.2 0.6-0.8 0.3-1.2 -2.1-2.8-5.4-7.2-3.3-10.8 1.5-2.6 5.6-2.7 8.2-2.3 3.1 0.5 5.5 2.8 8.1 4.3 4.4 2.6 8.2 5.2 9.3 10.6 0.2 1 1.7 0.7 1.7-0.2 0.1-5.8 0.5-11.7 1.9-17.3 0.4-1.5 0.8-3 1.4-4.5 0.6-1.6 0.9-1.6 2.7-1.9 0.6-0.1 0.7-0.8 0.5-1.3 -5.6-12.4 0.5-24.5 11.2-31.6 11.2-7.5 26.1-9 39-6 11.4 2.7 23 10 26.6 21.7 0.9 2.8 1 5.6 0.8 8.5 -0.2 3.2-2.7 6.2-1.8 9.2 1.8 6 3.9 12.4 4.7 18.6 0.1 0.7 1.2 1.3 1.6 0.4 3-7 9.2-13.1 15.4-17.4 2.6-1.8 6.2-4.2 9.4-2.6 5.5 2.7 1 11.7-1.3 14.9C196.2 126.3 197.7 127.1 198.3 126.2z"/> <path d="M109.9 109.7c0-9.1-7.4-16.5-16.6-16.5s-16.6 7.4-16.6 16.5c0 9.1 7.4 16.6 16.6 16.6S109.9 118.8 109.9 109.7z" fill="#FFF"/> <path d="M110.8 109.7c-0.3-9.7-7.7-17.1-17.4-17.4 -9.7-0.3-17.2 8.1-17.4 17.4 -0.3 9.7 8.1 17.2 17.4 17.4C103.1 127.4 110.5 118.9 110.8 109.7c0-1.1-1.7-1.1-1.7 0 -0.2 8.7-7 15.5-15.7 15.7 -8.7 0.2-15.5-7.3-15.7-15.7 -0.2-8.7 7.3-15.4 15.7-15.7 8.7-0.2 15.5 7.3 15.7 15.7C109.1 110.8 110.8 110.8 110.8 109.7z"/> <path d="M184.2 107.4c0-9.1-7.4-16.6-16.5-16.6 -9.1 0-16.6 7.4-16.6 16.6 0 9.1 7.4 16.6 16.6 16.6C176.8 124 184.2 116.6 184.2 107.4z" fill="#FFF"/> <path d="M185.1 107.4c-0.3-9.7-7.7-17.2-17.4-17.4 -9.7-0.3-17.2 8.1-17.4 17.4 -0.3 9.7 8.1 17.2 17.4 17.4C177.3 125.1 184.8 116.7 185.1 107.4c0-1.1-1.7-1.1-1.7 0 -0.2 8.7-6.9 15.5-15.7 15.7 -8.7 0.2-15.5-7.3-15.7-15.7 -0.2-8.7 7.3-15.5 15.7-15.7 8.7-0.2 15.4 7.3 15.7 15.7C183.4 108.5 185.1 108.5 185.1 107.4z"/> <path d="M88.8 113.8c0-1.8-1.4-3.3-3.2-3.3 -1.8 0-3.2 1.5-3.2 3.3 0 1.8 1.5 3.3 3.2 3.3C87.4 117.1 88.8 115.6 88.8 113.8z"/> <path d="M176.3 101.7c0-1.8-1.5-3.2-3.2-3.2 -1.8 0-3.3 1.5-3.3 3.2 0 1.8 1.4 3.2 3.3 3.2C174.9 104.9 176.3 103.5 176.3 101.7z"/> <path d="M118.4 126.2c-0.6-3.6 3-10.2 5.8-13.3 2.8-3.1 10.6-9.9 14.1-5 0.7 1 1 15.5 0.5 17.2 -0.6 1.7-7.1 13-8.4 13C129 138.1 118.9 129.4 118.4 126.2z"/> <path d="M119.3 126.2c-0.7-7.5 7.5-17 14.4-19 4.5-1.3 4.2 3.3 4.4 6.1 0.2 3.2 0.2 6.4 0.1 9.6 -0.1 2.1-1 3.6-2 5.4 -1.6 2.8-3.2 5.7-5.3 8.2 -0.6 0.8-0.5 0.7-1.4 0.1 -1.4-0.9-2.6-2-3.9-3.1 -2.1-1.9-5.6-4.6-6.3-7.5 -0.3-1.1-1.9-0.6-1.7 0.5 0.9 3.5 4.8 6.5 7.3 8.8 1.2 1.1 4.4 4.6 6.2 3.5 2.7-1.7 4.6-6.2 6.1-8.8 1.5-2.6 2.5-4.5 2.6-7.5 0.2-4.2 0-8.5-0.4-12.7 -0.3-3-2.3-4.6-5.4-4.3 -4.1 0.4-8 4-10.6 6.9 -3.1 3.5-6.5 9.1-6 14C117.7 127.3 119.4 127.3 119.3 126.2z"/> <path d="M135 122c0.6 1-0.7 2.8-2.9 4.2 -2.2 1.3-4.4 1.6-5 0.6 -0.6-1 0.7-2.8 2.9-4.1C132.1 121.3 134.4 121.1 135 122z" fill="#D8334A"/> <path d="M124.2 112.9c-2.8 3.2-6.4 9.7-5.8 13.3 0.1 0.5 0.4 1.2 0.9 1.9 4.5-6.6 11.2-15.4 18.5-20.8C134.1 103.5 126.8 109.8 124.2 112.9z" fill="#FFCF58"/> <path d="M119.3 126.2c-0.7-7.5 7.5-17 14.4-19 4.5-1.3 4.2 3.3 4.4 6.1 0.2 3.2 0.2 6.4 0.1 9.6 -0.1 2.1-1 3.6-2 5.4 -1.6 2.8-3.2 5.7-5.3 8.2 -0.6 0.8-0.5 0.7-1.4 0.1 -1.4-0.9-2.6-2-3.9-3.1 -2.1-1.9-5.6-4.6-6.3-7.5 -0.3-1.1-1.9-0.6-1.7 0.5 0.9 3.5 4.8 6.5 7.3 8.8 1.2 1.1 4.4 4.6 6.2 3.5 2.7-1.7 4.6-6.2 6.1-8.8 1.5-2.6 2.5-4.5 2.6-7.5 0.2-4.2 0-8.5-0.4-12.7 -0.3-3-2.3-4.6-5.4-4.3 -4.1 0.4-8 4-10.6 6.9 -3.1 3.5-6.5 9.1-6 14C117.7 127.3 119.4 127.3 119.3 126.2z"/> </svg> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.chicken { display: flex; justify-content: center; } .chicken svg { width: 400px; height: 400px; } @media (max-width: 540px){ .chicken svg { width: 240px; height: 240px; } } .chicken svg polygon { animation: spin 8s linear infinite; transform-origin: 50% 50%; } .chicken svg polygon:nth-child(2) { animation-direction: reverse; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
Найдено на codepen.io у пользователя Zed Dash
Добавить комментарий: