<div id="toucan"></div>
#toucan {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image:
linear-gradient( #48AD3D 50%, #040505 50%),
radial-gradient(circle at 100px 100px, #040505 56.5%, #24BEE5 57.5%, #24BEE5 70%, #FFF 71%),
linear-gradient(#F778A1 20%, rgba(0, 0, 0, 0) 20%),
linear-gradient(to right, #E4666C 50%, #F8C611 50%),
radial-gradient(circle at 33px 67px, #040505 13%, rgba(0, 0, 0, 0) 14%),
radial-gradient(circle at 0px 100px, #FFF 56.5%, #040505 57.5%, #040505 70%, #FFF 71%),
radial-gradient(circle at 100px 100px, #040505 70%, #FFF 71%),
radial-gradient(circle at 0px 0px, #E0E0DE 56.5%, #040505 57.5%, #040505 70%, #FFF 71%),
linear-gradient(45deg, #040505 50%, rgba(0, 0, 0, 0) 50.5%);
background-size: 300px 24px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px;
background-position: 0px 199px, 0px 0px, 100px 0px, 100px 0px, 200px 0px, 200px 0px, 100px 100px, 200px 100px, 100px 190px;
background-repeat: no-repeat;
}
#toucan:before {
content: "";
width: 40px;
height: 40px;
position: absolute;
top: 159px;
left: -40px;
z-indez: 10;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
background-image:
linear-gradient(-135deg, rgba(0, 0, 0, 0) 50%, #040505 50.5%),
linear-gradient(to right, #48AD3D 50%, #24BEE5 50%);
background-repeat: no-repeat;
}
#toucan:after {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 223px;
left: -60px;
z-indez: 10;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
background-image:
linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #040505 50.5%),
linear-gradient(#48AD3D 50%, #24BEE5 50%);
background-repeat: no-repeat;
}
/**
* Based on work by Ty Wilkins
*
* https://dribbble.com/shots/3706929-Toucan
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.