BG Decoration Animation

by herodrigues

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300 124" enable-background="new 0 0 300 124" xml:space="preserve">
<g>
	<g opacity="0.5" enable-background="new    ">
		<g>
			<defs>
				<rect id="SVGID_1_" x="52.4" y="15.5" width="172.1" height="71.4"/>
			</defs>
			<clipPath id="SVGID_2_">
				<use xlink:href="#SVGID_1_" overflow="visible"/>
			</clipPath>
			<g clip-path="url(#SVGID_2_)">
				<defs>
					<rect id="SVGID_3_" x="52.4" y="15.5" width="172.1" height="71.4"/>
				</defs>
				<clipPath id="SVGID_4_">
					<use xlink:href="#SVGID_3_" overflow="visible"/>
				</clipPath>
				
					<circle class="pulse" clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-miterlimit="10" cx="87.1" cy="82.3" r="3.5"/>
				
					<circle class="pulse" clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-miterlimit="10" cx="56.9" cy="64.3" r="3.5"/>
				
					<line clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="82.5" y1="47.7" x2="88.1" y2="53.3"/>
				
					<line clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="82.5" y1="53.3" x2="88.1" y2="47.7"/>
				
					<line clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="208.4" y1="78.9" x2="214" y2="84.5"/>
				
					<line clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="208.4" y1="84.5" x2="214" y2="78.9"/>
				
					<circle clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-miterlimit="10" cx="207.9" cy="20.9" r="3.5"/>
				
					<line clip-path="url(#SVGID_4_)" fill="none" stroke="#BEAFEB" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="222.6"...

CSS

.pulse {
  animation: pulse 2s ease infinite;
  transform: scale(0.4);
  transform-origin: center center;
}

.pulse2 {
  animation: pulse 2s ease infinite;
  transform: scale(0.4);
  transform-origin: center center;
}

@keyframes pulse {
  0% {
    transform: scale(0.3)
  }
  50% {
    transform: scale(1)
  }
  100% {
    transform: scale(0.3)
  }
}