Lovely Turtle

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script>
<div id="vignette"></div>
<h1>
Love you<br />
my lovely turtle
</h1>

<div id="infinitywrapper">
<!-- START SVG DATA INFINITY -->

<svg id="infinity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 535.86 267.64"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#fff;}</style></defs><title>infinity</title><path class="cls-1" d="M274.42,86.84a15.72,15.72,0,0,0,4.15-3.58C292.35,69.62,305.79,55.61,320,42.38c19.25-18,42.22-28.76,68.3-32.7,35.59-5.37,68.38,2,97.77,22.78C513.7,52,531.72,78.55,539,111.72c9.19,41.91.37,80.15-26.46,113.59-21.27,26.5-49.12,42.65-82.93,47.54-44.56,6.44-83.06-6.38-115.3-37.76-12-11.64-23.64-23.59-35.45-35.4-1.12-1.12-2.29-2.19-3.34-3.19-1.95.76-2.88,2.13-4,3.24-13.84,13.59-27,27.84-41.41,40.87A128.44,128.44,0,0,1,162,272.91c-23.32,3.61-46.14,1.64-68.07-7C54,250.19,26.61,221.83,14.1,180.79.4,135.84,8.57,94,38,57.21c21.11-26.42,48.9-42.39,82.5-47.48,40-6.05,75.73,3.85,106.73,29.68C240.74,50.69,252.42,64.06,265,76.47,268.27,79.77,271.27,83.38,274.42,86.84Z" transform="translate(-7.15 -7.49)"/><path class="cls-2"...

CSS

@import url('https://fonts.googleapis.com/css?family=Bungee+Inline');

body {
  margin: 0;
  position: relative;
  font-family: 'Bungee Inline', cursive;
  font-size: 18px;
}

#vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(0, 0, 0, 1.0) inset;
}

#vignette::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .5; 
  z-index: 5;
  /*background-image: url('https://orig00.deviantart.net/3900/f/2015/038/7/8/paper_texture_by_empessah-d8h1xph.jpg');*/
  background-image: url('https://img00.deviantart.net/37be/i/2006/284/1/c/kraft_paper_texture_by_louboumian.jpg');
  background-size: cover;
}

h1 {
  text-align: center;
  position: relative;
  top: 100px;
  margin-bottom: -100px;
  opacity: 0;
  transition: all 3s;
  transition-delay: 2s;
  color: rgba(0, 0, 0, 0.3);
  font-size: 1.5em;
  text-shadow:0px 2px 3px rgba(255, 255, 255, 0.5);
}

.done h1 {
  opacity: 1.0;
}

#infinitywrapper {
  position: relative;
  width: 110px;
  margin: 0 auto;
  top: 210px;
  opacity: 0;
  transition: all 4s;
  transition-delay: 3s;
}

.done #infinitywrapper {
  opacity: 0.75;
  width: 100px;
}

#turtlewrapper {
  position: absolute;
  width: 50%;
  margin: 50px 0 0 25%;
  padding: 0;
  opacity: 1.0;
  transition: all 2s;
}

.done #turtlewrapper {
  width: 55%;
  margin: 40px 0 0 22.5%;
  opacity: 0;
}

svg {
  filter: drop-shadow(0 0 5px #000);
}

svg #turtle_outlines {
  opacity: 0.5;
}

svg#filled {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 20s;
}

svg#filled.start {
  opacity: 0.2;
}

JavaScript

$('#filled').addClass('start');

new Vivus('turtle_outlines', {
		type: 'sync',
    duration: 500
  }, function() {
		$('body').addClass('done');
});