<svg width="480" height="282" enable-background="new 0 0 1024 768" version="1.1" viewBox="0 0 480 282" xmlns="http://www.w3.org/2000/svg">
	<title>Sayonara Wild Hearts Title Screen Effect</title>
 <g transform="translate(-272 -244)" fill="none" id="hearts" stroke-miterlimit="10">
  <polygon id="heart-1" points="512 526 664 336 590 244 512 284 434 244 360 336"/>
  <polygon id="heart-2" points="512 511 648 341 582 259 512 295 441 259 375 341"/>
  <polygon id="heart-3" points="512 499 635 346 575 271 512 304 448 271 388 346"/>
  <polygon id="heart-4" points="512 487 622 350 568 283 512 312 455 283 401 350"/>
  <polygon id="heart-5" points="512 477 611 353 563 293 512 319 460 293 412 353"/>
  <polygon id="heart-6" points="512 468 601 356 558 302 512 326 465 302 422 356"/>
 </g>
 <g transform="translate(-272 -244)">
  <g >
   <polygon class="art3-1" points="348 344 272 344 283 355 358 355"/>
   <polygon class="art3-2" points="362 360 286 360 296 371 370 371"/>
   <polygon class="art3-3" points="375 376 301 376 311 387 384 387"/>
  </g>
  <g fill="#5ce9a2">
   <polygon class="art3-1" points="676 344 752 344 742 355 667 355"/>
   <polygon class="art3-2" points="663 360 739 360 728 371 654 371"/>
   <polygon class="art3-3" points="650 376 724 376 713 387 641 387"/>
  </g>
 </g>
</svg>
$color-1: #46fbc4;
$color-2: lighten($color-1, .2);
$color-3: lighten($color-1, .4);
$color-4: #e554a7;
$color-5: lighten($color-4, .2);
$color-5: lighten($color-4, .4);

@mixin stroke-cycle($cycle-1, $cycle-2, $cycle-3, $cycle-4, $cycle-5) {
	0% {
		stroke: $cycle-1;
	}
	25% {
		stroke: $cycle-2;
	}
	50% {
		stroke: $cycle-3;
	}
	75% {
		stroke: $cycle-4;
	}
	100% {
		stroke: $cycle-5;
	}
}

body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0f013e;
}
#hearts polygon {
	stroke-width: 1.5px;
}

// Heart Color Cascade

@keyframes pulse-1 {
	@include stroke-cycle($color-1, $color-2, $color-3, $color-4, white);
}
@keyframes pulse-2 {
	@include stroke-cycle($color-2, $color-3, $color-4, $color-5, $color-1);
}
@keyframes pulse-3 {
	@include stroke-cycle($color-3, $color-4, $color-5, $color-1, $color-2);
}
@keyframes pulse-4 {
	@include stroke-cycle($color-4, $color-5, $color-1, $color-2, $color-3);
}
@keyframes pulse-5 {
	@include stroke-cycle($color-5, $color-1, $color-2, $color-3, $color-4);
}
@keyframes pulse-6 {
	@include stroke-cycle($color-1, $color-2, $color-3, $color-4, $color-5);
}

$hearts: 1,2,3,4,5,6;
@each $heart in $hearts {
	#heart-#{$heart} {
		animation: .5s pulse-#{$heart} steps(5,start) infinite;
	}
}
#heart-4 {
	opacity: .55;
}

#heart-5 {
	opacity: .25;
}
#heart-6 {
	opacity: .1;
}

// Heartbeat size scale effect

@keyframes size-pulse {
	45%, 55% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.025);
	}
}

svg {
	animation: 2s size-pulse infinite;
}

// Side Detail Color Cascade

@keyframes art3-pulse-1 {
	0%, 40% {
		fill: #5ce9a2;
	}
	50% {
		fill: $color-4;
	}
	60%, 100% {
		fill: $color-1;
	}
}
@keyframes art3-pulse-2 {
	0%, 50% {
		fill: #5ce9a2;
	}
	60% {
		fill: $color-4;
	}
	70%, 100% {
		fill: $color-1;
	}
}
@keyframes art3-pulse-3 {
	0%, 60% {
		fill: #5ce9a2;
	}
	70% {
		fill: $color-4;
	}
	80%, 100% {
		fill: $color-1;
	}
}

$art3s: 1,2,3;
@each $art3 in $art3s {
	.art3-#{$art3} {
		animation: 2s art3-pulse-#{$art3} steps(3,start) infinite;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.