Ideation-icon

Developer
Alexandre Masy
Size
3,269 Kb
Views
10,120
  1. Ideation-icon Previews
  2. Ideation-icon HTML Codes
  3. Ideation-icon CSS Codes

How do I make an ideation-icon?

Ideation icon animation for the new portfolio. What is a ideation-icon? How do you make a ideation-icon? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.

Ideation-icon Previews
IQ Test

Ideation-icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ideation-icon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="animation"> <svg width="96px" height="96px" viewBox="0 0 96 96"> <g id="ideation" stroke="#57EDD4" stroke-width="4" fill="none"> <polyline class="path" points="19 25 35 17 19 9 19 38 43 38 43 62 19 62 19 86 43.1447488 86 67 86 67 62 67 38 67.2063111 5.20321414 83 12.5296543 67.2063119 19.6418092"></polyline> <circle class="bubble9" fill="#FFFFFF" cx="67" cy="38" r="6"></circle> <circle class="bubble8" fill="#FFFFFF" cx="67" cy="62" r="6"></circle> <circle class="bubble7" fill="#FFFFFF" cx="67" cy="86" r="6"></circle> <circle class="bubble6" fill="#FFFFFF" cx="43" cy="86" r="6"></circle> <circle class="bubble5" fill="#FFFFFF" cx="19" cy="86" r="6"></circle> <circle class="bubble4" fill="#FFFFFF" cx="19" cy="62" r="6"></circle> <circle class="bubble3" fill="#FFFFFF" cx="43" cy="62" r="6"></circle> <circle class="bubble2" fill="#FFFFFF" cx="43" cy="39" r="6"></circle> <circle class="bubble1" fill="#FFFFFF" cx="19" cy="38" r="6"></circle> </g> </svg>
</div>
</body>
</html>

Ideation-icon - Script Codes CSS Codes

