Cart Icon

Developer
Chris Samuels
Size
2,785 Kb
Views
4,048
  1. Cart Icon Previews
  2. Cart Icon HTML Codes
  3. Cart Icon CSS Codes
  4. Cart Icon JS Codes

How do I make an cart icon?

Flat Icons: http://stashflaticons.com/. What is a cart icon? How do you make a cart icon? This script and codes were developed by Chris Samuels on 26 January 2023, Thursday.

Cart Icon Previews
IQ Test

Cart Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cart Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="506.5px" height="506.5px" viewBox="-189.25 -189.25 506.5 506.5"> <defs> <clipPath id="mask"> <circle id="bgClip" cx="64" cy="64" r="64"/> </clipPath> </defs> <g clip-path="url(#mask)"> <circle id="bg" fill="#EA502F" cx="64" cy="64" r="64"/> <g id="product"> <path id="productA" fill="#FFFFFF" d="M88.48,47.234V32.078c0-1.65-1.351-3-3-3h-40.29c-1.65,0-3,1.35-3,3v15.156H88.48z"/> <path id="productB" fill="#FFFFFF" d="M88.48,47.234V32.078c0-1.65-1.351-3-3-3h-40.29c-1.65,0-3,1.35-3,3v15.156H88.48z"/> <path id="productC" fill="#FFFFFF" d="M88.48,47.234V32.078c0-1.65-1.351-3-3-3h-40.29c-1.65,0-3,1.35-3,3v15.156H88.48z"/> </g> <path id="cart" fill="#633D50" d="M98.93,68.005v-21.05c0-1.65-1.351-3-3-3H29c-0.245,0-0.449,0.022-0.632,0.055h-4.103 c-1.657,0-3,1.343-3,3c0,1.657,1.343,3,3,3h5.155c0.866,0.091,3.482,2.727,4.621,7.426l5.954,24.561 c0.853,3.519,3.097,6.628,6.027,8.806c-0.875,1.135-1.401,2.553-1.401,4.098c0,3.713,3.01,6.722,6.722,6.722 c3.711,0,6.722-3.009,6.722-6.722c0-0.303-0.027-0.6-0.066-0.892h27.463c-0.038,0.292-0.065,0.589-0.065,0.892 c0,3.713,3.011,6.722,6.722,6.722c3.713,0,6.723-3.009,6.723-6.722c0-3.541-2.737-6.434-6.21-6.696 c-0.324-0.119-0.67-0.194-1.035-0.194H55.267c-3.344,0-6.805-2.219-8.528-5.191L96.01,71.675 C97.62,71.305,98.93,69.654,98.93,68.005z M55.96,71.175c0,1.66-1.35,3-3,3c-1.66,0-3-1.34-3-3v-17.65c0-1.65,1.34-3,3-3 c1.65,0,3,1.35,3,3V71.175z M71.779,67.016c0,1.649-1.34,3-3,3c-1.649,0-3-1.351-3-3V53.525c0-1.65,1.351-3,3-3c1.66,0,3,1.35,3,3 V67.016z M87.609,63.345c0,1.66-1.34,3-3,3c-1.649,0-3-1.34-3-3v-9.82c0-1.65,1.351-3,3-3c1.66,0,3,1.35,3,3V63.345z"/> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cart Icon - Script Codes CSS Codes

body,
html { background: #f5f5f5; height: 100%; width: 100%; margin: 0; padding: 0;
}
svg{ width:100%; height:90%;
}

Cart Icon - Script Codes JS Codes

// Flat Icons: http://stashflaticons.com/
var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, prod = select('#product'), cart = select('#cart'), fcart = selectAll('#product, #cart'), aprod = select('#productA'), bprod = select('#productB'), cprod = select('#productC')
TweenMax.set(aprod, { y: '-80px', fill: '#555'
})
TweenMax.set(bprod, { y: '-50px', fill: '#999999'
})
TweenMax.set(cprod, { y: '-80px'
})
var tl = new TimelineMax({repeat: -1})
tl.to(aprod, 0.8, { y: '30px', x: '-5px', rotation: '-20deg', ease:Elastic.easeInOut
}) .to(bprod, 0.8, { y: '9px', x: '10px', rotation: '10deg', ease:Elastic.easeInOut
})
.to(cprod, 0.8, { y: 0, rotation: '-3deg', ease:Elastic.easeInOut
})
.addLabel('now', '-=0.55')
.to(fcart, 0.5, { y: '2px', ease:Elastic.easeInOut
}, 'now')
.to(fcart, 0.1, { y: '2px', ease:Elastic.easeInOut
})
.to(fcart, 0.5, { x: '-10px', rotation: '-7deg', ease:Elastic.easeInOut
})
.to(prod, 0.6, { transformOrigin: '50% 50%', x: '-10px', ease:Elastic.easeOut.config(1, 0.9)
}, '-=0.3')
.to(fcart, 2, { y: 0, x: '150px', ease:Elastic.easeInOut
})
.set(fcart, { x: '-150px'
})
.to(cart, 1.8, { x: 0, ease:Elastic.easeInOut
})
.to(cart, 0.7, { rotation: 0, ease:Elastic.easeInOut
}, '-=1')
Cart Icon - Script Codes
Cart Icon - Script Codes
Home Page Home
Developer Chris Samuels
Username anycircle
Uploaded January 26, 2023
Rating 3
Size 2,785 Kb
Views 4,048
Do you need developer help for Cart Icon?

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!

Chris Samuels (anycircle) Script Codes
Name
Temp
404 page
Code Icon
Sign Up Form
Upload
A Pen by Chris Samuels
Case Study Card
Lineups.io Logo
Build Lineup Map - Lineups.io
Radar Icon
Create amazing web content 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!