<section class="container">
<div class="text-content">
				<p class="maintitle">Goodbye November</p>
				<p class="secondtitle">Hello December</p>
			</div>
			<svg class="svg-container">
				<circle class="firstcircle" cx="400" cy="120" r="100" />
				<circle class="secondcircle" cx="400" cy="120" r="50" />

				<circle class="thirdcircle" cx="400" cy="120" r="30" />

				<g class="leaf leaf1">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#C08946" d="M265.584,488.954c-28.033-26.512-39.919-58.896-33.272-93.93
						c6.419-33.832,48.289-63.264,73.252-106.008C370.817,379.028,325.01,468.77,265.584,488.954z"/>
					<path fill="#754B1E" d="M265.963,546.055c-7.013-28.679-2.895-76.692-2.344-83.511c-9.768-5.744-27.538-23.512-32.896-42.422
						c7.401,13.082,20.514,29.451,33.314,37.848c0.829-8.207,2.064-15.987,3.592-23.444c-15.863-9.63-32.637-34.471-31.137-52.49
						c6.032,16.533,16.552,37.707,32.056,48.198c2.167-9.722,4.81-18.909,7.662-27.8c-13.271-8.103-28.524-28.987-24.647-44.333
						c0.882,11.718,15.983,33.711,25.961,40.303c1.812-5.481,3.69-10.861,5.571-16.197c0.02-0.065,0.042-0.129,0.068-0.191l1.176-3.33
						c1.132-3.202,2.259-6.393,3.368-9.585c-8.494-6.448-17.28-20.283-16.596-34.356c0.275,0.893,0.566,1.783,0.872,2.669
						c3.844,11.146,9.931,21.44,17.159,27.521c3.62-10.603,6.969-21.273,9.531-32.469c-4.629-4.109-8.315-13.021-8.776-20.452
						c4.593,8.348,6.479,12.229,9.817,15.66c2.274-11.087,5.619-25.124,5.849-38.656c4.472,18.449-0.528,37.111-4.508,52.172
						c8.253-3.653,16.374-10.909,23.362-19.881c-4.187,11.885-15.384,21.752-24.73,24.861c-2.192,7.708-4.678,15.237-7.274,22.75
						c-0.025,0.102-0.06,0.201-0.104,0.301c-1.249,3.607-2.522,7.211-3.801,10.83l-0.113,0.319
						c17.159-2.837,36.282-18.191,45.378-31.703c-3.115,16.567-29.884,34.301-46.906,36.034c-3.875,11.008-7.718,22.226-10.963,34.15
						c12.867-0.459,27.283-7.766,40.043-17.482c8.131-6.191,15.557-13.329,21.477-20.291c-13.813,24.876-39.732,41.811-62.603,41.868
						c-2.028,7.908-3.771,16.146-5.071,24.849c19.412,2.421,43.119-11.418,58.503-21.066c-10.002,12.04-33.677,26.453-59.068,25.088
						c-3.704,20.705-1.778,81.014,4.804,96.983C275.63,552.78,268.197,555.194,265.963,546.055z"/>
				</g>

				<g class="leaf leaf2">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#C08946" d="M265.584,488.954c-28.033-26.512-39.919-58.896-33.272-93.93
						c6.419-33.832,48.289-63.264,73.252-106.008C370.817,379.028,325.01,468.77,265.584,488.954z"/>
					<path fill="#754B1E" d="M265.963,546.055c-7.013-28.679-2.895-76.692-2.344-83.511c-9.768-5.744-27.538-23.512-32.896-42.422
						c7.401,13.082,20.514,29.451,33.314,37.848c0.829-8.207,2.064-15.987,3.592-23.444c-15.863-9.63-32.637-34.471-31.137-52.49
						c6.032,16.533,16.552,37.707,32.056,48.198c2.167-9.722,4.81-18.909,7.662-27.8c-13.271-8.103-28.524-28.987-24.647-44.333
						c0.882,11.718,15.983,33.711,25.961,40.303c1.812-5.481,3.69-10.861,5.571-16.197c0.02-0.065,0.042-0.129,0.068-0.191l1.176-3.33
						c1.132-3.202,2.259-6.393,3.368-9.585c-8.494-6.448-17.28-20.283-16.596-34.356c0.275,0.893,0.566,1.783,0.872,2.669
						c3.844,11.146,9.931,21.44,17.159,27.521c3.62-10.603,6.969-21.273,9.531-32.469c-4.629-4.109-8.315-13.021-8.776-20.452
						c4.593,8.348,6.479,12.229,9.817,15.66c2.274-11.087,5.619-25.124,5.849-38.656c4.472,18.449-0.528,37.111-4.508,52.172
						c8.253-3.653,16.374-10.909,23.362-19.881c-4.187,11.885-15.384,21.752-24.73,24.861c-2.192,7.708-4.678,15.237-7.274,22.75
						c-0.025,0.102-0.06,0.201-0.104,0.301c-1.249,3.607-2.522,7.211-3.801,10.83l-0.113,0.319
						c17.159-2.837,36.282-18.191,45.378-31.703c-3.115,16.567-29.884,34.301-46.906,36.034c-3.875,11.008-7.718,22.226-10.963,34.15
						c12.867-0.459,27.283-7.766,40.043-17.482c8.131-6.191,15.557-13.329,21.477-20.291c-13.813,24.876-39.732,41.811-62.603,41.868
						c-2.028,7.908-3.771,16.146-5.071,24.849c19.412,2.421,43.119-11.418,58.503-21.066c-10.002,12.04-33.677,26.453-59.068,25.088
						c-3.704,20.705-1.778,81.014,4.804,96.983C275.63,552.78,268.197,555.194,265.963,546.055z"/>
				</g>

				<g class="xmasleaf xmasleaf1">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#713717" d="M299.515,410.349c-4.281,15.2-0.9,43.961,6.808,59.858
						c2.654,5.471-2.581,6.881-4.278,3.275c-7.987-16.963-10.682-48.42-4.926-64.963C299.992,400.259,301.095,404.74,299.515,410.349z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#4D724F" d="M293.24,413.863c-6.963,0.51-19.79-3.213-21.655-30.047
						C296.451,394.074,295.925,407.417,293.24,413.863z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#6DAF68" d="M304.027,421.451c-1.235-6.873,1.124-20.018,27.616-24.68
						C324.044,422.574,310.717,423.447,304.027,421.451z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#6DAF68" d="M292.999,437.955c-6.356,2.891-19.678,3.842-30.721-20.686
						C289.157,418.279,293.285,430.98,292.999,437.955z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#6DAF68" d="M300.628,401.091c-4.382-5.438-8.62-18.102,12.386-34.904
						C318.728,392.472,307.454,399.632,300.628,401.091z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#4D724F" d="M304.187,446.145c6.505,2.537,19.858,2.76,29.546-22.334
						C306.948,426.287,303.52,439.195,304.187,446.145z"/>
				</g>

				<g class="xmasleaf xmasleaf2">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#713717" d="M299.515,410.349c-4.281,15.2-0.9,43.961,6.808,59.858
						c2.654,5.471-2.581,6.881-4.278,3.275c-7.987-16.963-10.682-48.42-4.926-64.963C299.992,400.259,301.095,404.74,299.515,410.349z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#4D724F" d="M293.24,413.863c-6.963,0.51-19.79-3.213-21.655-30.047
						C296.451,394.074,295.925,407.417,293.24,413.863z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#6DAF68" d="M304.027,421.451c-1.235-6.873,1.124-20.018,27.616-24.68
						C324.044,422.574,310.717,423.447,304.027,421.451z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#6DAF68" d="M292.999,437.955c-6.356,2.891-19.678,3.842-30.721-20.686
						C289.157,418.279,293.285,430.98,292.999,437.955z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#6DAF68" d="M300.628,401.091c-4.382-5.438-8.62-18.102,12.386-34.904
						C318.728,392.472,307.454,399.632,300.628,401.091z"/>
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#4D724F" d="M304.187,446.145c6.505,2.537,19.858,2.76,29.546-22.334
						C306.948,426.287,303.52,439.195,304.187,446.145z"/>
				</g>

			</svg>
		</section>
