CodePen Embed - Paint with CSS: Spray

body
  .frame
    .pinky2
    .pinky1
    .ring-finger1
    .ring-finger2
    .middle-finger2
    .middle-finger1
    .can
      .cover
      .oval
    .top
    .top2
    .top3
    .nozzle
    .red-nozzle
    .spray
      .spray1
    .wrist
    .pointer2
    .wrist2
    .pointer1
    .pointer3
    .pointer4
      .nail2
      .nail-highlight2
    .pointer5
    .pointer6
    .thumb
      .nail
      .nail-highlight
    .thumb2
    .thumb3

View Compiled

$red: rgba(232, 32, 1, 1);
$white: rgba(255, 254, 255, 1);
$black: rgba(1, 0, 1, 1);
$yellow: rgba(255, 224, 5, 1);
$skin: rgba(245, 220, 215, 1);



body {
  background: white;
  margin:0px;
  padding:0px;
}

.frame {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 800px;
  height: 500px;
  background: $yellow;
}

.can {
  position: absolute;
  background: $red;
  height: 260px;
  width: 175px;
  top: 250px;
  left: 300px;
  border: 4px solid $black;
  border-bottom: 0px;
  border-radius: 5px;
  transform: rotate(-10deg);
}

.cover {
  position: absolute;
  background: $white;
  height: 260px;
  width: 175px;
  top: 250px;
  left: -30px;
  border-bottom: 0px;
  border-radius: 5px;
  transform: rotate(10deg)
}

.oval {
  position: absolute;
  background: $white;
  height: 200px;
  width: 120px;
  top: 0px;
  left: 30px;
  top: 30px;
  border: 5px solid $black;
  border-radius: 50% 50% 100px 100px;
}

.top,
.top2,
.top3 {
  position: absolute;
  background: $white;
  border: 4px solid $black;
}

.top {
  height: 20px;
  width: 178px;
  border-radius: 50%;
  top: 240px;
  left: 275px;
  transform: rotate(-10deg);
}

.top::after {
  content: '';
  position: absolute;
  background: $black;
  height: 15px;
  width: 160px;
  left: 10px;
  border-radius: 50%;
}

.top2 {
  height: 70px;
  width: 145px;
  border-radius: 50px 50px 5px 5px;
  border-bottom: 0;
  top: 180px;
  left: 285px;
  transform: rotate(-10deg);
}

.top3 {
  height: 10px;
  width: 60px;
  border-radius: 50%;
  top: 170px;
  left: 320px;
  transform: rotate(-10deg);
}

.top3::after {
  content: '';
  position: absolute;
  background: $black;
  height: 5px;
  width: 50px;
  left: 5px;
  border-radius: 50%;
  border-top: 2px solid $white;
}

.nozzle {
  position: absolute;
  background: $white;
  border: 4px solid $black;
  height: 20px;
  width: 4px;
  border-radius: 2%;
  border-right: 5px solid $black;
  top: 150px;
  left: 345px;
  transform: rotate(-10deg);
}

.red-nozzle {
  position: absolute;
  background: $red;
  border: 4px solid $black;
  height: 40px;
  width: 20px;
  border-radius: 5px;
  border-right: 5px solid $black;
  top: 105px;
  left: 332px;
  transform: rotate(-10deg);
}

.red-nozzle:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 2.5px;
  background: $white;
  left: 3px;
}

.spray {
  position:absolute;
  height:250px;
  width:660px;
  background:$white;
  left:-320px;
  top:55px;
 -webkit-clip-path: polygon(50% 0%, 100% 50%, 43% 100%, 45% 53%);
clip-path: polygon(50% 0%, 100% 50%, 43% 100%, 45% 53%);
  transform:rotate(-10deg);
}
.spray1{
  position:absolute;
  background:$black;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 43% 100%, 45% 53%);
clip-path: polygon(50% 0%, 100% 50%, 43% 100%, 45% 53%);
  height:15%;
  width:10%;
  top:43%;
  left:92%;
  transform:rotate(30deg);
}

.thumb {
  position: absolute;
  background: $skin;
  border: 4px solid $black;
  height: 70px;
  width: 130px;
  border-radius: 90px 20px 20px 100px;
  border-right: 0;
  top: 296.5px;
  left: 390px;
  transform: rotate(-.5deg);
}

.thumb2 {
  position: absolute;
  background: $skin;
  border: 4px solid $black;
  height: 70px;
  width: 100px;
  border-radius: 5px;
  border-right: 0;
  border-left: 0;
  top: 295px;
  left: 500px;
  transform: rotate(-1deg);
}

.thumb3,
.wrist2 {
  position: absolute;
  background: $skin;
  height: 105px;
  width: 150px;
  top: 275px;
  transform: rotate(10deg);
}

.thumb3 {
  border-top: 0;
  border-radius: 50px;
  left: 580px;
  border: 4px solid $black;
  border-right: 0;
  border-left: 0;
  border-top: 0;
}

.thumb3::after {
  content: "";
  position: absolute;
  height: 80px;
  width: 170px;
  border-radius: 50px;
  background: $skin;
  left: -10%;
  top: 19%;
}

.nail {
  position: absolute;
  background: $skin;
  border: 4px solid $black;
  height: 75px;
  width: 45px;
  left: -5px;
  top: -5px;
  background: $red;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  transform: rotate(-90deg);
}

