Colorful Apple logo

Developer
Ivan Sakoman
Size
3,176 Kb
Views
66,792
  1. Colorful Apple logo Previews
  2. Colorful Apple logo HTML Codes
  3. Colorful Apple logo CSS Codes
  4. Colorful Apple logo JS Codes

How do I make an colorful apple logo?

What is a colorful apple logo? How do you make a colorful apple logo? This script and codes were developed by Ivan Sakoman on 12 June 2022, Sunday.

Colorful Apple logo Previews
IQ Test

Colorful Apple logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colorful Apple logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg width="250" class="svg-overlay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"> <path class="apple-overlay" d="M0,0V170H170V0H0ZM94.39,16.31a36.19,36.19,0,0,1,11.45-8.6A34.14,34.14,0,0,1,118.94,4a29.43,29.43,0,0,1,.17,3.24h0q0,12.15-8.86,22.67C103.13,38.23,94.52,43,85.18,42.28A25.22,25.22,0,0,1,85,39.21C85,31.44,88.38,23.11,94.39,16.31Zm56,113.94a88.08,88.08,0,0,1-8.71,15.66q-6.87,9.8-11.22,13.56-6.72,6.18-14.42,6.35c-3.69,0-8.14-1-13.32-3.18a38.22,38.22,0,0,0-14.34-3.17,39.52,39.52,0,0,0-14.75,3.17q-7.89,3.2-12.74,3.35-7.39.32-14.75-6.52-4.7-4.1-11.73-14A97.1,97.1,0,0,1,22,120.78,90.26,90.26,0,0,1,16.77,91.4q0-16.29,7-28.07A41.33,41.33,0,0,1,38.57,48.41a39.69,39.69,0,0,1,19.95-5.63c3.91,0,9,1.21,15.43,3.59S84.39,50,86.18,50c1.34,0,5.88-1.42,13.57-4.24q10.91-3.93,18.45-3.28,20.45,1.65,30.68,16.15-18.29,11.08-18.1,31A34.2,34.2,0,0,0,142,115.38a36.9,36.9,0,0,0,11.22,7.36Q151.88,126.66,150.37,130.25Z"/>
</svg>
<div class="wrapper-colors active"> <svg class="svg-colors" width="250px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"> <rect class="cls-1" width="170" height="50"/> <rect class="cls-2" y="50" width="170" height="24"/> <rect class="cls-3" y="74" width="170" height="24"/> <rect class="cls-4" y="98" width="170" height="24"/> <rect class="cls-5" y="122" width="170" height="24"/> <rect class="cls-6" y="146" width="170" height="24"/> </svg>
</div>
<div class="button"> <a href="#">Click for colors</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Colorful Apple logo - Script Codes CSS Codes

* { transition: all 0.5s ease;
}
.svg-overlay { position: absolute; z-index: 2;
}
.wrapper-colors.active .svg-colors { position: absolute;
}
.wrapper-colors.active .svg-colors .cls-1 { width: 0; transition: all 1.2s ease;
}
.wrapper-colors.active .svg-colors .cls-2 { width: 0; transition: all 1.6s ease;
}
.wrapper-colors.active .svg-colors .cls-3 { width: 0; transition: all 0.9s ease;
}
.wrapper-colors.active .svg-colors .cls-4 { width: 0; transition: all 0.7s ease;
}
.wrapper-colors.active .svg-colors .cls-5 { width: 0; transition: all 1.9s ease;
}
.wrapper-colors.active .svg-colors .cls-6 { width: 0; transition: all 1.5s ease;
}
.wrapper-colors .svg-colors { position: absolute;
}
.wrapper-colors .svg-colors .cls-1 { fill: #61bb46; transition: all 1.2s ease;
}
.wrapper-colors .svg-colors .cls-2 { fill: #fbbb27; transition: all 1.6s ease;
}
.wrapper-colors .svg-colors .cls-3 { fill: #f5821f; transition: all 0.9s ease;
}
.wrapper-colors .svg-colors .cls-4 { fill: #e03a3e; transition: all 0.7s ease;
}
.wrapper-colors .svg-colors .cls-5 { fill: #963d97; transition: all 1.9s ease;
}
.wrapper-colors .svg-colors .cls-6 { fill: #009ddc; transition: all 1.5s ease;
}
.button { position: absolute; left: 15px; top: 290px; width: 244px; height: 40px; background-color: white; border: 3px solid gray; text-align: center;
}
.button:hover { background-color: gray; cursor: pointer;
}
.button:hover a { color: white;
}
.button a { margin-top: 11px; display: inline-block; text-decoration: none; color: gray; font-family: arial;
}
.apple-overlay { fill: white;
}

Colorful Apple logo - Script Codes JS Codes

$('.button').click(function(){ $('.wrapper-colors').toggleClass('active');
});
Colorful Apple logo - Script Codes
Colorful Apple logo - Script Codes
Home Page Home
Developer Ivan Sakoman
Username ssaakkaa
Uploaded June 12, 2022
Rating 3
Size 3,176 Kb
Views 66,792
Do you need developer help for Colorful Apple logo?

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!

Ivan Sakoman (ssaakkaa) Script Codes
Name
Pink Floyd pyramid
Ribon label
CSS work desk
OsijekFrontendSVG lesson1
Responsive header
OnHover transition
Apple logo bubbles
ClipPath cursor
3D flipping card
BB-8 CSS
Create amazing art & images 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!