@import url("https://fonts.googleapis.com/css?family=Dancing+Script");

html, body {
	margin: 0; 
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    background-color: #3C2C26;
}

.firstcircle {
    stroke: #DCCC97; 
    stroke-width: 5;
    fill: none;
}

.secondcircle {
    stroke: #DCCC97; 
    stroke-width: 0.5;
    fill: none;
}

.thirdcircle {
    stroke: #DCCC97; 
    stroke-width: 1;
    fill: none;
    opacity: 0;
}

.maintitle , .secondtitle {
    width: 100px;
    text-align: center;
    font-family: 'Dancing Script', cursive, sans-serif;
    font-size: 1.7em;
    margin: 0 auto;
    position: relative;
    opacity: 0;
}

.maintitle {
    top: 85px;
}

.secondtitle {
    top: 20px;
}

.leaf1 {
    transform: scale(0.5,0.5) rotate(-36deg) translateX(72px);
    opacity: 0;
}

.leaf2 {
    transform: scale(0.5,0.5) rotate(36deg) translateX(682px) translateY(-935px);
    opacity: 0;
}

.xmasleaf1 {
    transform: rotate(-36deg) translateX(-134px) translateY(-199px);
    opacity: 0;
}

.xmasleaf2 {
    transform: rotate(36deg) translateX(170px) translateY(-670px);
    opacity: 0;
}

.svg-container {
    width: 800px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-content {
    width: 200px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
$(function() {

  function anim() {
    var tl = new TimelineMax();

    tl.to( ".firstcircle" , 1.0, {transformOrigin:"50% 50%", strokeWidth:20, scale:0.5, delay:0.5, ease:Elastic.easeOut})
    .to( ".firstcircle" , 1.0, {transformOrigin:"50% 50%", fill:"#DCCC97", scale:0.8, ease:Elastic.easeOut})
    .to( ".maintitle" , 0.2, {transformOrigin:"50% 50%", opacity:1, ease:Power1.easeOut})
    .to( ".thirdcircle" , 1.0, {transformOrigin:"50% 50%", opacity: 1, scale: 3.2, ease:Elastic.easeOut})
    .staggerTo( ".leaf" , 0.8, { opacity: 1, ease:Power1.easeOut})
    .to( ".maintitle" , 0.2, {opacity: 0, delay: 0.2, ease:Power1.easeOut})
    .staggerTo( ".leaf" , 0.2, { opacity: 0, ease:Power1.easeOut})
    .to( ".secondtitle" , 1.0, {opacity: 1, scale:1.2, ease:Elastic.easeOut})
    .staggerTo( ".xmasleaf" , 0.8, { opacity: 1, ease:Power1.easeOut});


    return tl;

  }

  var master = new TimelineMax({
    repeat: -1
  });

  master.add(anim(), "anim");

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js