Tulips and the starry night - Part 02

In this example below you will see how to do a Tulips and the starry night - Part 02 with some HTML / CSS and Javascript

A fork of Elzette´s penhttp://codepen.io/semblance/pen/09c0cc7ccf25273c17b13390b61339a9

Thumbnail
This awesome code was written by mikeK, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mikeK ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tulips and the starry night - Part 02</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='intro'>
  <figure class="tulips">
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="262" height="306.1" viewBox="0 0 262 306.1">
  <defs>
    <linearGradient id="linear-gradient" x1="38.89" y1="10.41" x2="38.89" y2="313.23" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f35e5a"/>
      <stop offset="0.03" stop-color="#cb6a6d"/>
      <stop offset="0.06" stop-color="#a8757e"/>
      <stop offset="0.1" stop-color="#8d7d8b"/>
      <stop offset="0.13" stop-color="#7a8394"/>
      <stop offset="0.17" stop-color="#6f8799"/>
      <stop offset="0.2" stop-color="#6b889b"/>
      <stop offset="0.27" stop-color="#4c6d83"/>
      <stop offset="0.34" stop-color="#32566f"/>
      <stop offset="0.42" stop-color="#1d445f"/>
      <stop offset="0.51" stop-color="#0f3854"/>
      <stop offset="0.62" stop-color="#07304d"/>
      <stop offset="0.8" stop-color="#042e4b"/>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="36.92" y1="1.9" x2="36.92" y2="311.56" xlink:href="#linear-gradient"/>
    <linearGradient id="linear-gradient-3" x1="39.77" y1="21.96" x2="39.77" y2="289.06" xlink:href="#linear-gradient"/>
    <linearGradient id="linear-gradient-4" x1="25.03" y1="-1.24" x2="25.03" y2="302.36" gradientTransform="matrix(1.01, -0.08, 0.02, 1.1, -0.83, -19.47)" xlink:href="#linear-gradient"/>
    <linearGradient id="linear-gradient-5" x1="49.17" y1="10.94" x2="49.17" y2="310.35" xlink:href="#linear-gradient"/>
  </defs>
  <title>row of tulips</title>
  <g id="tulip4">
    <path class="stemStart4" fill="url(#linear-gradient)" d="M224.3,316.6a3.5,3.5,0,0,1-3.5-3.2c-.1-.9-7.1-86-7.1-141.3s8.8-97.6,8.9-98a3.5,3.5,0,0,1,6.8,1.5c-.1.4-8.8,41.9-8.8,96.6s7,139.8,7.1,140.7a3.5,3.5,0,0,1-3.2,3.8Z"/>
    <path class="stemEnd4" fill="url(#linear-gradient-2)" d="M224,316.6h-.3a3.5,3.5,0,0,1-3.2-3.8c.1-.9,7.1-85.7,7.1-140.7s-8.7-96.2-8.8-96.6a3.5,3.5,0,0,1,6.8-1.5c.1.4,8.9,42.6,8.9,98s-7,140.4-7.1,141.3A3.5,3.5,0,0,1,224,316.6Z"/>
    <path id="flower04" class="flower" fill="url(#linear-gradient-3)" d="M245,22.8a26.7,26.7,0,0,0-2.8-2.8c-5.5-4.7-11.4-5.5-18-2.6l-3.3,1.8,1,.4,2.6,1.3,2.6,1.7,1.2.9a12.7,12.7,0,0,1,8.3,1.3l1.5-.5,3-.9,2.8-.5ZM202.2,66.7c-4-6.9-5.1-16.4-4-24.5.8-5.8,3.5-13.6,8-18.4s9.4-5.8,15.3-3.2a25.9,25.9,0,0,1,4.9,2.9,19.7,19.7,0,0,0-3.2,1.3,31.9,31.9,0,0,0-8.1,6.3,43.3,43.3,0,0,0-6.7,9.1,48.4,48.4,0,0,0-4.8,13.2,36.5,36.5,0,0,0-.5,12.9q.2,1.3.5,2.5l-1.3-2Zm46.7,7c5.8-5.5,9.7-14.2,11-22.3,1-5.8.6-14-2.2-19.9s-7.3-8.3-13.7-7.6a25.9,25.9,0,0,0-5.6,1.3,19.6,19.6,0,0,1,2.5,2,31.5,31.5,0,0,1,6.1,8.4,43.3,43.3,0,0,1,3.8,10.8,48.4,48.4,0,0,1,.7,14.1A36.5,36.5,0,0,1,248.3,73l-1.2,2.2,1.8-1.6Zm-2-1.3c3.6-7.4,4.1-17.2,2.5-25.5-1.2-6-4.5-13.7-9.4-18.4s-10.1-5.3-16-2.3-11.3,9.4-14.2,14.7c-4,7.4-6.4,17-5.1,25.1a22.3,22.3,0,0,0,42.3,6.3Z"/>
    <path id="leftleaf04" class="leftleaf" fill="url(#linear-gradient-4)" d="M224.9,317c-9.8-19.2-19.6-54.9-25.6-97.3s-6.8-81.2-3-105.1c9.8,19.2,19.6,54.9,25.6,97.3s6.8,81.2,3,105.1Z"/>
    <path id="rightleaf04" class="rightleaf" fill="url(#linear-gradient-5)" d="M220.5,266.3c-2.4,32.6.7,47.3,1.2,46.7,35.6-43.6,18.1-123.1,36.6-173.4C235.3,166.9,222.9,233.7,220.5,266.3Z"/>
  </g>
  <g id="tulip3">
    <path class="stemStart3" fill="url(#linear-gradient)" d="M163.7,316.6a3.5,3.5,0,0,1-3.5-3.2c-.1-.9-7.1-86-7.1-141.3s8.8-97.6,8.9-98a3.5,3.5,0,0,1,6.8,1.5c-.1.4-8.8,41.9-8.8,96.6s7,139.8,7.1,140.7a3.5,3.5,0,0,1-3.2,3.8Z"/>
    <path class="stemEnd3" fill="url(#linear-gradient-2)" d="M163.5,316.6h-.3a3.5,3.5,0,0,1-3.2-3.8c.1-.9,7.1-85.7,7.1-140.7s-8.7-96.2-8.8-96.6a3.5,3.5,0,0,1,6.8-1.5c.1.4,8.9,42.6,8.9,98s-7,140.4-7.1,141.3A3.5,3.5,0,0,1,163.5,316.6Z"/>
    <path id="flower03" class="flower" fill="url(#linear-gradient-3)" d="M162.4,26.6a30.9,30.9,0,0,1,7-5.5,30.9,30.9,0,0,1,5.9,6.7C169.8,35,168,42.4,168.5,49A30.9,30.9,0,0,1,182,24c-3.4,6.5,5.3,29.6,6.1,38.6.6,6.4-.4,12.6-4.3,17.2-9.1,10.7-32.1,8.6-39.1-3.5-3-5.2-2.9-11.5-1.1-17.7,2.5-8.8,15.1-29.9,12.9-36.9a30.9,30.9,0,0,1,8.8,27.1c1.7-6.5,1.2-14-2.9-22.1Z"/>
    <path id="leftleaf03" class="leftleaf" fill="url(#linear-gradient-4)" d="M164.8,264.3c2.4,32.6-.7,47.3-1.2,46.7C128,267.4,145.5,187.9,127,137.6,150,164.9,162.4,231.7,164.8,264.3Z"/>
    <path id="rightleaf03" class="rightleaf" fill="url(#linear-gradient-5)" d="M159.7,278.5c-2,26.5.6,38.5,1,38,29.5-35.5,15.1-100.3,30.4-141.3C172.1,197.6,161.7,252,159.7,278.5Z"/>
  </g>
  <g id="tulip2">
    <path class="stemStart2" fill="url(#linear-gradient)" d="M101.9,313.6a3.6,3.6,0,0,1-3.5-3.4c-.1-.9-7.2-89.8-7.2-147.5s9-101.9,9.1-102.4a3.6,3.6,0,0,1,4.2-2.8,3.7,3.7,0,0,1,2.7,4.3c-.1.4-8.9,43.7-8.9,100.8s7.1,146,7.2,146.9a3.6,3.6,0,0,1-3.3,3.9Z"/>
    <path class="stemEnd2" fill="url(#linear-gradient-2)" d="M101.7,313.6h-.3a3.6,3.6,0,0,1-3.3-3.9c.1-.9,7.2-89.5,7.2-146.9S96.5,62.3,96.4,61.8a3.7,3.7,0,0,1,2.7-4.3,3.6,3.6,0,0,1,4.2,2.8c.1.4,9.1,44.4,9.1,102.4s-7.1,146.6-7.2,147.5A3.6,3.6,0,0,1,101.7,313.6Z"/>
    <path id="flower02" class="flower" fill="url(#linear-gradient-3)" d="M81.4,30.4c.8-6.1,3.2-14,6.9-18.6s7.7-5,12.3-1.9l.4.3c-8.8,7-14,22.5-14,32.5a61.9,61.9,0,0,1,4.1-15.6c2.3-5.7,6.7-12.6,11.5-16.1s9-2.8,12.7,1.6,6.4,12.3,7.3,18.4a61.9,61.9,0,0,1,.2,16.2c2.4-9.7,1.1-26-5.7-34.9l.5-.2c5.3-1.9,9.1-.4,11.5,4.8s2.9,13.6,2.2,19.7c-6,50.9-56.4,44.8-49.9-6.1Z"/>
    <path id="leftleaf02" class="leftleaf" fill="url(#linear-gradient-4)" d="M97.7,307.1c7.3-24.2,10.7-46.6,5.1-84.8-4-27.3-21.9-56.4-39.1-65.6,17.6,24.7,26.5,60,29.9,98.7C96.3,286,97.7,307.1,97.7,307.1Z"/>
    <path id="rightleaf02" class="rightleaf" fill="url(#linear-gradient-5)" d="M100.3,316c9.8-19.2,19.6-54.9,25.6-97.3s6.8-81.2,3-105.1c-9.8,19.2-19.6,54.9-25.6,97.3s-6.8,81.2-3,105.1Z"/>
  </g>
   <g id="tulip1">
    <path class="stemStart1" fill="url(#linear-gradient)" d="M38.7,316.6a3.5,3.5,0,0,1-3.5-3.2c-.1-.9-7.1-86-7.1-141.3s8.8-97.6,8.9-98a3.5,3.5,0,0,1,6.8,1.5c-.1.4-8.8,41.9-8.8,96.6s7,139.8,7.1,140.7a3.5,3.5,0,0,1-3.2,3.8Z"/>
    <path class="stemEnd1" fill="url(#linear-gradient-2)" d="M38.4,316.6h-.3a3.5,3.5,0,0,1-3.2-3.8C35,312,42,227.1,42,172.1S33.3,76,33.2,75.6a3.5,3.5,0,0,1,6.8-1.5c.1.4,8.9,42.6,8.9,98s-7,140.4-7.1,141.3A3.5,3.5,0,0,1,38.4,316.6Z"/>
    <path id="flower01" class="flower" fill="url(#linear-gradient-3)" d="M42.7,18.1A34.3,34.3,0,0,1,51,12.7a34.3,34.3,0,0,1,5.8,8c-18,19.6-4.6,41.9-10.6,54.2C54,62.8,38,36.2,64.6,17.1c-4.4,6.9,2.9,33.2,2.9,43.3,0,7.2-1.8,14.1-6.7,18.8-11.2,10.5-36.1,5.9-42.6-8.1-2.8-6-2-13,.5-19.6,3.6-9.4,19.7-31.5,18-39.5,18.1,27.3-6.2,46.5-3.2,60.5-1.3-13.6,19.1-29.8,9.2-54.4Z"/>
    <path id="leftleaf01" class="leftleaf" fill="url(#linear-gradient-4)" d="M34.8,313.1c-6.9-13.7-8.1-35.6-9.3-60.5s-1.8-41.6-10-65.4-18.5-45-11.5-66.9c-4.2,53.1,81.4,60.7,30.9,192.9Z"/>
    <path id="rightleaf01" class="rightleaf" fill="url(#linear-gradient-5)" d="M49.9,176.4l-.4,2.7c-.3,1.8-.5,3.7-.7,5.5s-.2,1.8-.3,2.7l-.3,2.7c-.2,1.8-.3,3.6-.5,5.4-.6,7.2-1,14.3-1.4,21.2s-.7,13.6-1.2,20.1-1,12.7-1.7,18.7c-1.4,12-3.3,22.7-5.1,32.2-1.5,7.7-3.1,14.5-4.4,20.3a2.6,2.6,0,0,0,.3.7,4.7,4.7,0,0,0,2,1.8,3.1,3.1,0,0,0,2.3.4l.4-.2c1.4-5.3,2.9-11.3,4.6-18,1.1-4.6,2.3-9.5,3.5-14.8s2.3-10.8,3.5-16.5c2.4-11.6,5.1-24.1,7.6-37.4s5-27.5,6.8-42.4l.4-2.8.3-2.8.6-5.7c.2-1.9.3-3.8.5-5.7s.3-3.8.4-5.8l.4-5.8c0-.5.1-1,.1-1.5v-8.8c0-.5,0-1,0-1.5v-5.9c0-2-.1-3.9-.1-5.9v-2.9c0-1,0-2-.1-2.9-.2-3.9-.6-7.8-1.1-11.6-1.1-7.7-2.7-15.1-4.3-22.6l-.3-1.4v-1h0v18.2c0,2-.1,4-.1,6,0,.5,0,1,0,1.5v1.5l-.2,3c0,.5,0,1-.1,1.5v1.5l-.3,3v1.5l-.2,1.5-.4,3A215.4,215.4,0,0,1,55.3,152c-1.8,7.3-3.7,14.4-5,21.7Z"/>
  </g>
  </svg>

  </figure>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/tulips-and-the-starry-night-part-02-VbEqqY */
