Slack Logo test
How do I make an slack logo test?
What is a slack logo test? How do you make a slack logo test? This script and codes were developed by Kasper on 30 January 2023, Monday.
Slack Logo test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slack Logo test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="479px" height="269.5px" viewBox="0 0 479 269.5" enable-background="new 0 0 479 269.5" xml:space="preserve">
<g id="Dots"> <ellipse class="blue" transform="matrix(1 -3.970754e-03 3.970754e-03 1 -0.3864 1.022)" fill="#70CBDE" cx="257.2" cy="97.8" rx="13.5" ry="13.5"/> <ellipse class="green" transform="matrix(1 -3.970754e-03 3.970754e-03 1 -0.4639 0.7998)" fill="#38BB93" cx="201.2" cy="117.2" rx="13.5" ry="13.5"/> <ellipse class="pink" transform="matrix(1 -3.970754e-03 3.970754e-03 1 -0.6855 0.8824)" fill="#E11665" cx="221.9" cy="173.1" rx="13.5" ry="13.5"/> <ellipse class="yellow" transform="matrix(1 -3.970754e-03 3.970754e-03 1 -0.6062 1.1012)" fill="#EBA823" cx="277" cy="153.2" rx="13.5" ry="13.5"/>
</g>
<g id="Bars"> <path class="green-bar" d="M236.4,213.7L236.4,213.7c7.4-2.6,11.2-10.7,8.6-18.1L205.3,84.4 c-2.6-7.4-10.7-11.2-18.1-8.6l0,0c-7.4,2.6-11.2,10.7-8.6,18.1l39.6,111.3C220.9,212.5,229,216.4,236.4,213.7z"/> <path class="pink-bar" d="M302.4,130l-113.7,40.5c-7.1,2.5-10.8,10.3-8.3,17.4l0,0c2.5,7.1,10.3,10.8,17.4,8.3 l113.7-40.5c7.1-2.5,10.8-10.3,8.3-17.4v0C317.2,131.2,309.4,127.5,302.4,130z"/> <path class="yellow-bar" d="M242.4,56.4L242.4,56.4c7.1-2.5,14.9,1.2,17.4,8.3l40.1,112.6c2.5,7.1-1.2,14.9-8.3,17.4 l0,0c-7.1,2.5-14.9-1.2-17.4-8.3L234.2,73.8C231.6,66.7,235.3,58.9,242.4,56.4z"/> <path class="blue-bar" d="M180.3,139.9l110-39.1c7.2-2.6,11-10.5,8.4-17.7v0c-2.6-7.2-10.5-11-17.7-8.4l-110,39.1 c-7.2,2.6-11,10.5-8.4,17.7l0,0C165.2,138.7,173.1,142.5,180.3,139.9z"/>
</g>
<g id="Lines">
<line class="bottom-l" fill="none" stroke="#000000" stroke-miterlimit="10" x1="220.5" y1="173.7" x2="238" y2="136.2"/> <line class="top-l" fill="none" stroke="#000000" stroke-miterlimit="10" x1="202" y1="117.2" x2="238" y2="136.2"/> <line class="bottom-r" fill="none" stroke="#000000" stroke-miterlimit="10" x1="277" y1="153.2" x2="238" y2="136.2"/> <line class="top-r"fill="none" stroke="#000000" stroke-miterlimit="10" x1="257" y1="98.2" x2="238" y2="136.2"/>
</g>
<circle id="Circel_middel" class="st8" cx="239" cy="135.3" r="11.4"/>
</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='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Slack Logo test - Script Codes CSS Codes
body { margin:auto; text-align:center;
}
svg { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:600px; height:600px;
}
#Lines { opacity:0;
}
#Bars { opacity:0;
}
.blue-bar { fill:#70CBDE;
}
.yellow-bar { fill:#EBA823;
}
.pink-bar { fill:#E21564;
}
.green-bar { fill:#38BB93;
}
.st8 { opacity:0;
}
Slack Logo test - Script Codes JS Codes
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");
var dots = $('#Dots') tl = new TimelineMax(), itl = new TimelineMax(), btl = new TimelineMax(), mastertl = new TimelineMax({paused:true,repeat:-1});
// Rotate
tl.to(dots,0.6,{rotation:'+=225',transformOrigin:'50% 50%',ease: Circ.easeOut},'rotate')
tl.to(dots,0.2,{rotation:'+=125',transformOrigin:'50% 50%'},'rotate+=0.6')
// Shrink + Grow Dots
tl.to('.blue',0.15,{xPercent:'-20%',yPercent:'40%',ease: Power0.easeIn},'rotate+=0.3')
tl.to('.green',0.15,{xPercent:'50%',yPercent:'20%',ease: Power0.easeIn},'rotate+=0.3')
tl.to('.pink',0.15,{xPercent:'20%',yPercent:'-55%',ease: Power0.easeIn},'rotate+=0.3')
tl.to('.yellow',0.15,{xPercent:'-50%',yPercent:'-33%',ease: Power0.easeIn},'rotate+=0.3')
// Grow
tl.to('.blue',0.15,{xPercent:'0%',yPercent:'0%',ease: Expo.easeIn},'rotate+=0.45')
tl.to('.green',0.15,{xPercent:'0%',yPercent:'0%',ease: Expo.easeIn},'rotate+=0.45')
tl.to('.pink',0.15,{xPercent:'0%',yPercent:'0%',ease: Expo.easeIn},'rotate+=0.45')
tl.to('.yellow',0.15,{xPercent:'0%',yPercent:'0%',ease: Expo.easeIn},'rotate+=0.45')
// Bars In
itl.to('.blue',0.20,{morphSVG:{shape:".blue-bar"},ease: Back.easeInOut.config(1)},'bars')
itl.to('.green',0.20,{morphSVG:{shape:".green-bar"},ease: Back.easeInOut.config(1)},'bars-=0.01')
itl.to('.pink',0.20,{morphSVG:{shape:".pink-bar"},ease: Back.easeInOut.config(1)},'bars+=0.05')
itl.to('.yellow',0.20,{morphSVG:{shape:".yellow-bar"},ease: Back.easeInOut.config(1)},'bars+=0.04')
itl.to('.blue,.green,.pink,.yellow',0.1,{css:{'mix-blend-mode': 'multiply'}},'bars')
// Bars out
btl.to('.blue',0.20,{morphSVG:{shape:".blue"},ease: Power0.easeIn},'bla')
btl.to('.green',0.20,{morphSVG:{shape:".green"},ease: Power0.easeIn},'bla-=0.01')
btl.to('.pink',0.20,{morphSVG:{shape:".pink"},ease: Power0.easeIn},'bla+=0.05')
btl.to('.yellow',0.20,{morphSVG:{shape:".yellow"},ease: Power0.easeIn},'bla+=0.04')
mastertl.add(tl) .add(itl,'+=0.05') .add(btl,'+=0.6')
mastertl.timeScale(1)
mastertl.play()
Developer | Kasper |
Username | kdbkapsere |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 3,217 Kb |
Views | 6,072 |
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!
Name | Size |
Growing Heart Animation | 2,109 Kb |
Bootstrap Template | 1,292 Kb |
LinkedIn Loader Animation | 2,691 Kb |
Love 2 rainbow | 3,360 Kb |
Social Icon Fun | 2,037 Kb |
Animated Logo | 3,779 Kb |
Test | 2,323 Kb |
Unknown Pleasures WIP | 18,874 Kb |
Tiles | 3,681 Kb |
Login Form | 2,321 Kb |
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!
Name | Username | Size |
SVG hamburger menu button | Elifitch | 2,602 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
404 Error Page | WebSonick | 3,203 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!