CodePen Embed - Partners in crime

div.main
    div.lines
        div.line-a
        div.line-b
        div.line-c
        div.line-d
            
    div.bicy
        
        div.heart
        
        div.dog 
            div.dog__ear    
            div.dog__head   
            div.dog__body
            div.dog__mouth-a
            div.dog__mouth-b
            div.dog__tongue
                
        div.bicy__wheel-l
            div.bicy__fender
        div.bicy__wheel-r
            div.bicy__fender
        div.bicy__ac
            div.bicy__ac-top
        div.bicy__parts
            div.bicy__part-a
            div.bicy__part-b
            div.bicy__part-c
            div.bicy__part-d
            div.bicy__part-e
            div.bicy__part-f
            div.bicy__part-g
        div.bicy__basket
            div.bicy__basket-a
    div.shadows
        div.shadow-a
        div.shadow-b
        div.shadow-c
        div.shadow-d
    div.human
        div.human__c
            div.human__head
                div.human__neck
                div.human__face-a
                div.human__face-b
                div.human__nose
                div.human__hair
                div.human__cheek
                div.human__ear
                div.human__mouth
                div.human__eye
            div.human__chest
            div.human__backpack
                
        div.human__arm-r
            div.human__arm-r-a
        div.human__arm-l
            div.human__arm-l-a
                
        div.human__leg-r
            div.human__leg-r-a
        div.human__leg-l
            div.human__leg-l-a
            div.human__leg-l-b

View Compiled

$bg-1: #EFE1DB;
$bg-2: #6D5450;

$skin-1: #FFAC90;
$skin-2: #B35644;

$hair-1: #D45029;
$hair-2: #8C1D0B;

$green-1: #7ADACC;
$green-2: #009281;
$green-3: #00665A;

$white-1: #FFF6EF;
$white-2: #FEDBC5;
$white-3: #E9A589;

$wheel-1: #432316;

$brown-1: #EBB6A1;
$brown-2: #B96C5C;
$brown-3: #883E30;

$gray-1: #3C3C3B;
$gray-2: #3F3E3E;
$gray-3: #101010;

$metal-1: #d5d5d5;
$metal-2: #A2A1A0;

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
/* Generic */

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: $bg-1;
}