.nail-highlight {
  position: absolute;
  height: 5px;
  width: 50px;
  top: 40px;
  left: -10px;
  background: $white;
  border-radius: 20% 50% 100% 50% / 20% 100% 100% 100%;
  transform: rotate(5deg);
}

.nail2 {
  position:absolute;
  background:$red;
  height:15px;
  width:50px;
  top:-5px;
  left:-10px;
  border-radius: 20% 100% 100% 50% / 20% 50% 100% 100%;
  border: 4px solid $black;
  transform:rotate(0deg);
}
.nail-highlight2 {
  position: absolute;
  height: 2px;
  width: 40px;
  top: 5px;
  left:2px;
  background: $white;
  border-radius: 20% 50% 100% 50% / 20% 100% 100% 100%;
  transform: rotate(-2deg);
}
.wrist {
  position: absolute;
  background: $skin;
  border-bottom: 4px solid $black;
  border-top: 10px solid $black;
  height: 120px;
  width: 150px;
  border-radius: 5px;
  border-right: 0;
  border-left: 0;
  top: 265px;
  left: 695px;
  transform: rotate(15deg);
}

.wrist2 {
  border-radius: 0px;
  top: 185px;
  transform: rotate(45deg);
  left: 565px;
  border: 10px solid $black;
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  z-index:2;
}

.pointer1{
  position: absolute;
  background: $skin;
  height: 110px;
  width: 150px;
  top: 180px;
  transform: rotate(60deg);
  border-top: 0;
  border-radius: 50px;
  left: 510px;
  border: 7px solid $black;
  border-right: 0;
  border-left: 0;
  border-top: 0;
}
.pointer2 {
  position: absolute;
  background: $skin;
  height: 105px;
  width: 70px;
  top: 125px;
  transform: rotate(50deg);
  border-top: 0;
  border-radius:100px 30px 20px;
  left: 545px;
  border-top: 10px solid $black;
  border-bottom: 5px solid $black;
  border-right: 0;
  border-left: 0;
  //border-bottom: 0;
  z-index:2;
}
.pointer3 {
  position: absolute;
  background: $skin;
  height: 110px;
  width: 150px;
  top: 165px;
  transform: rotate(60deg);
  border-top: 0;
  border-radius: 40px;
  left: 530px;
  border: 8px solid $black;
  border-right: 0;
  border-left: 0;
  border-top: 0;
  z-index:1;
}
.pointer4 {
  position: absolute;
  background: $skin;
  height: 50px;
  width: 80px;
  top: 60px;
  transform: rotate(-10deg);
  border-top: 0;
  border-radius:40% 30% 30% 100%;
  left: 300px;
  border: 4px solid $black;
  border-right: 0;
  z-index:2;
}
.pointer5 {
  position: absolute;
  background: $skin;
  height: 60px;
  width: 110px;
  top: 60px;
  transform: rotate(10deg);
  border-top: 0;
  border-radius:20% 30% 30% 20%;
  left: 370px;
  border: 4px solid $black;
  border-right: 0;
  border-left:0;
  z-index:2;
}
.pointer6 {
  position: absolute;
  background: $skin;
  height: 70px;
  width: 135px;
  top: 95px;
  transform: rotate(40deg);
  border-top: 0;
  border-radius:20% 10% 0% 0%;
  left: 430px;
  border-bottom: 4px solid $black;
  border-top: 8px solid $black;
  border-right: 0;
  border-left:0;
  z-index:2;
}
.middle-finger1{
  position: absolute;
  background: $skin;
  height: 60px;
  width: 130px;
  top: 135px;
  transform: rotate(20deg);
  border-top: 0;
  border-radius:20% 30% 30% 20%;
  left: 410px;
  border: 5px solid $black;
  border-right: 0;
  border-left:0;
  border-top:0;
  z-index:0;
}
.ring-finger1{
  position: absolute;
  background: $skin;
  height: 60px;
  width: 100px;
  top: 180px;
  border-top: 0;
  border-radius:20% 30% 30% 20%;
  left: 450px;
  border: 4px solid $black;
  border-right: 0;
  border-left:0;
  z-index:0;
}
.pinky1{
  position: absolute;
  background: $skin;
  height: 60px;
  width: 80px;
  top: 210px;
  border-top: 0;
  border-radius:20% 30% 30% 20%;
  left: 480px;
  border: 4px solid $black;
  border-right: 0;
  border-left:0;
  z-index:0;
}
.pinky2{
  position: absolute;
  background: $skin;
  height: 60px;
  width: 60px;
  top: 240px;
  border-top: 0;
  border-radius:20% 30% 30% 20%;
  left: 425px;
  border: 4px solid $black;
  border-left:0;
  z-index:0;
}
.ring-finger2{
  position: absolute;
  background: $skin;
  height: 60px;
  width: 60px;
  top: 190px;
  border-top: 0;
  border-radius:20% 0% 40% 20%;
  left: 405px;
  border: 4px solid $black;
  border-left:0;
  border-right:0;
  z-index:0;
}
.middle-finger2{
  position: absolute;
  background: $skin;
  height: 80px;
  width: 60px;
  top: 100px;
  border-top: 0;
  border-radius:20% 0% 40% 20%;
  left: 370px;
  transform:rotate(20deg);
  border: 4px solid $black;
  border-right:0;
  z-index:0;
}

View Compiled

//Recreated Pop artist Roy Lichtenstein's 1962 painting Spray in pure CSS.

This Pen is owned by Christina Gorton on CodePen.

See more by @cgorton on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.