Example
<style>
.pulse {
box-shadow: 0 0 0 #0ff;
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 25px 5px #0ff;
}
50% {
-webkit-box-shadow: 0 0 40px 20px #0ff;
}
100% {
-webkit-box-shadow: 0 0 25px 5px #0ff;
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 25px 5px #0ff;
box-shadow: 0 0 25px 5px #0ff;
}
50% {
-moz-box-shadow: 0 0 40px 20px #0ff;
box-shadow: 0 0 40px 20px #0ff;
}
100% {
-moz-box-shadow: 0 0 25px 5px #0ff;
box-shadow: 0 0 25px 5px #0ff;
}
}
.circle {
background: #0ff;
box-shadow: 0px 0px 40px 20px #0ff;
text-align: center;
width: 5rem;
height: 5rem;
border-radius: 5rem;
animation: pulse 2s infinite;
}
.circle::before {
content: "";
height: 100%;
width: 50%;
float: left;
shape-outside: polygon(0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%, 5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0% 100%);
}
.circle > span::before {
content: "";
height: 100%;
width: 50%;
float: right;
shape-outside: polygon(100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%, 95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%);
}
</style>
<br />
<div class="circle pulse">
<span>
a balanced tree
</span>
</div>
<br />
