Happy New Year - GreenSock DrawSVG Animation

Developer
Petr Tichy
Size
10,551 Kb
Views
60,720
  1. Happy New Year - GreenSock DrawSVG Animation Previews
  2. Happy New Year - GreenSock DrawSVG Animation HTML Codes
  3. Happy New Year - GreenSock DrawSVG Animation CSS Codes
  4. Happy New Year - GreenSock DrawSVG Animation JS Codes

How do I make an happy new year - greensock drawsvg animation?

This preloader animation is a part of the Happy New Year GreenSock SVG Animation by Petr Tichy.Check out the whole animation:. What is a happy new year - greensock drawsvg animation? How do you make a happy new year - greensock drawsvg animation? This script and codes were developed by Petr Tichy on 07 September 2022, Wednesday.

Happy New Year - GreenSock DrawSVG Animation Previews
IQ Test

Happy New Year - GreenSock DrawSVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Happy New Year - GreenSock DrawSVG Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="logoIcon" x="0" y="0" viewBox="0 0 72 35.5" xml:space="preserve" enable-background="new 0 0 72 35.5"> <style> .s0 { fill: #ffffff; } </style> <a xlink:href="https://ihatetomatoes.net/blog/" title="Front-End Development Blog by Petr Tichy" target="_blank"> <path d="M32.5 4c-7.9 0.3-14.2 6.7-14.4 14.6 -0.1 4.3 1.6 8.3 4.4 11.1L43.6 8.3C40.8 5.5 36.8 3.8 32.5 4" fill="#ffffff" /> <path d="M28.6 29.6c2.8 2.8 6.8 4.5 11.1 4.3 7.8-0.3 14.2-6.7 14.4-14.6 0.1-4.3-1.6-8.3-4.4-11.1L28.6 29.6z" fill="#ffffff" /> <polygon points="55.6 35.3 52.6 32.3 66 18.8 52.5 5.4 55.5 2.4 72 18.8 " fill="#ffffff" /> <polygon points="16.5 35.5 0 19.2 16.3 2.6 19.3 5.6 5.9 19.1 19.5 32.5 " fill="#ffffff" /> <path d="M29.9 2.5c0-0.3 0-0.7 0-1 0-0.3 0.2-0.7 0.1-1 -0.2-0.6-1-0.6-1.3-0.1 -0.4 1-0.6 2.1-0.5 3.3 -1.5 0.7-4 0.5-5.6 0 1.2 0.9 2.6 1.5 4.2 1.7 -1.5 0.7-2.9 1.7-4.1 2.8C25.8 6 30.2 6.4 33 9c-0.3-1.1-0.8-2-1.5-2.9 1.7-1.2 3.8-1.7 5.8-1.5 -1.6-0.5-3.3-0.7-5-0.6 0.7-0.5 1.4-1.1 1.9-1.8 -1.5 0.8-2.6 1-4.3 1C29.9 3.1 29.9 2.7 29.9 2.5" fill="#ffffff" /> </a>
</svg>
<div id="sign" class="fs"> <div class="largeF large01"></div> <div class="largeF large02"></div> <div class="largeF large03"></div> <div class="largeF large04"></div> <div class="largeF large05"></div> <div class="largeF large06"></div> <div class="largeF large07"></div> <div class="largeF large08"></div> <div class="largeF large09"></div> <div class="largeF large10"></div> <div class="largeF large11"></div> <div class="largeF large12"></div> <div class="largeF large13"></div> <div class="largeRandom"></div> <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In --> <svg id="hnyText" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="1280px" height="800px" viewBox="0 0 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve"> <defs> </defs> <g id="Happy"> <g id="h1"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M550.5,137.3c-1.5,2.8-3.1,6.1-5.9,7.8c-4.4,2.7-8-0.3-9.5-4.4c-2.1-5.9-1.3-12.9,2.4-18 c8.6-11.9,22.7-5.1,29.5,4.8c10.8,15.8,9.1,37.9,6.8,56c-2.4,19.6-8,39.4-19.2,55.9c-5.8,8.5-13.3,16.7-22.7,21.4 c-11.2,5.7-22.9,3.7-33.4-2.5c-5-3-10.1-6.8-12.9-12.1c-3.8-7-1.6-14.6,2.3-21.1c2.8-4.7,6.6-9.5,11.7-11.9 c6.2-2.9,15.7-0.7,16.4,7.2c0.2,1.9,3.2,1.9,3,0c-0.9-10.6-13.2-13.9-21.5-9.5c-10.1,5.4-19.1,20.2-16.4,31.7 c2.8,11.9,16.5,20.1,27.5,23.2c13.5,3.9,26.2-1.5,36.2-10.6c20.7-18.8,29.4-47.3,32.4-74.3c1.5-13.3,2.2-27.3-1.1-40.4 c-2.8-11-9.7-23-21.1-26.8c-13.9-4.6-25.2,9.3-23.8,22.4c0.6,5.1,2.9,11.9,8.8,12.7c6.6,0.9,10.6-5.3,13.2-10.3 C554,137.1,551.4,135.6,550.5,137.3L550.5,137.3z" /> </g> </g> <g id="h2"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M624.1,183.5c-13.7,2.8-27.3,5.8-41,8.6c-13,2.7-30.2,5.8-39.2-7c-1.1-1.6-3.7-0.1-2.6,1.5 c7.7,11,21.3,12,33.6,10.1c16.8-2.6,33.3-6.9,49.9-10.3C626.8,186,626,183.1,624.1,183.5L624.1,183.5z" /> </g> </g> <g id="h3"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M633.6,122.7c-12,41.1-13.8,84.6-5.2,126.6c0.4,1.9,3.3,1.1,2.9-0.8c-8.5-41.4-6.6-84.4,5.2-125 C637.1,121.6,634.2,120.8,633.6,122.7L633.6,122.7z" /> </g> </g> <g id="a2"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M667.6,183c-0.1,6.6-0.3,13.1-0.4,19.7c-0.1,4.8-1.5,11.6,0.3,16.2c3.6,9.2,12.9-2.6,15.5-6.2 c1.1-1.6-1.5-3.1-2.6-1.5c-1.4,2-8.2,11.5-10.4,4c-0.9-2.9,0.1-7.5,0.2-10.5c0.1-7.2,0.3-14.4,0.4-21.7 C670.6,181.1,667.6,181.1,667.6,183L667.6,183z" /> </g> </g> <g id="a1"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M670.2,188c-3.4-5.1-12-7.9-17.1-3.7c-6.1,5.1-7.3,17.9-6.5,25.2c0.7,6.3,4.9,12,11.8,9.1 c7.2-3,10.1-10.2,11.4-17.4c0.4-1.9-2.5-2.7-2.9-0.8c-0.7,3.9-1.6,7.9-4.2,11c-1.3,1.7-4.3,4.6-6.6,4.8c-4.5,0.3-6-3.5-6.5-7.1 c-0.6-5.5,0.3-11.4,2.1-16.6c1.2-3.3,2.9-7.1,7-7.4c3-0.2,7.2,1.9,8.8,4.3C668.7,191.1,671.3,189.6,670.2,188L670.2,188z" /> </g> </g> <g id="p1"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M682.3,187.3c-0.3,20.8-2.3,41.4-6.1,61.8c-1.8,9.4-3.3,19.6-6.6,28.6c-0.9,3.6-3.7,4.5-8.4,2.7 c-0.9-1.7-1.4-3.5-1.6-5.5c-0.3-2.7,0.2-5.4,0.8-8.1c1.1-4.4,2.9-8.5,4.7-12.6c3.9-9.3,7.8-18.5,11.7-27.8 c3.9-9.3,7-20,12.4-28.6c1.7-2.8,4.3-5.6,7.8-5.6c4.2-0.1,5.7,3.4,6.5,6.9c1.1,5.1,1.5,11.6-0.4,16.5c-2.1,5.5-6.5,8.8-11.8,5.5 c-2.8-1.8-6.1-4.7-7.3-7.9c-0.7-1.8-3.6-1-2.9,0.8c1.9,5.1,7.8,10.8,13.3,11.7c7.2,1.2,11.7-7.7,12.6-13.4 c0.9-6.5,1-19.5-6.6-22.5c-7.7-3-13.3,4.8-15.9,10.8c-4.7,10.7-9,21.5-13.6,32.3c-4.5,10.8-10.5,21.8-13.3,33.2 c-1.4,5.6-2.1,19.2,6.6,19.6c8.5,0.4,9.8-12.4,11.2-18.2c6.3-26.3,9.6-53.2,10-80.3C685.3,185.4,682.3,185.4,682.3,187.3 L682.3,187.3z" /> </g> </g> <g id="p2"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M717.9,187.3c-0.3,20.8-2.3,41.4-6.1,61.8c-1.7,9-3.3,18.5-6.2,27.3c-0.3,1.2-0.8,2.4-1.4,3.5 c-4.9,2.7-7.7,2.1-8.4-2c-0.9-3-0.7-6.2-0.1-9.3c0.9-4.7,2.8-9.1,4.7-13.4c4-9.6,8-19.1,12-28.7c3.8-9,7-18.7,11.6-27.3 c3.2-6,11.9-11,14.7-1.5c1.4,4.8,1.8,11.7,0.4,16.5c-1.4,4.9-5.4,10-11,8.1c-3.3-1.1-7.4-3.8-8.7-7.2c-0.7-1.8-3.6-1-2.9,0.8 c1.9,4.9,8,9.3,13.2,9.9c7.8,0.9,12.3-8.3,12.9-14.6c0.6-6.3,0.6-18.7-6.9-21.4c-8-2.9-13.4,5.4-16.1,11.6 c-4.6,10.8-9.1,21.6-13.6,32.4c-4.6,10.9-11,22.4-13.3,34c-1.1,5.5-0.9,17.8,7.2,17.9c8.6,0.1,9.8-13.3,11.2-19.1 c6.1-26,9.3-52.6,9.8-79.3C721,185.4,718,185.4,717.9,187.3L717.9,187.3z" /> </g> </g> <g id="y1"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M847,224.1c-4.3,6.1-10.6,13.4-18.8,12.7c-7.2-0.6-11.8-8.1-11.8-14.8c0-7.8,6.4-13.6,13.4-15.7 c7.2-2.1,14.7-0.5,21,3.4c6.4,3.9,11.8,10,15.2,16.7c4.1,8.1,3.3,16.2-1.6,23.7c-7.6,11.7-21.7,18.7-35.6,18.6 c-27.8-0.3-49.4-36.7-78.4-25.3c-9.8,3.9-17.4,13.4-18.2,24c-0.9,11,8.6,18.6,18.6,12.5c5.6-3.5,8.1-10.1,10.1-16.1 c2.9-8.8,5.3-17.7,7.6-26.6c4.5-18.1,7.8-36.5,9.9-55.1c0.2-1.7-2.7-2.1-2.9-0.4c-1.8,11.7-6.5,22.7-14.2,31.7 c-1.6,1.9-4,5.8-6.7,2.7c-0.4-0.5-0.6-1.4-0.9-2.1c-1-2.8-1.7-5.8-2.2-8.8c-1.1-5.7-1-11.4-1.6-17.2c-0.3-2.7-1.5-5-3.4-6.9 c-4.9-4.9-12.3-5.7-17.2-0.5c-1.3,1.4,0.8,3.5,2.1,2.1c4.3-4.5,10.9-2.9,14.2,1.9c2.7,3.9,1.5,11.1,2.1,15.8 c0.7,5.5,1.6,11.5,4,16.6c4.1,8.6,10.3,0.3,13.9-4.3c6.8-8.8,11.1-19.2,12.8-30.2c-1-0.1-2-0.3-2.9-0.4 c-2.1,18.3-5.4,36.4-9.8,54.3c-2.2,8.9-4.7,17.8-7.6,26.6c-1.3,4.1-2.8,8.4-5.7,11.7c-3.5,3.9-10,6.4-14.2,2.3 c-6.6-6.3-1.5-18.1,3.5-23.8c5.5-6.2,13.4-9.3,21.7-8.6c17.5,1.4,30.4,14.8,45.5,22.1c11.8,5.7,24.8,6.7,37.1,1.8 c11.1-4.3,21.5-13.4,25-25.1c3.9-12.9-5.2-26.3-15-34c-9.5-7.4-22.7-10.1-33.2-3.2c-10,6.4-12.4,20.2-3.9,28.9 c10.7,11,24.1-0.2,30.9-9.7C850.8,224.1,848.2,222.6,847,224.1L847,224.1z" /> </g> </g> </g> <g id="New"> <g id="n1"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M475.4,316.7c-2.3,3.7-5.6,7.5-9.9,8.9c-6,1.8-10.1-3.3-10.4-8.8c-0.4-7.6,6-14.2,13.2-15.9 c17.7-4.1,23.2,19.3,24.4,32c1.8,17.9,0,36.2-0.8,54.2c-0.8,18.4-1.6,36.8-2.5,55.2c-0.1,1.9,2.9,1.9,3,0 c0.9-20,1.8-40.1,2.7-60.1c0.8-18.9,2.8-38.4-0.5-57.2c-1.9-11.1-7.5-25.1-20.1-27.2c-10.8-1.8-22.4,7.2-22.5,18.4 c0,5.8,3.4,12,9.6,12.8c7,0.9,12.8-5.3,16.3-10.7C479,316.6,476.4,315.1,475.4,316.7L475.4,316.7z" /> </g> </g> <g id="n2"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M496.5,359.2c1.4-12.7,4.1-25.4,9.2-37.2c4.5-10.3,10.9-21.4,20.7-27.5c5.3-3.3,12.2-4.8,18.2-2.8 c6.5,2.1,10.3,8,12.1,14.3c3.4,11.6,2.4,24.6,1.2,36.4c-2.5,24.4-9,48.6-6.3,73.2c1.1,9.8,3.6,19.5,8.3,28.3 c4.1,7.6,10.4,16.3,19.7,17.2c9.7,0.9,14.9-7.2,15.8-15.8c0.7-6.5-0.9-20.1-10.8-15.9c-1.8,0.8-0.2,3.3,1.5,2.6 c7.5-3.2,6.7,11.8,5.9,15.5c-1.4,6.7-6.1,11.9-13.5,10.4c-10.8-2.2-17.2-16.1-20.3-25.4c-7.2-21.5-4-44.7-0.6-66.5 c1.8-11.7,3.7-23.4,4.1-35.2c0.4-9.7,0.3-20.5-3.5-29.6c-7.4-17.4-27.7-16-39.7-4.3c-16.4,15.8-22.5,40.5-25,62.3 C493.3,361.2,496.3,361.1,496.5,359.2L496.5,359.2z" /> </g> </g> <g id="ew"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M559.6,376c8.2,11.6,22.8-2.7,27.7-10.3c2.9-4.5,6.8-11.6,5.8-17.3c-0.9-5.2-5.8-5.1-9.2-2.2 c-9.4,7.9-12.7,21.4-11.1,33.2c1.2,9,7.8,28.4,20,19.7c6.4-4.5,10.2-13.2,13.1-20.1c3.7-8.6,5.9-17.7,6.8-27 c0.2-1.7-2.7-2.1-2.9-0.4c-1.1,8.3-2.1,16.6-3,25c-0.6,6.4-2.5,14.8,1,20.8c2.4,4.1,6.1,3.5,8.5-0.2c4.1-6.5,6.1-15.1,7.4-22.6 c-1-0.3-1.9-0.5-2.9-0.8c-1,6.7-2.6,15.3-0.1,22c1.4,3.7,5,6.8,9.1,4.7c5-2.6,5.7-10.7,6.6-15.4c1.6-8.7,2.3-17.5,2.2-26.3 c0-1.9-3-1.9-3,0c0.1,10.7-0.9,21.4-3.4,31.9c-0.7,3-1.1,4.9-4.2,6.2c-2.8,1.2-3.2,0.6-4.4-2c-0.5-1.1-0.6-2.2-0.8-3.3 c-0.6-5.5,0-11.4,0.9-16.8c0.3-1.9-2.6-2.7-2.9-0.8c-0.9,4.9-2.1,9.7-3.8,14.4c-0.6,1.5-1,4.1-2.2,5.3c-0.3,0.5-0.5,1.1-0.8,1.6 c-1.5-0.3-2.9-0.5-4.4-0.8c-1.3-1.2-0.8-6.2-0.7-7.8c0.6-11.4,2.2-22.7,3.7-34c-1-0.1-2-0.3-2.9-0.4c-1.3,13.4-5.6,26.6-12.9,38 c-2,3.1-4.5,6.9-8.3,7.8c-4.9,1.1-7.2-2.8-9.1-6.6c-2.5-5.1-3.8-10.7-4-16.3c-0.2-5.5,0.8-11.2,3-16.3c0.9-2,2-4,3.3-5.7 c1-1.3,2.1-2.6,3.3-3.7c2.7-2.5,5.1-1,5,2.7c-0.3,8.4-19.3,34.7-27.8,22.6C561.1,373,558.5,374.4,559.6,376L559.6,376z" /> </g> </g> </g> <g id="Year"> <g id="y2"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M727.7,299.2c-5.1,28.9-11.4,57.5-19,85.9c-3.8,14-7.8,27.9-12.2,41.7c-2,6.3-4.1,12.7-8,18.1 c-4.4,6.1-11,9.9-18.1,11.9c-10.5,2.9-29.9,4-33.2-9.8c-4.3-18.2,26.4-12.6,35.6-10.4c20.1,4.9,46.7,27.1,67.5,12.6 c7.1-5,10.6-15.9,3.4-22.5c-6.1-5.6-16.9-1.1-16.6,7.3c0.1,1.9,3.1,1.9,3,0c-0.2-3.9,3.3-7,7.2-6.9c3.6,0.1,6.1,2.9,7,6.2 c2.3,8-4.7,14.2-11.7,16.3c-13.4,4-27-3.2-38.9-8.5c-11.4-5.1-22.9-8.9-35.5-9.7c-8.5-0.5-21.5-1-24.1,9.5 c-2,8,3.5,15.5,10.6,18.5c9.8,4.1,22.7,2.4,32.2-1.8c9.8-4.3,15.8-12.1,19.7-22c5-12.8,8.5-26.3,12.2-39.5 c8.9-31.6,16.1-63.7,21.8-96.1C730.9,298.1,728,297.3,727.7,299.2L727.7,299.2z" /> </g> </g> <g id="y3"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M652.5,320c-2.6,2.5-5.8,5.6-9.7,5.6c-3.7,0-5.7-4.7-5.2-7.9c0.4-2,1-3.9,1.9-5.7 c3.3-6.8,11.1-13.2,19.1-11.8c16.3,3,10.8,31.2,8.6,41.9c-2.8,13.6-7.9,28.8-4.3,42.7c2.5,9.5,10.9,18.7,21.5,17.3 c10.7-1.4,21.7-10.1,27.7-18.8c1.1-1.6-1.5-3.1-2.6-1.5c-7.5,10.8-25.9,24.3-37.9,12.7c-13.9-13.5-4.2-38.2-1.1-54.3 c2.3-11.9,5.7-31.7-5.6-40.4c-10.4-8-24.3,2-28.6,12c-2.1,4.9-3.8,12.7,2,15.8c6.1,3.2,12-1.5,16.3-5.5 C656.1,320.8,653.9,318.7,652.5,320L652.5,320z" /> </g> </g> <g id="e"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M728.6,383.5c10.2-7.4,18.1-17.5,22.5-29.3c1.4-3.7,4.8-11.2,2.6-15.1c-2.3-4.2-8-0.8-10.8,1.1 c-10.2,7.1-15.4,20.4-17.2,32.3c-1.6,11.1,1,25.6,12.7,30.4c5.3,2.2,9.5-0.6,13.4-4c4.7-4.2,9.8-9,11.6-15.3 c0.5-1.9-2.4-2.7-2.9-0.8c-1.6,5.6-6.1,9.8-10.3,13.5c-1.8,1.6-4.2,4-6.8,4.2c-4.1,0.3-7.7-2.5-10.2-5.5 c-8.7-10.6-4.9-27.1,0.4-38.4c2.5-5.3,6-10.4,10.9-13.9c2.6-1.8,7.4-4.3,6.5,1c-0.5,2.8-1.3,5.5-2.2,8.2 c-4,11.7-11.7,21.8-21.7,29C725.5,382,727,384.6,728.6,383.5L728.6,383.5z" /> </g> </g> <g id="ar"> <g> <path stroke-width="4" fill="none" stroke="#F5CD08" d="M788.3,351.1c-8.9-1-17.1,3.3-22,10.7c-5.3,7.9-7.5,21.7-5.2,30.9c0.9,3.5,3.5,6.1,7.4,5.6 c5-0.6,7.5-5.9,9.6-9.7c7-12.5,10.9-26.3,14.8-40c0.5-1.9-2.3-2.6-2.9-0.8c-2.8,8.9-5.1,17.9-6.8,27c-1,5.5-3.6,13.9-0.4,19.2 c3.1,5,9.8,5.1,14.4,2.4c5.8-3.3,9.9-9.9,13.1-15.5c3.8-6.7,6.4-14,7.6-21.6c0.5-3.3,0.8-6.7,0.9-10.1c0-2.9,0.4-7-1.1-9.7 c-2.3-4.2-7.4-1.9-9.6,1.1c-3.4,4.6-4,11.9-1.9,17.2c2.8,7.1,10,5.9,15.8,3.1c7-3.4,12.4-9.2,15.4-16.3 c-0.9-0.4-1.8-0.8-2.7-1.2c-6.3,16.1-12.1,32.7-13.7,50c-1.1,11.7-0.5,27.3,11.7,33.2c10.8,5.2,24,0.3,30.9-8.8 c3.9-5.1,6.1-11.2,7.2-17.5c0.8-4.8,2.3-11.7-0.7-16c-2.4-3.5-7.3-4.7-11.2-3c-6.1,2.7-6.8,10.7-7.1,16.4c-0.1,1.9,2.9,1.9,3,0 c0.2-3.9,0.4-9.1,3.2-12.2c2.2-2.4,6.2-2.9,8.7-0.6c4.2,3.8,1.4,14.4,0.2,19c-3.5,13-15.4,25-30,20.9 c-15.2-4.3-14.1-23.7-12.4-36.1c2.1-15.5,7.4-30.3,13.1-44.8c0.6-1.6-2.1-2.7-2.7-1.2c-2.4,5.5-6.1,10.2-11.1,13.5 c-2.3,1.5-7,4.4-9.9,3.8c-5.6-1.2-6.4-7.7-5.5-12.3c0.3-1.7,0.7-4.2,2.1-5.3c2.4-2,4.7-0.2,5.2,2.5c0.5,2.8,0.1,6.2-0.1,9 c-0.5,6-1.9,12-4.2,17.6c-2.3,5.8-5.5,11.4-9.4,16.2c-2.1,2.6-4.4,5.2-7.5,6.4c-2.9,1.2-7,0.8-9.1-1.9c-1-1.2-1-3.3-1-4.8 c0-6.4,1.8-13.1,3.1-19.3c1.5-6.7,3.3-13.2,5.3-19.7c-1-0.3-1.9-0.5-2.9-0.8c-2.7,9.6-5.4,19.2-9.2,28.3c-1.9,4.5-4,8.8-6.5,13 c-0.5,0.8-0.9,1.6-1.4,2.3c-1.7,2.5-1.7,2.4-5.1,2.3c-3.5-0.2-3.4,0.1-4-2.8c-0.2-1.2-0.3-2.4-0.3-3.7 c-0.5-15.1,6-35.4,24.8-33.2C790.2,354.4,790.2,351.4,788.3,351.1L788.3,351.1z" /> </g> </g> </g> <g id="no2016"> <g id="no2"> <g> <path stroke-width="4" fill="none" stroke="#FFFFFF" d="M514.8,499.6c9.8-9.1,22.7-15.8,36.2-16.7c18.4-1.3,24.1,15.7,23.1,31.2c-1.9,28-10.4,56.2-22.6,81.3 c-5.9,12.1-12.7,24-21,34.6c-3.7,4.7-7.8,9.2-12.3,13.3c-4.6,4.2-14.8,14.3-21.4,10c-8.3-5.4-3.3-16.1,1.4-22 c3.7-4.6,8.3-8.5,13.4-11.5c11.6-6.7,24.8-7.4,36,0.5c10.7,7.5,18.2,18.5,30.8,23.2c11.8,4.4,24.9,3.6,36.2-1.8 c1.7-0.8,0.2-3.4-1.5-2.6c-15.4,7.4-33.4,4.8-46.4-6c-9.8-8.2-18.2-19.3-31.6-21.3c-12.6-1.9-25.3,4-34.3,12.5 c-7.6,7.2-17.2,21.5-6.8,30.6c4.5,4,9.7,2.6,14.4-0.2c6.2-3.8,11.8-8.6,16.7-13.8c10.6-11,18.8-24.1,25.9-37.6 c14.5-27.8,25.4-60.4,26.4-92c0.4-14.4-5.8-30.3-22.1-31.3c-15.4-1-31.5,7.4-42.5,17.6C511.3,498.8,513.4,500.9,514.8,499.6 L514.8,499.6z" /> </g> </g> <g id="no0"> <g> <path stroke-width="4" fill="none" stroke="#FFFFFF" d="M623.7,505.7c-22,7.9-32.7,33.2-36.4,54.6c-4.3,25,3,55.6,31,62.1c29.4,6.8,54.4-16.8,61-43.8 c4-16.4,2.7-34.2-2-50.3c-3.9-13.3-12.3-29.9-27.2-33.4c-6.3-1.4-14,0-18.1,5.3c-5.2,6.6,4,8.9,8.7,10 c15.4,3.6,35.4,4.8,44.2-11.4c0.9-1.7-1.7-3.2-2.6-1.5c-7.5,13.8-24.7,13.5-38.1,10.6c-2.6-0.6-12.7-1.2-9-6.8 c1.7-2.5,6.7-3.6,9.4-3.7c7.5-0.4,14.1,4.4,18.7,9.9c9.3,11.1,13.2,26.3,14.7,40.4c1.5,14.2,0.3,29.1-5.8,42.1 c-10.5,22.4-35.9,38.1-60.2,27.4c-21.6-9.5-25.4-36.3-21.6-57.1c3.6-19.9,13.5-44.1,34.1-51.5 C626.3,508,625.5,505.1,623.7,505.7L623.7,505.7z" /> </g> </g> <g id="no1"> <g> <path stroke-width="4" fill="none" stroke="#FFFFFF" d="M700.8,504.2c11.8-6.2,22.7-14,32.3-23.3c-0.9-0.4-1.7-0.7-2.6-1.1c-1.8,17.5-6.3,34.5-11,51.5 c-4.6,17-9.3,34-14.1,50.9c-4.7,16.6-9.5,33.2-14.6,49.8c-2.3,7.4-4,16.9-9.7,22.5c-2.5,2.4-7.3,3.1-9.2-0.3 c-1.1-1.9-1.1-4.2-0.2-6.2c2-4.4,7.3-4.8,11.5-5.8c19.1-4.5,38.5-8.2,58-11.1c1.9-0.3,1.1-3.2-0.8-2.9 c-21.3,3.1-42.8,6.8-63.6,12.4c-5.2,1.4-9.3,5.5-8.7,11.3c0.6,5.2,5.4,9.3,10.6,7.7c6.9-2.1,9.9-10.9,11.9-16.9 c3.3-10.1,6.3-20.3,9.3-30.5c6.2-21,12.1-42,17.8-63.1c6.3-22.8,13.4-45.6,15.7-69.2c0.1-1.4-1.7-1.9-2.6-1.1 c-9.5,9.1-20.1,16.7-31.7,22.8C697.6,502.5,699.1,505.1,700.8,504.2L700.8,504.2z" /> </g> </g> <g id="no6"> <g> <path stroke-width="4" fill="none" stroke="#FFFFFF" d="M795.1,486c-16,15.3-31,31.8-42.4,50.9c-5.6,9.5-10.3,19.5-13.5,30.1c-2.7,8.8-4.9,19-0.8,27.7 c3.5,7.5,11.4,11.8,19.5,12.6c9.1,0.9,17.8-3.1,24.7-8.9c14.4-12.1,25.3-34.6,21.9-53.7c-1.7-9.5-8.4-16.7-18.4-16.6 c-11.4,0.1-19.8,8.5-27.1,16.2c-1.3,1.4,0.8,3.5,2.1,2.1c6.4-6.8,13.7-14.4,23.5-15.3c10.8-0.9,16.8,7.6,17.4,17.5 c1.1,17.3-8.3,36.6-21.5,47.6c-7.1,5.9-16.3,9.6-25.6,7.5c-9.6-2.2-15.6-9.9-15.7-19.7c-0.1-8.9,3.1-18.1,6.4-26.2 c3.3-8.2,7.5-16.1,12.2-23.5c10.9-17.1,24.7-32.1,39.3-46.1C798.6,486.8,796.5,484.6,795.1,486L795.1,486z" /> </g> </g> </g> </svg>
</div>
<a href="https://ihatetomatoes.net/happy-new-year/" target="_blank" class="goToDemo">View full demo</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=5'></script>
<script src='https://code.createjs.com/createjs-2015.11.26.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Happy New Year - GreenSock DrawSVG Animation - Script Codes CSS Codes

body { background: #11121e;
}
#sign { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#hnyText { z-index: 2; position: relative;
}
.largeF,
.largeRandom { width: 150px; height: 150px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%), rotate(0); transform: translate(-50%, -50%), rotate(0); background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-white.png") no-repeat top left; z-index: 1; opacity: 0;
}
.largeF.is-animating,
.largeRandom.is-animating { opacity: 1; -webkit-animation: fire 0.7s steps(21, end) 0s 1; animation: fire 0.7s steps(21, end) 0s 1;
}
.largeF.large01,
.largeRandom.large01 { margin-left: -200px; margin-top: -257px;
}
.largeF.large02,
.largeRandom.large02 { margin-left: -32px; margin-top: -263px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-red.png");
}
.largeF.large03,
.largeRandom.large03 { margin-left: 19px; margin-top: -297px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-green.png");
}
.largeF.large04,
.largeRandom.large04 { margin-left: -224px; margin-top: -33px;
}
.largeF.large05,
.largeRandom.large05 { margin-left: -128px; margin-top: -47px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-blue.png");
}
.largeF.large06,
.largeRandom.large06 { margin-left: -79px; margin-top: -115px;
}
.largeF.large07,
.largeRandom.large07 { margin-left: 13px; margin-top: -45px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-red.png");
}
.largeF.large08,
.largeRandom.large08 { margin-left: 49px; margin-top: -95px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-blue.png");
}
.largeF.large09,
.largeRandom.large09 { margin-left: 149px; margin-top: -95px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-green.png");
}
.largeF.large10,
.largeRandom.large10 { margin-left: -102px; margin-top: 168px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-red.png");
}
.largeF.large11,
.largeRandom.large11 { margin-left: -30px; margin-top: 22px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-green.png");
}
.largeF.large12,
.largeRandom.large12 { margin-left: 27px; margin-top: 154px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-blue.png");
}
.largeF.large13,
.largeRandom.large13 { margin-left: 47px; margin-top: 69px;
}
@-webkit-keyframes fire { 0% { opacity: 1; background-position: 0 0; -webkit-transform: translate(-50%, -50%), rotate(0); transform: translate(-50%, -50%), rotate(0); } 90% { opacity: 0.8; } 100% { opacity: 0; background-position: -3150px 0; -webkit-transform: translate(-50%, -50%), rotate(180deg); transform: translate(-50%, -50%), rotate(180deg); }
}
@keyframes fire { 0% { opacity: 1; background-position: 0 0; -webkit-transform: translate(-50%, -50%), rotate(0); transform: translate(-50%, -50%), rotate(0); } 90% { opacity: 0.8; } 100% { opacity: 0; background-position: -3150px 0; -webkit-transform: translate(-50%, -50%), rotate(180deg); transform: translate(-50%, -50%), rotate(180deg); }
}
#h1 path,
#h2 path,
#h3 path,
#a1 path,
#a2 path,
#p1 path,
#p2 path,
#y2 path,
#n1 path,
#n2 path,
#ew path,
#y2 path,
#y3 path,
#e path,
#ar path,
#no2 path,
#no0 path,
#no1 path,
#no6 path { opacity: 1;
}
#logoIcon { position: fixed; top: 30px; left: 30px; z-index: 999; width: 80px; height: 39px; opacity: 0.7;
}
#logoIcon:hover { opacity: 1;
}
.goToDemo { display: block; position: absolute; top: 30px; right: 30px; color: #fff; text-decoration: none; text-transform: uppercase; padding: 10px 15px; border: 1px #fff solid; opacity: 0.7; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;
}
.goToDemo:hover { background: #fff; color: #212121; opacity: 1;
}

