Подтверждаю, что я не робот

robot_check_form

<div class="robot">
   <div class="success-checkmark" id="robot_btn">
     <div class="check-icon" id="check_icon">
       <span class="icon-line" id="first"></span>
       <span class="icon-line" id="second"></span>
       <div class="icon-circle"></div>
       <div class="icon-fix"></div>
     </div>
   </div>
   <p>Подтверждаю, <br>что я не робот</p>
</div>


<script>
	let robot_btn = document.getElementById('robot_btn');

	let check_icon = document.getElementById('check_icon');

	let first = document.getElementById('first');

	let second = document.getElementById('second');
	
	robot_btn.onclick = function() {
		check_icon.classList.add('show');
		first.classList.add('line-tip');
		second.classList.add('line-long');
	};
</script>

<style>
	.robot {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		width: 300px;
		margin: 0 auto;
		border: 1px solid #4caf50;
		padding: 15px 20px 30px 0
	}

	.success-checkmark {
		width: 80px;
		height: 80px;
		margin: 0 auto;
		padding: 0;
		cursor: pointer
	}

	.success-checkmark .check-icon {
		width: 80px;
		height: 80px;
		position: relative;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		border: 4px solid #4caf50
	}

	.success-checkmark .check-icon::before {
		top: 3px;
		left: -2px;
		width: 30px;
		-webkit-transform-origin: 100% 50%;
		-ms-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-border-radius: 100px 0 0 100px;
		border-radius: 100px 0 0 100px
	}

	.success-checkmark .check-icon::after {
		top: 0;
		left: 30px;
		width: 60px;
		-webkit-transform-origin: 0 50%;
		-ms-transform-origin: 0 50%;
		transform-origin: 0 50%;
		-webkit-border-radius: 0 100px 100px 0;
		border-radius: 0 100px 100px 0;
		
	}
	.success-checkmark .check-icon.show::after {
		-webkit-animation: rotate-circle 4.25s ease-in;
		animation: rotate-circle 4.25s ease-in
	}

	.success-checkmark .check-icon::after,
	.success-checkmark .check-icon::before {
		content: "";
		height: 100px;
		position: absolute;
		background: #fff;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}

	.success-checkmark .check-icon .icon-line {
		height: 5px;
		background-color: #4caf50;
		display: block;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		position: absolute;
		z-index: 10
	}

	.success-checkmark .check-icon .icon-line.line-tip {
		top: 46px;
		left: 14px;
		width: 25px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-animation: icon-line-tip .75s;
		animation: icon-line-tip .75s
	}

	.success-checkmark .check-icon .icon-line.line-long {
		top: 38px;
		right: 8px;
		width: 47px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-animation: icon-line-long .75s;
		animation: icon-line-long .75s
	}

	.success-checkmark .check-icon .icon-circle {
		top: -4px;
		left: -4px;
		z-index: 10;
		width: 80px;
		height: 80px;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		position: absolute;
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		border: 4px solid rgba(76, 175, 80, .5)
	}

	.success-checkmark .check-icon .icon-fix {
		top: 8px;
		width: 5px;
		left: 26px;
		z-index: 1;
		height: 85px;
		position: absolute;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		background-color: #fff
	}

	@-webkit-keyframes rotate-circle {
		0% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		5% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		12% {
			-webkit-transform: rotate(-405deg);
			transform: rotate(-405deg)
		}

		100% {
			-webkit-transform: rotate(-405deg);
			transform: rotate(-405deg)
		}
	}

	@keyframes rotate-circle {
		0% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		5% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		12% {
			-webkit-transform: rotate(-405deg);
			transform: rotate(-405deg)
		}

		100% {
			-webkit-transform: rotate(-405deg);
			transform: rotate(-405deg)
		}
	}

	@-webkit-keyframes icon-line-tip {
		0% {
			width: 0;
			left: 1px;
			top: 19px
		}

		54% {
			width: 0;
			left: 1px;
			top: 19px
		}

		70% {
			width: 50px;
			left: -8px;
			top: 37px
		}

		84% {
			width: 17px;
			left: 21px;
			top: 48px
		}

		100% {
			width: 25px;
			left: 14px;
			top: 45px
		}
	}

	@keyframes icon-line-tip {
		0% {
			width: 0;
			left: 1px;
			top: 19px
		}

		54% {
			width: 0;
			left: 1px;
			top: 19px
		}

		70% {
			width: 50px;
			left: -8px;
			top: 37px
		}

		84% {
			width: 17px;
			left: 21px;
			top: 48px
		}

		100% {
			width: 25px;
			left: 14px;
			top: 45px
		}
	}

	@-webkit-keyframes icon-line-long {
		0% {
			width: 0;
			right: 46px;
			top: 54px
		}

		65% {
			width: 0;
			right: 46px;
			top: 54px
		}

		84% {
			width: 55px;
			right: 0;
			top: 35px
		}

		100% {
			width: 47px;
			right: 8px;
			top: 38px
		}
	}

	@keyframes icon-line-long {
		0% {
			width: 0;
			right: 46px;
			top: 54px
		}

		65% {
			width: 0;
			right: 46px;
			top: 54px
		}

		84% {
			width: 55px;
			right: 0;
			top: 35px
		}

		100% {
			width: 47px;
			right: 8px;
			top: 38px
		}
	}
</style>