<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
 */