Follow Us On Telegram
Get Full Source Code Zipped File
Telegram link
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodeAtNow | Color changing glasses</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="348.61" height="100.94" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 348.61 100.94">
<defs>
<clipPath id="clippath">
<path d="M256.98,100.21c-3.56,0-7.08-.11-10.45-.31l-1.96-.12c-9.62-.56-22.79-1.33-30.48-7.29-2.99-2.31-5.75-6.42-8.7-12.93-2.22-4.9-4.34-10.29-6.87-17.48-.82-2.34-1.62-4.75-2.39-7.09-2.4-7.29-4.89-14.84-8.69-21.63-3.25-5.8-7.4-8.76-13.05-9.3h-.18c-5.65,.54-9.8,3.5-13.05,9.3-3.81,6.79-6.29,14.34-8.69,21.64-.77,2.33-1.56,4.74-2.38,7.07-1.71,4.86-4.04,11.24-6.87,17.48-2.95,6.51-5.71,10.62-8.7,12.93-7.68,5.96-20.86,6.72-30.48,7.29l-1.96,.12c-3.37,.21-6.89,.31-10.45,.31-.69,0-1.39,0-2.09-.01-8.82-.1-18.14-.81-28.51-2.18-.85-.11-1.71-.22-2.57-.33-12.88-1.64-27.49-3.5-32.3-17.04-2.62-7.36-4.39-15.57-5.4-25.09h-.07c-.15-2.63-1.49-20.65-8.91-24.84-2.07-1.17-4.44-1.62-6.34-1.97-1.31-.25-3.11-.58-3.27-1.06-1.03-3.11-2.34-8.61,.59-10.56,3.68-2.45,19.21-7.66,32.08-10.23,2.62-.53,4.98-.98,7.1-1.38,4.5-1.02,8.66-1.75,12.76-2.24,8.84-1.06,18.12-1.57,28.38-1.57,23.64,0,41.94,2.91,53.13,5.35,4.41,.76,8.56,1.61,12.56,2.44,4.51,.93,8.78,1.81,12.24,2.27,2.61,.35,5.4,.55,8.3,.58,0,0,1.7,.03,4.71,.2h.11c3.01-.16,5.15-.2,5.17-.2,2.89-.03,5.68-.23,8.3-.58,3.46-.46,7.72-1.34,12.24-2.27,4.01-.83,8.15-1.68,12.52-2.43,11.23-2.45,29.54-5.36,53.17-5.36,10.26,0,19.54,.51,28.38,1.57,4.1,.49,8.26,1.22,12.72,2.23,2.15,.41,4.51,.87,7.13,1.39,12.87,2.57,28.4,7.78,32.08,10.23,2.93,1.95,1.62,7.45,.59,10.56-.16,.47-1.96,.81-3.27,1.06-1.9,.36-4.27,.8-6.34,1.97-7.42,4.19-8.75,22.21-8.91,24.84h-.07c-1.01,9.53-2.78,17.73-5.4,25.1-4.82,13.54-19.42,15.4-32.3,17.04-.87,.11-1.73,.22-2.57,.33-10.37,1.37-19.69,2.08-28.51,2.18-.7,0-1.39,.01-2.09,.01h0Zm6.65-90.27c-17.88,0-36.49,.94-51.5,7.77-17.19,7.82-11.93,26.75-8.09,40.57l.28,1.02c2.03,7.34,4.3,13.91,6.56,19,2.19,4.96,4.56,8.73,6.34,10.09,1.63,1.29,6.36,3.11,14.7,4.33,7.29,1.09,16.27,1.67,25.99,1.67,11.37,0,22.77-.8,32.16-2.26,9.64-1.48,17.02-3.7,20.24-6.1,3.52-2.51,6.65-11.08,8.36-22.92,1.7-11.45,2.07-24.56,2.08-33.55,0-3.93-1.35-7.28-4.01-9.95-6.88-6.88-22.02-9.69-52.26-9.69h-.85Zm-179.49,0c-19.35,0-31.86,1.11-40.57,3.58-10.58,3.02-15.71,8.26-15.71,16.05,0,8.99,.38,22.1,2.08,33.55,1.71,11.83,4.84,20.4,8.38,22.93,3.2,2.39,10.57,4.61,20.22,6.09,9.4,1.46,20.82,2.26,32.15,2.26,9.71,0,18.7-.58,25.99-1.67,8.34-1.22,13.07-3.04,14.71-4.34,1.77-1.36,4.14-5.13,6.33-10.09,2.26-5.08,4.52-11.65,6.56-19l.28-1.01c3.84-13.82,9.1-32.76-8.09-40.58-15.01-6.83-33.62-7.77-51.5-7.77h-.85Z" fill="none"/>
</clipPath>
</defs>
<g id="_ÎÓÈ_1" data-name="—ÎÓÈ 1">
<g>
<path d="M346.39,15.66c-3.89-2.61-19.46-7.82-32.43-10.43-2.62-.53-4.99-.99-7.11-1.39-4.2-.96-8.44-1.73-12.82-2.26-9.44-1.13-19-1.58-28.5-1.58-23.18,0-41.3,2.76-53.34,5.4-9.52,1.64-18.37,3.87-24.72,4.72-2.91,.39-5.7,.54-8.18,.57,0,0-2.14,.03-5.2,.2-3.07-.17-4.75-.2-4.75-.2-2.49-.03-5.27-.18-8.18-.57-6.35-.85-15.2-3.09-24.72-4.72C124.38,2.76,106.26,0,83.08,0c-9.5,0-19.06,.45-28.5,1.58-4.38,.53-8.62,1.3-12.82,2.26-2.12,.4-4.49,.87-7.11,1.39C21.68,7.84,6.11,13.05,2.22,15.66c-3.89,2.61-1.62,9.78-.97,11.73,.65,1.96,6.01,1.29,10.05,3.58,7.46,4.24,8.43,24.44,8.43,24.44,0,0,.02-.09,.06-.23,.92,8.69,2.56,17.28,5.45,25.44,5.34,15.09,21.83,16.26,35.66,18.09,9.48,1.26,19.05,2.09,28.62,2.2,4.2,.05,8.41-.05,12.61-.3,10.15-.62,24.52-1.06,32.98-7.64,3.12-2.43,5.97-6.67,8.99-13.37,2.59-5.74,4.82-11.7,6.9-17.64,3.37-9.61,6.03-19.77,11.01-28.7,3.04-5.46,6.86-8.33,12.29-8.85,5.44,.52,9.25,3.39,12.29,8.85,4.98,8.93,7.64,19.08,11.01,28.7,2.08,5.94,4.31,11.9,6.9,17.64,3.02,6.69,5.87,10.94,8.99,13.37,8.45,6.58,22.82,7.02,32.98,7.64,4.2,.26,8.4,.35,12.61,.3,9.57-.11,19.14-.94,28.62-2.2,13.83-1.83,30.32-3,35.66-18.09,2.89-8.16,4.53-16.75,5.45-25.44,.03,.14,.06,.23,.06,.23,0,0,.97-20.21,8.43-24.44,4.04-2.3,9.4-1.63,10.05-3.58,.65-1.96,2.92-9.12-.97-11.73ZM143.35,58.59c-2.02,7.34-4.27,13.89-6.51,18.96-2.5,5.7-4.74,8.76-6.04,9.76-1.48,1.17-6.09,2.96-14.26,4.16-7.24,1.09-16.16,1.67-25.85,1.67-11.29,0-22.66-.8-32.01-2.26-9.36-1.44-16.73-3.65-19.8-5.95-2.57-1.84-6.01-8.68-7.98-22.38-1.71-11.56-2.06-24.63-2.07-33.57-.02-15.49,21.59-18.75,55.3-18.75h.85c16.6,0,35.79,.72,51.1,7.72,16.84,7.7,11.1,26.76,7.27,40.64Zm174.36,3.96c-1.97,13.7-5.41,20.54-7.98,22.38-3.07,2.3-10.45,4.51-19.8,5.95-9.35,1.46-20.72,2.26-32.01,2.26-9.69,0-18.61-.58-25.85-1.67-8.17-1.2-12.78-2.99-14.26-4.16-1.31-1-3.54-4.06-6.04-9.76-2.24-5.06-4.49-11.61-6.51-18.96-3.83-13.88-9.57-32.94,7.27-40.64,15.31-7,34.5-7.72,51.1-7.72h.85c33.72,0,55.32,3.26,55.3,18.75,0,8.94-.36,22.02-2.07,33.57Z" fill="url(#linear-gradient)"/>
<g clip-path="url(#clippath)">
<g class="frames">
<rect x="-8.3" y="-54.61" width="65.92" height="295.5" fill="#be5256"/>
<rect x="57.63" y="-54.61" width="65.92" height="295.5" fill="#979700"/>
<rect x="123.55" y="-54.61" width="65.92" height="295.5" fill="#9c7b00"/>
<rect x="181.26" y="-54.61" width="65.92" height="295.5" fill="#655fa4"/>
<rect x="243.38" y="-54.61" width="65.92" height="295.5" fill="#4f3e00"/>
<rect x="296.76" y="-54.61" width="65.92" height="295.5" fill="#04164f"/>
</g>
</g>
</g>
</g>
</svg>
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script src="./script.js"></script>
</body>
</html>
CSS
body, html {
height: 90%;
width: 90%;
margin: auto;
padding: 5%;
background-color: #11131e;
}
body::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
svg {
width: 100%;
height: 100%;
}
JS
let colors = ['#be5256', '#979700', '#9c7b00', '#655fa4', '#4f3e00', '#04164f'];
// set the initial color immediately.
gsap.set("rect", {fill:colors[0]});
// now move the first color to the LAST position in the Array so that when it repeats, there's a smooth transition.
colors.push(colors.shift());
gsap.to("rect", {
keyframes: colors.map(color => ({fill: color})),
duration: 2 * colors.length,
repeat: -1,
stagger:{
each: 0.5,
from: "random",
ease: "random(power2, none)" }
});
