Love

Developer
Kasper
Size
4,092 Kb
Views
8,096
  1. Love Previews
  2. Love HTML Codes
  3. Love CSS Codes
  4. Love JS Codes

How do I make an love?

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

Love Previews
IQ Test

Love - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Love</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"class="hart" 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">
<g id="hart">	<path id="paars" fill="#513C8B" d="M66.743,77.391c-7.714,6.57-16.648,13.189-16.648,13.189s-8.61-6.628-16.125-13.189H66.743z"/>	<path id="blauw" fill="#185FAF" d="M81.566,63.647c-1.642,1.692-3.351,3.368-5.076,5.01c-0.075,0.075-6.661,6.113-9.747,8.735	H33.97c-3.003-2.629-6.188-5.508-9.323-8.527c-0.075-0.066-0.141-0.141-0.216-0.207c-1.7-1.642-3.384-3.318-5.01-5.01H81.566z"/>	<path id="groen" fill="#509C41" d="M92.839,49.894c-2.812,4.446-6.818,9.166-11.273,13.753H19.421	c-0.158-0.166-0.315-0.323-0.473-0.489c-0.058-0.058-0.116-0.124-0.174-0.191l-0.008-0.008c-0.066-0.058-0.108-0.108-0.166-0.174	c-1.46-1.535-2.878-3.086-4.214-4.637c-0.415-0.473-0.821-0.954-1.219-1.427c-0.241-0.29-0.481-0.581-0.713-0.863	c-0.232-0.29-0.465-0.581-0.697-0.863c-0.921-1.153-1.783-2.289-2.588-3.418c-0.124-0.174-0.904-1.302-1.161-1.684H92.839z"/>	<path id="geel" fill="#DED724" d="M97.46,36.141c-0.141,1.692-0.406,3.418-0.78,5.168c-0.39,1.825-1.153,3.766-2.215,5.782	c-0.017,0.017-0.025,0.041-0.033,0.058c-0.473,0.904-1.012,1.817-1.601,2.746H7.999C7.783,49.562,7.36,48.923,7.153,48.6	c-0.05-0.083-0.1-0.158-0.149-0.241c-0.249-0.406-0.481-0.805-0.713-1.211c-0.008-0.017-0.025-0.042-0.033-0.058	c-1.443-2.497-2.464-4.886-2.953-7.076c-0.108-0.489-0.207-0.987-0.299-1.468c-0.008-0.058-0.017-0.116-0.025-0.166	c-0.008-0.041-0.017-0.091-0.025-0.133c-0.008-0.066-0.017-0.124-0.033-0.182c-0.008-0.041-0.017-0.083-0.017-0.124	c-0.025-0.141-0.05-0.282-0.066-0.415c-0.017-0.075-0.025-0.158-0.041-0.232c-0.008-0.075-0.025-0.149-0.033-0.224	c-0.008-0.075-0.025-0.141-0.033-0.216c-0.033-0.241-0.066-0.473-0.091-0.713H97.46z"/>	<path id="oranje" fill="#DE8601" d="M97.447,36.141H2.628c-0.091-0.763-0.166-1.51-0.216-2.256	c-0.141-2.148-0.083-4.205,0.174-6.155c0.091-0.755,0.224-1.485,0.382-2.206c0-0.008,0-0.008,0-0.017	c0-0.025,0.008-0.05,0.017-0.075c0.232-1.053,0.531-2.074,0.888-3.044h91.924c0.382,0.971,0.697,1.991,0.954,3.044	c0.008,0.033,0.017,0.058,0.025,0.091C97.563,28.767,97.787,32.358,97.447,36.141z"/>	<g id="rood">	<g>	<g>	<path fill="#C43026" d="M24.134,9.656c-10.559,0-17.345,4.985-20.19,12.716h45.406C43.644,14.658,34.478,9.656,24.134,9.656z"/>	</g>	<g>	<path fill="#C43026" d="M76.097,9.656c-10.335,0-19.501,5.002-25.217,12.716h44.925C92.862,14.741,86.284,9.656,76.097,9.656z"	/>	</g>	</g>	</g>	<path class="lijn" fill="none" stroke="#E561D2" stroke-width="5" stroke-miterlimit="10" d="M50.135,90.33	c0.212,0.003,4.999-3.742,7.014-5.312c8.478-6.604,16.69-13.66,24.197-21.355c4.218-4.323,8.296-8.902,11.533-14.02	c1.309-2.128,2.578-4.331,3.335-6.727c0.994-2.698,1.281-5.83,1.41-8.685c0.041-0.896-0.025,0.547,0,0	c0.172-3.724-0.209-7.56-1.407-11.108c-1.354-4.009-3.799-7.629-7.294-10.066c-3.817-2.662-8.493-3.681-13.093-3.635	c-10.229,0.102-19.975,5.348-25.694,13.834c-5.472-8.12-14.644-13.309-24.423-13.796c-4.671-0.233-9.532,0.487-13.634,2.84	c-3.522,2.02-6.209,5.182-7.781,8.913c-1.989,4.719-2.227,10.01-1.566,15.033c0.237,1.8,0.558,3.629,1.138,5.351	c0.928,2.758,2.391,5.3,3.971,7.73c3.097,5.032,7.277,9.608,11.385,13.824c4.485,4.603,9.14,9.016,13.962,13.266	c4.17,3.675,8.397,7.443,12.876,10.744c0.969,0.765,3.705,3.072,4.055,3.166L50.135,90.33z"/>
</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 - Script Codes CSS Codes