.main {
	position: relative;
	width: 60vw;
	height: 45vw;

	// background-image: url("bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}

/* Component */
.lines{
	width: 100%;
	height: 100%;
	transform: rotateZ(10deg);
}
.line-a,
.line-b,
.line-c,
.line-d{
	position: absolute;
	height: .175vw;
	border-radius: 50%;
	background-color: $white-1;
}
.line-a{ width: 12vw; bottom: 20vw; left: 7vw; animation: line-a .15s infinite linear; }
.line-b{ width: 10vw; bottom: 18vw; left: 6vw; animation: line-b .2s infinite linear; }
.line-c{ width: 6vw; bottom: 12vw; left: 12vw; animation: line-c .1s infinite linear; }
.line-d{ width: 6vw; bottom: 26vw; left: 15vw; animation: line-d .135s infinite linear; }

/**/
.shadows{
	position: absolute;
	top: 13.5vw;
	left: 20.3vw;
	width: 27vw;
	height: 19vw;

	transform-origin: top left;
	transform: rotateZ(10deg);
	z-index: -5;
}
.shadow-a,
.shadow-b,
.shadow-c,
.shadow-d{
	position: absolute;
	border-radius: 50%;
}
.shadow-a{
	bottom: -.5vw;
	width: 150%;
	left: -25%;
	height: 1vw;
	background-color: rgba($bg-2, .5);
	animation: shadow-a .15s infinite linear;
}
.shadow-b{
	bottom: -1.5vw;
	width: 100%;
	right: -25%;
	height: .45vw;
	background-color: rgba($bg-2, .5);
	animation: shadow-b .175s infinite linear;
}
.shadow-c{
	bottom: -4vw;
	left: 100%;

	border-top: 2vw solid rgba($bg-2, .5);
	border-right: 2vw solid rgba($bg-2, .5);
	border-bottom: 2vw solid transparent;
	border-left: 2vw solid transparent;

	transform-origin: bottom left;
	transform: rotateZ(-45deg);
	opacity: 0;

	animation: shadow-c .45s infinite linear;

	&::before{
		content: '';
		position: absolute;
		left: 2vw;
		top: 2vw;

		border-top: 1vw solid rgba($bg-2, .75);
		border-right: 1vw solid rgba($bg-2, .75);
		border-bottom: 1vw solid transparent;
		border-left: 1vw solid transparent;
		border-radius: 50%;
	}
}
.shadow-d{
	bottom: -2vw;
	left: 100%;

	border-top: 1.5vw solid rgba($bg-2, .75);
	border-right: 1.5vw solid rgba($bg-2, .75);
	border-bottom: 1.5vw solid transparent;
	border-left: 1.5vw solid transparent;

	transform-origin: bottom left;
	transform: rotateZ(-45deg);

	animation: shadow-c 1s infinite linear;
}
/**/
.bicy{
	position: absolute;
	top: 13.5vw;
	left: 17.3vw;
	width: 27vw;
	height: 19vw;

	transform-origin: bottom left;
	transform: rotateZ(10deg);

	animation: bicy .15s infinite linear;

	&__wheel-l,
	&__wheel-r{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;
		width: 10.8vw;
		height: 10.8vw;

		border: .4vw solid $wheel-1;
		border-radius: 50%;
		box-shadow:
			inset .3vw .3vw 0 $white-3,
			inset -.3vw -.3vw 0 $white-1,
			inset -.3vw .3vw 0 $white-3,
			inset .3vw -.3vw 0 $white-1;

		&::before,
		&::after{
			content: '';
			position: absolute;
			width: 70%;
			height: 70%;

			border-radius: 50%;
			border-top: .115vw solid $white-1;
			border-bottom: .115vw solid $white-1;
			border-left: .115vw solid transparent;
			border-right: .115vw solid transparent;
			 animation: wheel .25s infinite linear;
		}
		&::after{
			width: 50%;
			height: 50%;

			border-top: .115vw solid transparent;
			animation: wheel .25s infinite linear;
		}
	}
	&__wheel-l{ left: 0; z-index: -1; }
	&__wheel-r{ right: 0;  }

	&__fender{
		position: absolute;
		width: 115%;
		height: 125%;
		border-radius: 50%;
		border-top: .5vw solid $green-3;
	}
	/**/
	&__ac{
		position: absolute;
		width: 10.7vw;
		height: 3vw;
		bottom: 4vw;
		left: 4vw;

		&::before{
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			width: 99%;
			height: 1.5vw;

			border: .3vw solid $gray-2;
			border-top: .3vw solid transparent;
			border-bottom-left-radius: 4vw;
			border-bottom-right-radius: 4vw;
		}
		&::after{
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			width: 3vw;
			height: 3vw;

			border-radius: 50%;
			border-left: .4vw solid $gray-2;
			border-bottom: .4vw solid $gray-2;
			z-index: -1;
		}
		&-top{
			position: absolute;
			width: 100%;
			height: 2vw;

			border-top-left-radius: 2vw;
			border-top-right-radius: 2vw;
			background-image:
				linear-gradient(
					-65deg,
					$green-2 0,
					$green-2 6vw,
					$white-1 6vw,
					$white-1 6.3vw,
					$green-2 6.3vw,
					$green-2 6.5vw,
					$white-1 6.5vw,
					$white-1 7.5vw,
					$green-2 7.5vw,
					$green-2 8vw,
					$white-1 8vw
				);

			&::before{
				content: '';
				position: absolute;
				width: 100%;
				height: 2vw;
				border-top-left-radius: 2vw;
				border-top-right-radius: 1vw;
				background-image: linear-gradient(to top, rgba(#000, .1) 50%, transparent 50%);
			}
		}
	}
	/**/
	&__part{
		&-a,
		&-b,
		&-c{
			position: absolute;
			bottom: 5.8vw;
			left: 4.25vw;
			width: .7vw;
			height: 7.8vw;

			transform-origin: bottom left;
			transform: rotateZ(37deg);
			background-image: linear-gradient(to right, $white-1 .25vw, $white-2 .25vw);
		}
		&-a{ z-index: -1; }
		&-b{
			left: 13vw;
			height: 8.2vw;
			background-image: linear-gradient(to right, $green-1 .25vw, $green-2 .25vw);
			z-index: -1;
		}
		&-c{
			left: 13.2vw;
			bottom: 9vw;
			height: 6.4vw;

			&::before{
				content: '';
				position: absolute;
				width: 3vw;
				height: .7vw;
				bottom: 0;
				right: .1vw;

				transform-origin: bottom right;
				transform: rotateZ(-37deg);
				background-image: linear-gradient(to bottom, $white-1 .25vw, $white-2 .25vw);
			}
		}
		&-d{
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 5.8vw;
			left: 12vw;
			width: .9vw;
			height: 9.5vw;

			transform-origin: bottom left;
			transform: rotateZ(-30deg);
			background-image: linear-gradient(to left, $white-1 .4vw, $white-2 .4vw);
			z-index: -1;

			&::before{
				content: '';
				position: absolute;
				top: -3.5vw;
				width: .5vw;
				height: 3.5vw;

				background-image: linear-gradient(to right, $metal-2 .3vw, $metal-1 .3vw);
			}
			&::after{
				content: '';
				position: absolute;
				width: 3vw;
				height: .9vw;
				top: -4.7vw;

				border-radius: 1vw;
				transform-origin: bottom left;
				transform: rotateZ(30deg) skewX(-20deg);
				background-image: linear-gradient(to bottom, $green-2 , $green-3);
			}
		}
		&-e{
			position: absolute;
			width: .5vw;
			height: 7.2vw;
			right: 5.2vw;
			bottom: 5vw;

			transform-origin: bottom right;
			transform: rotateZ(8deg);
			background-image: linear-gradient(to right, $green-2 .25vw, $green-1 .25vw);
		}
		&-f{
			display: flex;
			justify-content: center;
			position: absolute;
			width: .5vw;
			height: 9.2vw;
			right: 5.2vw;
			bottom: 5vw;

			transform-origin: bottom right;
			transform: rotateZ(-25deg);
			background-image: linear-gradient(to right, $green-2 .25vw, $green-1 .25vw);

			&::before{
				content: '';
				position: absolute;
				width: 100%;
				height: 1.5vw;
				top: -1.5vw;

				background-image: linear-gradient(to left, $white-1 .25vw, $white-2 .25vw);
			}
			&::after{
				content: '';
				position: absolute;
				width: 80%;
				height: 1.9vw;
				top: -3.4vw;

				background-image: linear-gradient(to left, $metal-1 .25vw, $metal-2 .25vw);
			}
		}
		&-g{
			position: absolute;
			right: 10vw;
			bottom: 16.3vw;
			width: 1.75vw;
			height: 1.75vw;

			transform: rotateZ(25deg) skewY(10deg);
			border-top: .2vw solid $metal-1;
			border-right: .2vw solid $metal-1;
			box-shadow: inset -.1vw .1vw 0 $metal-2;

			&::before{
				content: '';
				position: absolute;
				width: 2.5vw;
				height: .5vw;
				transform: rotateZ(-60deg) skewY(0deg) translateY(-1vw) translateX(-1vw);

				border-radius: 1.5vw;
				background-image: linear-gradient(to bottom, $green-2 , $green-3);
			}
		}
	}
	/**/
	&__basket{
		position: absolute;
		bottom: 12vw;
		right: 4vw;
		width: 3vw;
		height: 3.5vw;

		background-color: $brown-2;
		border-top: .25vw solid $brown-1;

		box-shadow: inset 0 .25vw 0 $brown-3;

		&-a{
			position: absolute;
			width: 125%;
			bottom: 0;
			border-bottom: .25vw solid $brown-3;
			z-index: 5;

			&::before{
				content: '';
				position: absolute;
				width: 2vw;
				height: 3vw;
				left: -.5vw;
				top: -2.8vw;
				background-image: linear-gradient(70deg, $brown-3 1.35vw, transparent 1.35vw);

			}
			&::after{
				content: '';
				position: absolute;
				width: 2vw;
				height: 2.8vw;
				right: .15vw;
				top: -2.75vw;
				background-image: linear-gradient(-70deg, $brown-1 1.35vw, transparent 1.35vw);

			}

		}

		&::before{
			content: '';
			position: absolute;
			top: -.25vw;
			left: -1.75vw;
			width: 1.75vw;
			height: 3.5vw;
			border-top: .25vw solid $brown-1;
			background-image: linear-gradient(70deg, transparent 1vw, $brown-3 1vw);
		}
		&::after{
			content: '';
			position: absolute;
			top: -.25vw;
			right: -1.75vw;
			width: 1.75vw;
			height: 3.5vw;
			border-top: .25vw solid $brown-1;

			box-shadow: inset 0 .25vw 0 $brown-3;
			background-image: linear-gradient(-70deg, transparent 1vw, $brown-1 1vw);
		}
	}

}

.human{
	position: absolute;
	top: 6.5vw;
	left: 25vw;
	width: 13.5vw;
	height: 24.5vw;
	transform-origin: top left;
	animation: human .15s infinite linear;

	&__c{
		animation: human-c .15s infinite alternate;
	}

	&__head{
		position: absolute;
		right: -2vw;
		top: 2.2vw;
		width: 3.75vw;
		height: 4.5vw;
		transform: rotateZ(10deg);

		animation: human-head 6s infinite ;
	}
	&__neck{
		position: absolute;
		bottom: 0;
		width: 1.3vw;
		height: 1.9vw;

		background-image: linear-gradient(-10deg, transparent .2vw, $skin-2 .2vw,  $skin-2 .3vw, $skin-1 .6vw);
	}
	&__face-a{
		position: absolute;
		bottom: .1vw;
		right: .5vw;
		width: 2.3vw;
		height: 2vw;

		transform: rotateZ(5deg);
		border-bottom-right-radius: .5vw;
		background-image: linear-gradient(to top, $skin-2, $skin-2 .1vw, $skin-1 .4vw);
	}
	&__face-b{
		position: absolute;
		top: .6vw;
		right: .7vw;
		width: 2.4vw;
		height: 2.2vw;
		transform: rotateZ(-20deg);
		overflow: hidden;
		background-color: $skin-1;

		&::before{
			content: '';
			position: absolute;
			bottom: 20%;
			right: 40%;
			width: 3.2vw;
			height: 3.2vw;

			border-radius: 50%;
			background-image: linear-gradient(to bottom, $hair-1 , $hair-2);
			border-bottom: .25vw solid $hair-2;
		}
	}
	&__nose{
		position: absolute;
		right: .25vw;
		bottom: 35%;
		width: .9vw;
		height: .9vw;
		transform: rotateZ(-40deg);

		background-color: $skin-1;
		border-bottom: .1vw solid $skin-2;
		z-index: -1;
	}
	&__hair{
		position: absolute;
		left: .35vw;
		top: .4vw;
		width: 3.2vw;
		height: 1.1vw;
		transform: rotateZ(-25deg);
		overflow: hidden;

		animation: human-hair .1s infinite linear alternate;

		&::before{
			content: '';
			position: absolute;
			bottom: 0;
			width: 3.2vw;
			height: 3.2vw;

			border-radius: 50%;
			background-image: linear-gradient(to bottom, $hair-1 60%, $hair-2);
			border-bottom: .25vw solid $hair-2;
		}
	}
	&__ear{
		position: absolute;
		top: 1.8vw;
		left: 1.2vw;
		width: .8vw;
		height: 1vw;

		border-radius: 50%;
		transform: rotateZ(-15deg);
		background-color: $skin-1;
	}
	&__cheek{
		position: absolute;
		top: 2.3vw;
		left: 2.2vw;
		width: .8vw;
		height: .6vw;

		border-radius: 50%;
		transform: rotateZ(-15deg);
		background-color: rgba($hair-1, .35);
		filter: blur(2px);
	}
	&__mouth{
		position: absolute;
		right: .4vw;
		bottom: 20%;
		width: .8vw;
		height: .5vw;
		transform: rotateZ(5deg);
		overflow: hidden;

		&::before{
			content: '';
			position: absolute;
			bottom: 0;
			width: 	2.5vw;
			height: 1vw;
			border-radius: 50%;
			border-bottom: .2vw solid $bg-1;
		}
	}
	&__eye{
		position: absolute;
		top: 1.9vw;
		right: .65vw;
		width: .55vw;
		height: .15vw;

		background-color: $gray-3;
		border-radius: 50%;
		transform: rotateZ(-35deg);

		animation: human-eye 6s infinite ;


		&::before{
			content: '';
			position: absolute;
			width: 130%;
			height: .19vw;
			right: -.31vw;
			top: -.4vw;
			background-color: $gray-3;
			transform: skewX(-30deg);
		}
	}
	&__backpack{
		position: absolute;
		top: 5.2vw;
		left: 2.5vw;
		width: 6.5vw;
		height: 1.35vw;

		transform-origin: top left;
		transform: rotateZ(-20deg);
		border-top-right-radius: 3vw;
		border-bottom-left-radius: .5vw;
		border-bottom-right-radius: .5vw;

		background-image: linear-gradient(to bottom, $brown-3, darken($brown-3, 20)) ;

		&::before{
			content: '';
			position: absolute;
			top: -.5vw;
			width: 2.5vw;
			height: .5vw;

			border-top-right-radius: 2vw;
			border-top-left-radius: .5vw;
			background-image:
				linear-gradient(
					to right,
					darken($brown-3, 10) 30%,
					$green-2 30%,
					$green-2 40%,
					$brown-3 40%,
					$brown-3 50%,
					$green-2 50%,
				);
		}
		&::after{
			content: '';
			position: absolute;
			top: 30%;
			width: 93%;
			height: .2vw;
			background-color: $brown-2;
		}
	}
	&__chest{
		position: absolute;
		top: 7.2vw;
		left: 1vw;
		width: 10vw;
		height: 3.2vw;
		transform-origin: top left;
		transform: rotateZ(-20deg);

		border-top-right-radius: 2vw;
		border-bottom-right-radius: 1vw;
		background-image: linear-gradient(to bottom, $white-1 2vw, $white-2 );


		&::before{
			content: '';
			position: absolute;
			top: -.4vw;
			right: -2vw;
			width: 4vw;
			height: 3vw;

			transform-origin: top left;
			transform: rotateZ(30deg);
			background-image: linear-gradient(-35deg, transparent 1vw, $white-2 1vw, $white-1 2vw);

		}

		&::after{
			content: '';
			position: absolute;
			top: -.5vw;
			right: -.5vw;
			width: 7vw;
			height: 3.5vw;

			border-top-left-radius: 1vw;
			border-top-right-radius: 5vw;
			border-bottom-left-radius: 4vw;
			border-bottom-right-radius: 3vw;
			border: .4vw solid darken($brown-3, 10);
		}
	}
	&__arm-l{
		position: absolute;
		top: 5.45vw;
		left: 5.5vw;
		width: 5.5vw;
		height: 2vw;

		border-radius: 2vw;
		transform: rotateZ(-25deg);
		background-image: linear-gradient(to bottom, $skin-1 80%, $skin-2 90%);

		&::before{
			content: '';
			position: absolute;
			right: 0;
			width: 55%;
			height: 100%;
			border-top-right-radius: 2vw;
			border-bottom-right-radius: 2vw;
			background-image: linear-gradient(to bottom, $white-1 70%, $white-2 90%);
			border-left: .25vw solid $skin-2;
		}
		&-a{
			position: absolute;
			bottom: -3.5vw;
			left: -.02vw;
			width: 1.5vw;
			height: 4.5vw;

			transform-origin: top left;
			transform: rotateZ(-25deg);
			background-image: linear-gradient(100deg, $skin-1 1.55vw, transparent 1.55vw);

			&::before{
				content: '';
				position: absolute;
				bottom: -1.75vw;
				left: -.125vw;
				width: 1vw;
				height: 2vw;

				border-top-left-radius: 1.5vw;
				border-top-right-radius: 1.5vw;
				border-bottom-left-radius: 2vw;
				border-bottom-right-radius: 4vw;
				background-color: $skin-1;
			}
		}
	}
	&__arm-r{
		position: absolute;
		top: 5.45vw;
		left: 6vw;
		width: 5.5vw;
		height: 2vw;

		border-radius: 2vw;
		transform: rotateZ(-25deg);
		background-image: linear-gradient(to bottom, $skin-1 80%, $skin-2 90%);
		z-index: -5;

		&::before{
			content: '';
			position: absolute;
			right: 0;
			width: 55%;
			height: 100%;

			border-top-right-radius: 2vw;
			border-bottom-right-radius: 2vw;
			background-color: $white-1;
			border-left: .25vw solid $skin-2;
		}

		&-a{
			position: absolute;
			bottom: -3.5vw;
			left: -.02vw;
			width: 1.5vw;
			height: 4.5vw;

			transform-origin: top left;
			transform: rotateZ(-25deg);
			background-image: linear-gradient(100deg, $skin-2 1.55vw, transparent 1.55vw);

			&::before{
				content: '';
				position: absolute;
				bottom: -1.75vw;
				left: -.125vw;
				width: 1vw;
				height: 2vw;

				border-top-left-radius: 1.5vw;
				border-top-right-radius: 1.5vw;
				border-bottom-left-radius: 2vw;
				border-bottom-right-radius: 4vw;
				background-color: $skin-2;
			}
		}
	}
	&__leg-l{
		position: absolute;
		top: 8vw;
		width: 2.5vw;
		height: 10vw;

		transform-origin: top left;
		transform: rotateZ(-35deg);
		border-top-left-radius: 1vw;
		border-top-right-radius: 1vw;
		background-image: linear-gradient(-82deg, transparent .775vw, $gray-2 .775vw, $gray-2 1.75vw, $gray-3 1.75vw);

		animation: human-legg .15s infinite alternate;

		&-a{
			position: absolute;
			bottom: -5.25vw;
			right: .5vw;
			height: 6.5vw;
			width: 2.5vw;

			transform-origin: top left;
			transform: rotateZ(30deg);
			border-top-left-radius: 2vw;
			background-image: linear-gradient(82deg, transparent 1.1vw, $gray-3 1.1vw, $gray-3 2.3vw, $gray-2 2.3vw);

			&::before{
				content: '';
				position: absolute;
				bottom: -1.25vw;
				right: .1vw;
				width: .75vw;
				height: 1.25vw;

				background-image: linear-gradient(to bottom, $skin-2 .25vw, $skin-1 .25vw);
			}
			&::after{
				content: '';
				position: absolute;
				bottom: -3.5vw;
				left: 1.2vw;
				width: 4vw;
				height: 1.5vw;

				border-left: 4vw solid $gray-3;
				border-top: 1vw solid transparent;
				border-bottom: 1vw solid transparent;
				border-right: 1vw solid transparent;
				border-radius: 1vw;
				transform: rotateZ(20deg) ;
			}
		}

		&-b{
			position: absolute;
			bottom: -8.75vw;
			right: 3.9vw;
			height: .5vw;
			width: 2.5vw;

			transform: rotateZ(35deg);
			background-image: linear-gradient(to bottom, $green-2, $green-3);
		}
	}
	&__leg-r{
		position: absolute;
		top: 9vw;
		left: .5vw;
		width: 2.5vw;
		height: 10vw;
		transform-origin: top left;
		transform: rotateZ(-70deg);

		border-top-left-radius: 1vw;
		border-top-right-radius: 1vw;
		background-image: linear-gradient(-82deg, transparent .775vw, $gray-3 .775vw);
		z-index: -5;

		&-a{
			position: absolute;
			bottom: -4vw;
			right: .5vw;
			height: 6.5vw;
			width: 2.5vw;

			transform-origin: top left;
			transform: rotateZ(95deg) translateY(-2.2vw);
			border-top-left-radius: 2vw;
			background-image: linear-gradient(82deg, transparent 1.1vw, $gray-3 1.1vw);

			&::before{
				content: '';
				position: absolute;
				bottom: -1.25vw;
				right: .1vw;
				width: .75vw;
				height: 1.25vw;

				background-image: linear-gradient(to bottom, darken($skin-2, 10) .25vw, $skin-2 .25vw);
			}
			&::after{
				content: '';
				position: absolute;
				bottom: -3.5vw;
				left: 1.2vw;
				width: 4vw;
				height: 1.5vw;

				border-left: 4vw solid $gray-3;
				border-top: 1vw solid transparent;
				border-bottom: 1vw solid transparent;
				border-right: 1vw solid transparent;
				border-radius: 1vw;
				transform: rotateZ(20deg);
			}
		}
	}
}
.dog{
	position: absolute;
	bottom: 14.75vw;
	right: 3vw;
	width: 5.2vw;
	height: 4.5vw;

	animation: dog .075s infinite linear alternate;

	&__head{
		position: absolute;
		left: 2vw;
		top: .675vw;
		width: 2vw;
		height: 2.25vw;

		border-radius: 1.5vw;
		background-color: $white-1;

		&::after{
			content: '';
			position: absolute;
			top: .5vw;
			right: .4vw;
			width: .6vw;
			height: .125vw;
			border-radius: 50%;

			background-color: $gray-3;
			transform: rotateZ(-30deg);
		}
	}
	&__body{
		position: absolute;
		bottom: 0;
		left: 1.75vw;
		width: 2.5vw;
		height: 3vw;

		transition: bottom left;
		transform: rotateZ(15deg);
		background-image: linear-gradient(70deg, $white-1 2.5vw, transparent 2.5vw);
		overflow: hidden;

		&::before{
			content: '';
			position: absolute;
			right: 60%;
			bottom: 0;
			width: 2vw;
			height: 2vw;

			border-radius: 50%;
			background-image: linear-gradient(to right, $hair-1, $hair-2);
		}
	}
	&__mouth-a{
		position: absolute;
		top: 1vw;
		right: 0;
		width: 2vw;
		height: 1vw;

		transform: rotateZ(-15deg);
		border-bottom-right-radius: 1vw;
		background-color: $white-1;
		z-index: -1;

		&::before{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: .4vw;
			height: .3vw;
			border-radius: 1vw;
			background-color: $gray-3;
		}
	}
	&__mouth-b{
		position: absolute;
		top: 2.5vw;
		right: .2vw;
		width: 1.5vw;
		height: .5vw;

		transform: rotateZ(-15deg);
		border-bottom-right-radius: 1vw;
		background-color: $white-1;
	}

	&__ear{
		position: absolute;
		top: 1.35vw;
		width: 2.25vw;
		height: 1.45vw;

		transform: rotateZ(-15deg);
		border-top-left-radius: .25vw;
		border-bottom-left-radius: .75vw;
		background-image: linear-gradient(-10deg, transparent .25vw, $white-1 .25vw);
		overflow: hidden;

		animation: dog-ear .075s infinite linear alternate;

		&::before{
			content: '';
			position: absolute;
			bottom: 60%;
			width: 1.5vw;
			height: 1.5vw;

			border-radius: 50%;
			background-image: linear-gradient(to bottom, $hair-1, $hair-2);
		}
		&::after{
			content: '';
			position: absolute;
			bottom: 80%;
			right: 0;
			width: 1vw;
			height: 1vw;

			border-radius: 50%;
			background-image: linear-gradient(to bottom, $hair-1, $hair-2);
		}
	}
	&__tongue{
		position: absolute;
		top: 2vw;
		right: 1vw;
		width: .5vw;
		height: 1.25vw;

		background-image: linear-gradient(to top, $hair-1, $hair-2);
		transform: rotateZ(25deg);
		border-top-left-radius: 2vw;
		border-top-right-radius: 3vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 3vw;

		animation: dog-tongue .075s infinite linear alternate;
	}
}

.heart{
	position: absolute;
	width: 1vw;
	height: 1vw;
	right: 7vw;
	background-color: #d02323;

	transform: rotateZ(-50deg);

	animation: heart 6s infinite linear,heart-opacity 6s infinite linear;

	&::before,
	&::after{
		content: '';
		position: absolute;
		width: 1vw;
		height: 1vw;
		border-radius: 50%;
		background-color: #d02323;

	}
	&::before{
		bottom: 50%;
	}
	&::after{
		left: 50%;
	}

}
/***********/
/***********/
@keyframes bicy {
	0%, 100%{
		top: 13.5vw;
		transform: rotateZ(10deg) scaleY(1);
	}
	20%{
		top: 13.65vw;
		transform: rotateZ(10deg) scaleY(.998);
	}
	40%{
		top: 13.55vw;
		transform: rotateZ(10deg) scaleY(.9975);
	}
	60%{
		top: 13.5vw;
		transform: rotateZ(10deg) scaleY(.998);
	}
	80%{
		top: 13.6vw;
		transform: rotateZ(10deg scaleY(1));
	}
}
@keyframes human {
	0%, 100%{
		top: 6.5vw;
		left: 25vw;
	}
	20%{
		top: 6.6vw;
		left: 25vw;
	}
	40%{
		top: 6.55vw;
		left: 25vw;
	}
	60%{
		top: 6.45vw;
		left: 25vw;
	}
	80%{
		top: 6.6vw;
		left: 25vw;
	}
}

@keyframes human-head {
	0%, 70%, 100%{
		transform-origin: bottom left;
		transform: rotateZ(0);
	}
	80%, 95%{
		transform-origin: bottom left;
		transform: rotateZ(10deg);
	}
}
@keyframes human-eye {
	0%, 65%, 100%{
		height: .15vw;
		top: 1.9vw;
		transform: rotateZ(-35deg);

	}
	75%, 95%{
		height: .2vw;
		top: 2vw;
		transform: rotateZ(-20deg);

	}
}
@keyframes heart {
	0%, 75%{
		transform: translateY(0) rotateZ(-50deg)  scaleZ(0);
	}
	85%, 95%{
		transform: translateY(-2.5vw) rotateZ(-50deg) scaleZ(1);
	}
	100%{
		transform: translateY(-6vw) rotateZ(-50deg)  scaleZ(0);
	}
}
@keyframes heart-opacity {
	0%, 75%{
		opacity: 0;
	}
	85%, 90%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes human-hair {
	to{ transform: rotateZ(-35deg); }
}

@keyframes human-c {
	to{
		transform-origin: bottom left;
		transform: rotateZ(-.75deg);
	}
}
@keyframes human-leg {
	to{
		transform: translateY(-.1vw) rotateZ(-35deg);
	}
}
@keyframes wheel {
	to{ transform: rotateZ(1turn);}
}
@keyframes line-a {
	to{ width: 10.8vw; bottom: 19.85vw; left: 0vw; }
}
@keyframes line-b {
	to{ width: 6.9vw; bottom: 17.9vw; left: 1vw }
}
@keyframes line-c {
	to{ width: 3.9vw; bottom: 12vw; left: 0vw; }
}
@keyframes line-d {
	to{ width: 3vw; bottom: 25.95vw; left: 1vw; }
}
@keyframes shadow-a {
	to{ height: .9vw; width: 148%;}
}
@keyframes shadow-b {
	to{ height: .425vw; width: 95%;}
}
@keyframes shadow-c {
	0%{ left: 100%; opacity: 0; }
	50%{ left: 50%; opacity: 1; }
	100%{ left: 0%; opacity: 0; }
}

@keyframes dog {
	to{
		right: 3.1vw;
		bottom: 14.7vw;
	}
}
@keyframes dog-ear {
	to{
		transform-origin: top left;
		top: 1.3vw;
		transform: rotateZ(-10deg);
	}
}
@keyframes dog-tongue {
	to{
		// transform-origin: top right;
		transform: rotateZ(45deg);
		height: 1.2vw;
	}
}

View Compiled

/*
		Designed by: Svitlana Dudarenko
		Original image: https://dribbble.com/shots/5592525-Partners-in-crime
*/

This Pen is owned by Ricardo Oliva Alonso on CodePen.

See more by @ricardoolivaalonso on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.