html, body { height: 100%;
}
.animation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; cursor: pointer;
}
.animation:hover .bubble1 { -webkit-animation: hover-bubble1 3.2s ease-in; animation: hover-bubble1 3.2s ease-in;
}
.animation:hover .bubble2 { -webkit-animation: hover-bubble2 3.2s ease-in; animation: hover-bubble2 3.2s ease-in;
}
.animation:hover .bubble3 { -webkit-animation: hover-bubble3 3.2s ease-in; animation: hover-bubble3 3.2s ease-in;
}
.animation:hover .bubble4 { -webkit-animation: hover-bubble4 3.2s ease-in; animation: hover-bubble4 3.2s ease-in;
}
.animation:hover .bubble5 { -webkit-animation: hover-bubble5 3.2s ease-in; animation: hover-bubble5 3.2s ease-in;
}
.animation:hover .bubble6 { -webkit-animation: hover-bubble6 3.2s ease-in; animation: hover-bubble6 3.2s ease-in;
}
.animation:hover .bubble7 { -webkit-animation: hover-bubble7 3.2s ease-in; animation: hover-bubble7 3.2s ease-in;
}
.animation:hover .bubble8 { -webkit-animation: hover-bubble8 3.2s ease-in; animation: hover-bubble8 3.2s ease-in;
}
.animation:hover .bubble9 { -webkit-animation: hover-bubble9 3.2s ease-in; animation: hover-bubble9 3.2s ease-in;
}
.path { stroke-dasharray: 1000; stroke-dashoffset: 1005; -webkit-animation: path 3.2s ease-in; animation: path 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.bubble1 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble1 3.2s ease-in; animation: bubble1 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble1 { 0% { opacity: 0; } 20.625% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 25.625% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble1 { 0% { opacity: 0; } 20.625% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 25.625% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 20.625% { -webkit-transform: scale(1.5); transform: scale(1.5); } 30.625% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 20.625% { -webkit-transform: scale(1.5); transform: scale(1.5); } 30.625% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble2 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble2 3.2s ease-in; animation: bubble2 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble2 { 0% { opacity: 0; } 24.375% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 29.375% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble2 { 0% { opacity: 0; } 24.375% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 29.375% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble2 { 0% { -webkit-transform: scale(1); transform: scale(1); } 24.375% { -webkit-transform: scale(1.5); transform: scale(1.5); } 34.375% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble2 { 0% { -webkit-transform: scale(1); transform: scale(1); } 24.375% { -webkit-transform: scale(1.5); transform: scale(1.5); } 34.375% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble3 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble3 3.2s ease-in; animation: bubble3 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble3 { 0% { opacity: 0; } 28.125% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 33.125% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble3 { 0% { opacity: 0; } 28.125% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 33.125% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 28.125% { -webkit-transform: scale(1.5); transform: scale(1.5); } 38.125% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 28.125% { -webkit-transform: scale(1.5); transform: scale(1.5); } 38.125% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble4 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble4 3.2s ease-in; animation: bubble4 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble4 { 0% { opacity: 0; } 31.875% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 36.875% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble4 { 0% { opacity: 0; } 31.875% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 36.875% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble4 { 0% { -webkit-transform: scale(1); transform: scale(1); } 31.875% { -webkit-transform: scale(1.5); transform: scale(1.5); } 41.875% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble4 { 0% { -webkit-transform: scale(1); transform: scale(1); } 31.875% { -webkit-transform: scale(1.5); transform: scale(1.5); } 41.875% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble5 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble5 3.2s ease-in; animation: bubble5 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble5 { 0% { opacity: 0; } 34.6875% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 39.6875% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble5 { 0% { opacity: 0; } 34.6875% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 39.6875% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble5 { 0% { -webkit-transform: scale(1); transform: scale(1); } 34.6875% { -webkit-transform: scale(1.5); transform: scale(1.5); } 44.6875% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble5 { 0% { -webkit-transform: scale(1); transform: scale(1); } 34.6875% { -webkit-transform: scale(1.5); transform: scale(1.5); } 44.6875% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble6 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble6 3.2s ease-in; animation: bubble6 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble6 { 0% { opacity: 0; } 37.5% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 42.5% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble6 { 0% { opacity: 0; } 37.5% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 42.5% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble6 { 0% { -webkit-transform: scale(1); transform: scale(1); } 37.5% { -webkit-transform: scale(1.5); transform: scale(1.5); } 47.5% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble6 { 0% { -webkit-transform: scale(1); transform: scale(1); } 37.5% { -webkit-transform: scale(1.5); transform: scale(1.5); } 47.5% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble7 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble7 3.2s ease-in; animation: bubble7 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble7 { 0% { opacity: 0; } 40.3125% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 45.3125% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble7 { 0% { opacity: 0; } 40.3125% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 45.3125% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble7 { 0% { -webkit-transform: scale(1); transform: scale(1); } 40.3125% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50.3125% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble7 { 0% { -webkit-transform: scale(1); transform: scale(1); } 40.3125% { -webkit-transform: scale(1.5); transform: scale(1.5); } 50.3125% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble8 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble8 3.2s ease-in; animation: bubble8 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble8 { 0% { opacity: 0; } 43.125% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 48.125% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble8 { 0% { opacity: 0; } 43.125% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 48.125% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble8 { 0% { -webkit-transform: scale(1); transform: scale(1); } 43.125% { -webkit-transform: scale(1.5); transform: scale(1.5); } 53.125% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble8 { 0% { -webkit-transform: scale(1); transform: scale(1); } 43.125% { -webkit-transform: scale(1.5); transform: scale(1.5); } 53.125% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
.bubble9 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: bubble9 3.2s ease-in; animation: bubble9 3.2s ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes bubble9 { 0% { opacity: 0; } 46.875% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 51.875% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@keyframes bubble9 { 0% { opacity: 0; } 46.875% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 51.875% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; }
}
@-webkit-keyframes hover-bubble9 { 0% { -webkit-transform: scale(1); transform: scale(1); } 46.875% { -webkit-transform: scale(1.5); transform: scale(1.5); } 56.875% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes hover-bubble9 { 0% { -webkit-transform: scale(1); transform: scale(1); } 46.875% { -webkit-transform: scale(1.5); transform: scale(1.5); } 56.875% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes path { 0% { stroke-dashoffset: 1005; } 46.875% { stroke-dashoffset: 675; } 100% { stroke-dashoffset: 675; }
}
@keyframes path { 0% { stroke-dashoffset: 1005; } 46.875% { stroke-dashoffset: 675; } 100% { stroke-dashoffset: 675; }
}
Ideation-icon - Script Codes
Ideation-icon - Script Codes
Home Page Home
Developer Alexandre Masy
Username alexandremasy
Uploaded October 01, 2022
Rating 3
Size 3,269 Kb
Views 10,120
Do you need developer help for Ideation-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!

Alexandre Masy (alexandremasy) Script Codes
Name
Graphic-icon
SVG - Color Matrix applied to map
Bullet Loader
Blink
A Pen by Alexandre Masy
A Type Scale
Yp-loader
AngularJS - UI Router - Example 1
Tiles - Triangles
Activate Button
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!