body { overflow: hidden; text-align:center;
}
body,
html { height: 100%; width: 100%; margin: 0; padding: 0;
} .heart { width:250px; height:250px; margin:auto }
svg{ position:absolute; width:100%; height:100%; transform:translate(-50%, 0%);
}
#paars,#rood,#appelblauw,#geel { opacity:0
}

Love - Script Codes JS Codes

var grow = $('.lijn'),
paars = $('#paars'),
blauw = $('#blauw'),
groen = $('#groen'),
orangje = $('oranje'),
geel = $('#geel'),
rood = $('#rood'), tlGrow = new TimelineMax({repeat:3,delay:1.9}); tlColor = new TimelineMax({repeat:0}); tlColorGrow = new TimelineMax({repeat:3,delay:1.9}) tldrawshape = new TimelineMax({repeat:0,delay:0.45})
tldrawshape .fromTo ('.lijn',0.8,{drawSVG:"20% 20%",opacity:0},{drawSVG:'45% 55%',opacity:1,ease:Linear.easenone}) //.staggerFrom ('.lijn',1.2,{drawSVG:"0%",opacity:1},{drawSVG:'100%',opacity:1}) .fromTo('.lijn',0.8,{drawSVG:'45% 55%'},{drawSVG:'0% 100%'}) tlGrow .fromTo(grow,0.6,{scaleX:1,transformOrigin: "50% 50% 0"}, {scaleX:1.1,ease:Power1.easeInOut}) .fromTo(grow,0.6,{scaleX:1.1,transformOrigin: "50% 50% 0",immediateRender:false}, {scaleX:1,ease:Power1.easeInOut})
tlColor .fromTo(paars,0.1,{scale:1,opacity:0,ease:Power1.easeInOut},{opacity:1,scale:1,ease:Power1.easeInOut}) .fromTo(blauw,0.1,{scale:1,opacity:0,ease:Power1.easeInOut},{opacity:1,scale:1,ease:Power1.easeInOut},'+=0.1') .fromTo(groen,0.1,{scale:1,opacity:0,ease:Power1.easeInOut},{opacity:1,scale:1,ease:Power1.easeInOut},'+=0.1') .fromTo(geel,0.1,{scale:1,opacity:0,ease:Power1.easeInOut},{opacity:1,scale:1,ease:Power1.easeInOut},'+=0.1')
.fromTo(oranje,0.1,{scale:1,opacity:0,ease:Power1.easeInOut},{opacity:1,scale:1,ease:Power1.easeInOut},'+=0.1')
.fromTo(rood,0.1,{scale:1,opacity:0,ease:Power1.easeInOut},{opacity:1,scale:1,ease:Power1.easeInOut},'+=0.1')
tlColorGrow .to(paars,0.6,{scaleX:1.1,transformOrigin: "50% 50% 0",ease: Elastic.easeInOut.config(1, 0.4)}) .to(paars,0.6,{scaleX:1}) .to(blauw,0.6,{scaleX:1.1,transformOrigin: "50% 50% 0",ease: Elastic.easeInOut.config(1, 0.4)},0) .to(blauw,0.6,{scaleX:1},'-=0.6') .to(groen,0.6,{scaleX:1.1,transformOrigin: "50% 50% 0",ease: Elastic.easeInOut.config(1, 0.4)},0) .to(groen,0.6,{scaleX:1},'-=0.6') .to(geel,0.6,{scaleX:1.1,transformOrigin: "50% 50% 0",ease: Elastic.easeInOut.config(1, 0.4)},0) .to(geel,0.6,{scaleX:1},'-=0.6') .to(oranje,0.6,{scaleX:1.1,transformOrigin: "50% 50% 0",ease: Elastic.easeInOut.config(1, 0.4)},0) .to(oranje,0.6,{scaleX:1},'-=0.6') .to(rood,0.6,{scaleX:1.1,transformOrigin: "50% 50% 0",ease: Elastic.easeInOut.config(1, 0.4)},0) .to(rood,0.6,{scaleX:1},'-=0.6')
var masterTl = new TimelineMax({SVG2GIF:true,repeat:-1})
masterTl.add(tlColor)
.add(tldrawshape,0.2)
.add(tlGrow,0.2)
.add(tlColorGrow,0.2)
masterTl.timeScale(3)
Love - Script Codes
Love - Script Codes
Home Page Home
Developer Kasper
Username kdbkapsere
Uploaded December 19, 2022
Rating 3
Size 4,092 Kb
Views 8,096
Do you need developer help for Love?

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
Login Form
Slack Loader Animation
Tiles
Science Bubbles Animation
Bootstrap Template
Ryu Hadouken GSAP Animation
Unknown Pleasures WIP
LinkedIn Loader Animation
Share Page Animation
Slack Logo test
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!