body {
  background: #042e4b;
	color: #fff;
  font: 19px/1.5 'Fira Sans Extra Condensed', Helvetica, Helvetica Neue, Arial;
  height: 100%;
  width: 100%;
}

body, figure, image {
  margin: 0;
  padding: 0;
}

.intro {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/579121/sky-backr2.jpg') no-repeat;
	background-size: cover;
	height: 100vh;
	position: relative;
	z-index: -1;
}
.tulips {
	bottom: -10px;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.stemEnd1, .stemEnd2, .stemEnd3, .stemEnd4 {
  visibility:hidden;
}

/*Downloaded from https://www.codeseek.co/mikeK/tulips-and-the-starry-night-part-02-VbEqqY */
var tulip01 = new TimelineMax({paused: true, repeat: -1, repeatDelay:0.2, yoyo: true}),
    tulip02 = new TimelineMax({paused: true, repeat: -1, repeatDelay:0.2, yoyo: true}),
    tulip03 = new TimelineMax({paused: true, repeat: -1, repeatDelay:0.2, yoyo: true}),
    tulip04 = new TimelineMax({paused: true, repeat: -1, repeatDelay:0.2, yoyo: true}),
    main = new TimelineMax();


tulip01
  .to("#flower01", 3, {rotation: -20, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to(".stemStart1",3, {morphSVG:".stemEnd1", ease:Linear.easeNone},0)
  .to("#leftleaf01", 3, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to("#rightleaf01", 3, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0);

tulip02
  .to("#flower02", 2, {rotation: -20, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to(".stemStart2",2, {morphSVG:".stemEnd2", ease:Linear.easeNone},0)
  .to("#leftleaf02", 2, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to("#rightleaf02", 2, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0);

tulip03
  .to("#flower03", 2.5, {rotation: -20, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to(".stemStart3",2.5, {morphSVG:".stemEnd3", ease:Linear.easeNone},0)
  .to("#leftleaf03", 2.5, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to("#rightleaf03", 2.5, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0);

tulip04
  .to("#flower04", 3, {rotation: -20, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to(".stemStart4",3, {morphSVG:".stemEnd4", ease:Linear.easeNone},0)
  .to("#leftleaf04", 3, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0)
  .to("#rightleaf04", 3, {rotation: 5, transformOrigin:"bottom bottom", ease:Linear.easeNone}, 0);

main
  .add(tulip01.play(), 0)
  .add(tulip02.play(), 1)
  .add(tulip03.play(), 4)
  .add(tulip04.play(), 2);

Comments