Happy New Year - GreenSock DrawSVG Animation - Script Codes JS Codes

var $sign = $('#sign'), cssExplosionTime = 0.7, $h1 = $('#h1 path'), $h2 = $('#h2 path'), $h3 = $('#h3 path'), $a1 = $('#a1 path'), $a2 = $('#a2 path'), $p1 = $('#p1 path'), $p2 = $('#p2 path'), $y1 = $('#y1 path'), // HNY Text - New Year $n1 = $('#n1 path'), $n2 = $('#n2 path'), $ew = $('#ew path'), $y2 = $('#y2 path'), $y3 = $('#y3 path'), $e = $('#e path'), $ar = $('#ar path'), // HNY Text - 2016 $no2 = $('#no2 path'), $no0 = $('#no0 path'), $no1 = $('#no1 path'), $no6 = $('#no6 path');
function getFireworksTL() { var fireworksTL = new TimelineMax(); // TODO: Draw Happy New Year var textInTl = new TimelineMax({ repeat: -1, repeatDelay: 3 }); TweenMax.set([ $h1, $h2, $h3, $a1, $a2, $p1, $p2, $y1, $n1, $n2, $ew, $y2, $y3, $e, $ar, $no2, $no0, $no1, $no6 ], { autoAlpha: 1 }); textInTl .to($sign, 0.3, { autoAlpha: 1, ease: Power0.easeNone }) .add('explode-h') .set($('.large01'), { className: '+=is-animating' }, 'explode-h') .fromTo($h1, 0.4, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.2') .fromTo($h2, 0.2, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.3') .fromTo($h3, 0.3, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.3') .set($('.large01'), { className: '-=is-animating' }, 'explode-h+=' + cssExplosionTime) .add('explode-a') .fromTo($a1, 0.2, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.4') .fromTo($a2, 0.1, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.4') .add('explode-p') .set($('.large02'), { className: '+=is-animating' }, 'explode-h+=0.4') .fromTo($p1, 0.2, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.5') .fromTo($p2, 0.2, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.5') .set($('.large02'), { className: '-=is-animating' }, 'explode-p+=' + cssExplosionTime) .add('explode-y') .set($('.large03'), { className: '+=is-animating' }, 'explode-h+=0.5') .fromTo($y1, 0.4, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=0.6') .set($('.large03'), { className: '-=is-animating' }, 'explode-y+=' + cssExplosionTime) // new year .add('explode-n') .set($('.large04'), { className: '+=is-animating' }, 'explode-h+=1.5') .fromTo($n1, 0.4, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=1.6') .fromTo($n2, 0.4, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=1.6') .set($('.large04'), { className: '-=is-animating' }, 'explode-n+=' + cssExplosionTime) .add('explode-ew') .set($('.large05'), { className: '+=is-animating' }, 'explode-h+=1.6') .fromTo($ew, 0.6, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=1.7') .set($('.large05'), { className: '-=is-animating' }, 'explode-ew+=' + cssExplosionTime) .add('explode-y2') .set($('.large06'), { className: '+=is-animating' }, 'explode-h+=1.7') .fromTo($y2, 0.3, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=1.9') .fromTo($y3, 0.4, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=2') .set($('.large06'), { className: '-=is-animating' }, 'explode-y2+=' + cssExplosionTime) .add('explode-e') .set($('.large07'), { className: '+=is-animating' }, 'explode-h+=1.8') .set($('.large08'), { className: '+=is-animating' }, 'explode-h+=1.9') .set($('.large09'), { className: '+=is-animating' }, 'explode-h+=2') .fromTo($e, 0.3, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=2.1') .fromTo($ar, 0.4, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=2.2') .set($(['.large07', '.large08', '.large09']), { className: '-=is-animating' }, 'explode-e+=' + cssExplosionTime) // 2016 .add('explode-20') .set($('.large10'), { className: '+=is-animating' }, 'explode-h+=3.1') .set($('.large11'), { className: '+=is-animating' }, 'explode-h+=3.2') .set($('.large12'), { className: '+=is-animating' }, 'explode-h+=3.3') .set($('.large13'), { className: '+=is-animating' }, 'explode-h+=3.4') .fromTo($no2, 0.3, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=3.2') .fromTo($no0, 0.3, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=3.3') .add('explode-16') .fromTo($no1, 0.3, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut }, 'explode-h+=3.4') .fromTo($no6, 0.3, { drawSVG: '50% 50%' }, { drawSVG: '100%', ease: Power1.easeOut, onComplete: playFireworks }, 'explode-h+=3.5') .set($(['.large10', '.large11', '.large12', '.large13']), { className: '-=is-animating' }, 'explode-e+=' + cssExplosionTime) // Reset .to([ $h1, $h2, $h3, $a1, $a2, $p1, $p2, $y1, $n1, $n2, $ew, $y2, $y3, $e, $ar, $no2, $no0, $no1, $no6 ], 0.3, { drawSVG: '0', ease: Power1.easeIn }, 'explode-h+=8.8'); fireworksTL .add(textInTl, 1.3); return fireworksTL;
}
function playFireworks() { mainTimeline.play();
}
getFireworksTL();
Happy New Year - GreenSock DrawSVG Animation - Script Codes
Happy New Year - GreenSock DrawSVG Animation - Script Codes
Home Page Home
Developer Petr Tichy
Username ihatetomatoes
Uploaded September 07, 2022
Rating 4.5
Size 10,551 Kb
Views 60,720
Do you need developer help for Happy New Year - GreenSock DrawSVG Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Petr Tichy (ihatetomatoes) Script Codes
Name
Google SVG Logo - GreenSock Animation
Shopping Cart
JQuery For a Complete Beginners - Console, Window.Scroll, Window.Resize
Ihatetomatoes Animation - Crossbrowser
Animating SVG With GreenSock
Merry Christmallax - Part 2
GreenSock - Scale Box on Hover
GreenSock - Each Loop with tweens
JQuery For a Complete Beginners - Click, Hover, ToggleClass
CSS3 Button Hover State
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!