Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>

              
            
!

CSS

              
                $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;
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console