<section class="micro">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" width="50" height="50">
		<path fill="#ffffff" d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"></path>
	</svg>
</section>
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box;
	user-select: none;
}

:root {
	--width: 100px;
	--height: 100px;
	--primary: #17b87c;
	--body: #f1f3f6;
	--borderRadius: 50%;
}

html {
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: var(--body);
}

.micro {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--width);
	height: var(--height);
	background-color: var(--primary);
	border-radius: var(--borderRadius);
}

.micro:before,
.micro:after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: solid 3px var(--primary);
	border-radius: var(--borderRadius);
}

.micro:before {
	animation: ripple 2s linear infinite;
}

.micro:after {
	animation: ripple 2s 1s linear infinite;
}

@keyframes ripple {
	to {
		transform: scale(2);
		opacity: 0;
	}
}
/*
 * Nothing js :D
 * Author: Alejandro Torres
 * Instagram: @atorres.designs
 * Linkedin: atorresalcala
 * GitHub: atorres-io
 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.