Love 2 rainbow

Developer
Kasper
Size
3,360 Kb
Views
14,168
  1. Love 2 rainbow Previews
  2. Love 2 rainbow HTML Codes
  3. Love 2 rainbow CSS Codes
  4. Love 2 rainbow JS Codes

How do I make an love 2 rainbow?

What is a love 2 rainbow? How do you make a love 2 rainbow? This script and codes were developed by Kasper on 19 December 2022, Monday.

Love 2 rainbow Previews
IQ Test

Love 2 rainbow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Love 2 rainbow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" class="regenboog" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
</filter> </defs>
<g id="regenboog">	<path id="Paars" fill="none" stroke="#513C8B" stroke-width="4" stroke-miterlimit="10" d="M21.486,61.781	c0-14.522,13.046-26.294,29.14-26.294s29.14,11.772,29.14,26.294"/>	<path id="Blauw" fill="none" stroke="#185FAF" stroke-width="4" stroke-miterlimit="10" d="M18.147,61.781	c0-16.282,14.507-29.481,32.403-29.481s32.403,13.199,32.403,29.481"/>	<path id="Groen" fill="none" stroke="#509C41" stroke-width="4" stroke-miterlimit="10" d="M14.552,61.796	c0-18.26,16.117-33.062,35.998-33.062s35.998,14.803,35.998,33.062"/>	<path id="Geel" fill="none" stroke="#DED724" stroke-width="4" stroke-miterlimit="10" d="M10.947,61.796	c0-20.209,17.637-36.591,39.394-36.591s39.394,16.382,39.394,36.591"/>	<path id="Oranje" fill="none" stroke="#DE8601" stroke-width="4" stroke-miterlimit="10" d="M7.305,61.796	c0-22.032,19.09-39.892,42.638-39.892s42.638,17.86,42.638,39.892"/>	<path id="Rood" fill="none" stroke="#C43026" stroke-width="4" stroke-miterlimit="10" d="M3.776,61.796	c0-23.981,20.695-43.421,46.224-43.421s46.224,19.44,46.224,43.421"/>
</g>
<g class="hartlijngroep" filter='url(#goo)'>
<path class="hart" fill="#E561D2" d="M49.871,76.5c0.057,0.001,1.338-1.002,1.878-1.422c2.269-1.768,4.468-3.657,6.478-5.717	c1.129-1.157,2.221-2.383,3.087-3.753c0.35-0.57,0.69-1.159,0.893-1.801c0.266-0.722,0.343-1.561,0.377-2.325	c0.011-0.24-0.007,0.147,0,0c0.046-0.997-0.056-2.024-0.377-2.973c-0.362-1.073-1.017-2.042-1.953-2.695	c-1.022-0.713-2.274-0.985-3.505-0.973c-2.738,0.027-5.347,1.432-6.878,3.703c-1.465-2.174-3.92-3.563-6.538-3.693	c-1.25-0.062-2.552,0.13-3.65,0.76c-0.943,0.541-1.662,1.387-2.083,2.386c-0.532,1.263-0.596,2.68-0.419,4.024	c0.063,0.482,0.15,0.972,0.305,1.433c0.248,0.738,0.64,1.419,1.063,2.069c0.829,1.347,1.948,2.572,3.048,3.701	c1.201,1.232,2.447,2.414,3.738,3.551c1.116,0.984,2.248,1.993,3.447,2.876c0.259,0.205,0.992,0.822,1.085,0.847L49.871,76.5z"/>
<g id="Lijngroep">	<line fill="none" stroke="#E561D2" stroke-miterlimit="10" x1="53.518" y1="62.27" x2="60.523" y2="52.14"/>	<line fill="none" stroke="#E561D2" stroke-miterlimit="10" x1="54.521" y1="62.395" x2="64.893" y2="56.205"/>	<line fill="none" stroke="#E561D2" stroke-miterlimit="10" x1="51.38" y1="64.065" x2="55.656" y2="52.491"/>	<line fill="none" stroke="#E561D2" stroke-miterlimit="10" x1="47.881" y1="64.2" x2="44.032" y2="52.491"/>	<line fill="none" stroke="#E561D2" stroke-miterlimit="10" x1="46.131" y1="62.27" x2="39.127" y2="52.14"/>	<line fill="none" stroke="#E561D2" stroke-miterlimit="10" x1="45.156" y1="62.395" x2="34.784" y2="56.205"/>	<line fill="none" stroke="#E561D2" stroke-miterlimit="10" x1="49.844" y1="67.858" x2="49.844" y2="55.512"/>
</g>
</g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Love 2 rainbow - Script Codes CSS Codes

body { height:100%; overflow:hidden; text-align:center;
}
svg { width:400px; height:400px;
}
.hart { opacity:0;
}

Love 2 rainbow - Script Codes JS Codes

var hart = $('.hart'), paars =$('#Paars'), blauw = $('#Blauw'), groen = $('#Groen'), geel = $('#Geel'), oranje = $('#Oranje'), rood = $('#Rood'), lijntjes = $('#Lijngroep line')
var masterTL = new TimelineMax({repeat:0}),
rainbowTL = new TimelineMax({}),
hartTL = new TimelineMax({}),
lijnTL = new TimelineMax({repeat:3,repeatDelay:0.6}),
growhartTL = new TimelineMax({repeat:6})
rainbowTL.from(paars, 0.7, { opacity:0,drawSVG : "0%"
})
.from(blauw,0.7, {opacity:0, drawSVG:'0%'}, '-=0.6')
.from(groen,0.7, {opacity:0, drawSVG:'0%'}, '-=0.6')
.from(geel,0.7, {opacity:0, drawSVG:'0%'}, '-=0.6')
.from(oranje,0.7, {opacity:0, drawSVG:'0%'}, '-=0.6')
.from(rood,0.7, {opacity:0, drawSVG:'0%'}, '-=0.6');
hartTL .fromTo(hart,1.2,{opacity:0,scale:0.5,transformOrigin : '50% 50%'},{opacity:1,scale:1.2,ease:Power2.easeOut})
lijnTL.fromTo(lijntjes,0.4,{drawSVG:'85% 85%',transformOrigin : '50% 50%',opacity:0},{drawSVG:'95% 75%',scale:2,opacity:1,ease:Linear.easeNone})
.to(lijntjes,0.5,{scale:2,drawSVG:'100% 100%',ease:Linear.easeNone})
growhartTL.fromTo(hart,0.4,{scale:1.2,ease:Linear.easeNone},{scale:1.3,ease:Linear.easeNone})
.fromTo(hart,0.4,{scale:1.3,immediateRender:false,ease:Linear.easeNone},{scale:1.2,ease:Linear.easeNone})
masterTL.add(rainbowTL)
.add(hartTL)
.add(lijnTL,'-=0.5')
.add(growhartTL,'-=5.4')
masterTL.timeScale(1)
Love 2 rainbow - Script Codes
Love 2 rainbow - Script Codes
Home Page Home
Developer Kasper
Username kdbkapsere
Uploaded December 19, 2022
Rating 3
Size 3,360 Kb
Views 14,168
Do you need developer help for Love 2 rainbow?

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!

Kasper (kdbkapsere) Script Codes
Name
Share Page Animation
Ryu Hadouken GSAP Animation
Science Bubbles Animation
Login Form
Animated Logo
Bootstrap Template
Tiles
Social Icon Fun
Unknown Pleasures WIP
Microscope Testtube Animation
Create amazing captions 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!