<div class="container">
<div class="blobs">
<div class="circle-styles main-circle">
<div class="bg"></div>
<div class="cross center">
<span></span>
<span></span>
</div>
</div>
<div class="circles circle-styles last center">
<svg class="main-icons" xmlns="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve">
<g>
<g>
<path d="M56,11h-9V8c0-0.552-0.447-1-1-1s-1,0.448-1,1v3H19V8c0-0.552-0.448-1-1-1s-1,0.448-1,1v3H8c-0.552,0-1,0.448-1,1v44 c0,0.553,0.448,1,1,1h48c0.553,0,1-0.447,1-1V12C57,11.448,56.553,11,56,11z M17,13v3c0,0.552,0.448,1,1,1s1-0.448,1-1v-3h26v3 c0,0.552,0.447,1,1,1s1-0.448,1-1v-3h8v10H9V13H17z M9,55V25h46v30H9z"
/>
<path d="M39.231,33.359L29.807,44.67l-5.252-3.502c-0.46-0.307-1.08-0.182-1.387,0.277c-0.306,0.46-0.182,1.08,0.277,1.387l6,4 C29.615,46.945,29.808,47,30,47c0.288,0,0.572-0.124,0.769-0.359l10-12c0.354-0.425,0.296-1.056-0.128-1.409 C40.215,32.879,39.586,32.936,39.231,33.359z"
/>
</g>
</g>
</svg>
</div>
<div class="circles circle-styles second center">
<svg class="main-icons" xmlns="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve">
<g>
<g>
<path d="M50,7H14c-0.552,0-1,0.448-1,1v48c0,0.553,0.448,1,1,1h36c0.553,0,1-0.447,1-1V8C51,7.448,50.553,7,50,7z M15,9h6v46h-6V9 z M49,55H23V9h26V55z"
/>
<path d="M32,23h10c0.553,0,1-0.448,1-1s-0.447-1-1-1H32c-0.552,0-1,0.448-1,1S31.448,23,32,23z" />
<path d="M42,27H32c-0.552,0-1,0.448-1,1s0.448,1,1,1h10c0.553,0,1-0.448,1-1S42.553,27,42,27z" />
</g>
</g>
</svg>
</div>
<div class="circles circle-styles first center">
<svg class="main-icons" xmlns="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve">
<g>
<path d="M56,11h-9V8c0-0.552-0.447-1-1-1s-1,0.448-1,1v3H19V8c0-0.552-0.448-1-1-1s-1,0.448-1,1v3H8c-0.552,0-1,0.448-1,1v44 c0,0.553,0.448,1,1,1h48c0.553,0,1-0.447,1-1V12C57,11.448,56.553,11,56,11z M17,13v3c0,0.552,0.448,1,1,1s1-0.448,1-1v-3h26v3 c0,0.552,0.447,1,1,1s1-0.448,1-1v-3h8v10H9V13H17z M25,39V25h14v14H25z M39,41v14H25V41H39z M23,39H9V25h14V39z M41,25h14v14H41 V25z M9,41h14v14H9V41z M41,55V41h14v14H41z"
/>
</g>
</svg>
</div>
</div>
<div class="box">
<div class="icons">
<div class="move-left">
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal"
d="M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 25.832031 46 A 1.0001 1.0001 0 0 0 26.158203 46 L 31.832031 46 A 1.0001 1.0001 0 0 0 32.158203 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 41 6 C 42.668484 6 44 7.3315161 44 9 L 44 41 C 44 42.668484 42.668484 44 41 44 L 33 44 L 33 30 L 36.820312 30 L 38.220703 23 L 33 23 L 33 21 C 33 20.442508 33.05305 20.398929 33.240234 20.277344 C 33.427419 20.155758 34.005822 20 35 20 L 38 20 L 38 14.369141 L 37.429688 14.097656 C 37.429688 14.097656 35.132647 13 32 13 C 29.75 13 27.901588 13.896453 26.71875 15.375 C 25.535912 16.853547 25 18.833333 25 21 L 25 23 L 22 23 L 22 30 L 25 30 L 25 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 32 15 C 34.079062 15 35.38736 15.458455 36 15.701172 L 36 18 L 35 18 C 33.849178 18 32.926956 18.0952 32.150391 18.599609 C 31.373826 19.104024 31 20.061492 31 21 L 31 25 L 35.779297 25 L 35.179688 28 L 31 28 L 31 44 L 27 44 L 27 28 L 24 28 L 24 25 L 27 25 L 27 21 C 27 19.166667 27.464088 17.646453 28.28125 16.625 C 29.098412 15.603547 30.25 15 32 15 z"
font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" />
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1">
<g id="surface1">
<path style=" " d="M 34.21875 5.46875 C 28.238281 5.46875 23.375 10.332031 23.375 16.3125 C 23.375 16.671875 23.464844 17.023438 23.5 17.375 C 16.105469 16.667969 9.566406 13.105469 5.125 7.65625 C 4.917969 7.394531 4.597656 7.253906 4.261719 7.277344 C 3.929688 7.300781 3.632813 7.492188 3.46875 7.78125 C 2.535156 9.386719 2 11.234375 2 13.21875 C 2 15.621094 2.859375 17.820313 4.1875 19.625 C 3.929688 19.511719 3.648438 19.449219 3.40625 19.3125 C 3.097656 19.148438 2.726563 19.15625 2.425781 19.335938 C 2.125 19.515625 1.941406 19.839844 1.9375 20.1875 L 1.9375 20.3125 C 1.9375 23.996094 3.84375 27.195313 6.65625 29.15625 C 6.625 29.152344 6.59375 29.164063 6.5625 29.15625 C 6.21875 29.097656 5.871094 29.21875 5.640625 29.480469 C 5.410156 29.742188 5.335938 30.105469 5.4375 30.4375 C 6.554688 33.910156 9.40625 36.5625 12.9375 37.53125 C 10.125 39.203125 6.863281 40.1875 3.34375 40.1875 C 2.582031 40.1875 1.851563 40.148438 1.125 40.0625 C 0.65625 40 0.207031 40.273438 0.0507813 40.71875 C -0.109375 41.164063 0.0664063 41.660156 0.46875 41.90625 C 4.980469 44.800781 10.335938 46.5 16.09375 46.5 C 25.425781 46.5 32.746094 42.601563 37.65625 37.03125 C 42.566406 31.460938 45.125 24.226563 45.125 17.46875 C 45.125 17.183594 45.101563 16.90625 45.09375 16.625 C 46.925781 15.222656 48.5625 13.578125 49.84375 11.65625 C 50.097656 11.285156 50.070313 10.789063 49.777344 10.445313 C 49.488281 10.101563 49 9.996094 48.59375 10.1875 C 48.078125 10.417969 47.476563 10.441406 46.9375 10.625 C 47.648438 9.675781 48.257813 8.652344 48.625 7.5 C 48.75 7.105469 48.613281 6.671875 48.289063 6.414063 C 47.964844 6.160156 47.511719 6.128906 47.15625 6.34375 C 45.449219 7.355469 43.558594 8.066406 41.5625 8.5 C 39.625 6.6875 37.074219 5.46875 34.21875 5.46875 Z M 34.21875 7.46875 C 36.769531 7.46875 39.074219 8.558594 40.6875 10.28125 C 40.929688 10.53125 41.285156 10.636719 41.625 10.5625 C 42.929688 10.304688 44.167969 9.925781 45.375 9.4375 C 44.679688 10.375 43.820313 11.175781 42.8125 11.78125 C 42.355469 12.003906 42.140625 12.53125 42.308594 13.011719 C 42.472656 13.488281 42.972656 13.765625 43.46875 13.65625 C 44.46875 13.535156 45.359375 13.128906 46.3125 12.875 C 45.457031 13.800781 44.519531 14.636719 43.5 15.375 C 43.222656 15.578125 43.070313 15.90625 43.09375 16.25 C 43.109375 16.65625 43.125 17.058594 43.125 17.46875 C 43.125 23.71875 40.726563 30.503906 36.15625 35.6875 C 31.585938 40.871094 24.875 44.5 16.09375 44.5 C 12.105469 44.5 8.339844 43.617188 4.9375 42.0625 C 9.15625 41.738281 13.046875 40.246094 16.1875 37.78125 C 16.515625 37.519531 16.644531 37.082031 16.511719 36.683594 C 16.378906 36.285156 16.011719 36.011719 15.59375 36 C 12.296875 35.941406 9.535156 34.023438 8.0625 31.3125 C 8.117188 31.3125 8.164063 31.3125 8.21875 31.3125 C 9.207031 31.3125 10.183594 31.1875 11.09375 30.9375 C 11.53125 30.808594 11.832031 30.402344 11.816406 29.945313 C 11.800781 29.488281 11.476563 29.097656 11.03125 29 C 7.472656 28.28125 4.804688 25.382813 4.1875 21.78125 C 5.195313 22.128906 6.226563 22.402344 7.34375 22.4375 C 7.800781 22.464844 8.214844 22.179688 8.355469 21.746094 C 8.496094 21.3125 8.324219 20.835938 7.9375 20.59375 C 5.5625 19.003906 4 16.296875 4 13.21875 C 4 12.078125 4.296875 11.03125 4.6875 10.03125 C 9.6875 15.519531 16.6875 19.164063 24.59375 19.5625 C 24.90625 19.578125 25.210938 19.449219 25.414063 19.210938 C 25.617188 18.96875 25.695313 18.648438 25.625 18.34375 C 25.472656 17.695313 25.375 17.007813 25.375 16.3125 C 25.375 11.414063 29.320313 7.46875 34.21875 7.46875 Z "
/>
</g>
</svg>
</div>
<div class="move-right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve">
<g>
<g>
<path d="M50,37.3c-10.3,0-18.7,8.4-18.7,18.7S39.7,74.7,50,74.7S68.7,66.3,68.7,56S60.3,37.3,50,37.3z M50,70.7 c-8.1,0-14.7-6.6-14.7-14.7S41.9,41.3,50,41.3c8.1,0,14.7,6.6,14.7,14.7S58.1,70.7,50,70.7z"
/>
<path d="M50,44.7c-6.2,0-11.3,5.1-11.3,11.3c0,1.1,0.9,2,2,2s2-0.9,2-2c0-4,3.3-7.3,7.3-7.3c1.1,0,2-0.9,2-2S51.1,44.7,50,44.7z"
/>
<path d="M87.5,25.7H72.4L71,19.8c-0.9-3.6-4.1-6.1-7.8-6.1H36.8c-3.7,0-6.9,2.5-7.8,6.1l-1.4,5.9H12.5c-3.5,0-6.3,2.8-6.3,6.3 v48.2c0,3.5,2.8,6.3,6.3,6.3h75c3.5,0,6.3-2.8,6.3-6.3V31.9C93.8,28.5,91,25.7,87.5,25.7z M89.8,80.1c0,1.2-1,2.3-2.3,2.3h-75 c-1.2,0-2.3-1-2.3-2.3V31.9c0-1.2,1-2.3,2.3-2.3h16.6c0.9,0,1.7-0.6,1.9-1.5l1.8-7.4c0.4-1.8,2-3.1,3.9-3.1h26.5 c1.9,0,3.5,1.3,3.9,3.1l1.8,7.4c0.2,0.9,1,1.5,1.9,1.5h16.6c1.2,0,2.3,1,2.3,2.3V80.1z"
/>
<path d="M82.7,35H79c-2.5,0-4.6,2.1-4.6,4.6v3.8c0,2.5,2.1,4.6,4.6,4.6h3.8c2.5,0,4.6-2.1,4.6-4.6v-3.8C87.3,37.1,85.3,35,82.7,35 z M83.3,43.4c0,0.3-0.3,0.6-0.6,0.6H79c-0.3,0-0.6-0.3-0.6-0.6v-3.8c0-0.3,0.3-0.6,0.6-0.6h3.8c0.3,0,0.6,0.3,0.6,0.6V43.4z"
/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg" x="0px" y="0px" version="1.1" viewBox="0 0 95 95">
<g transform="translate(0,-952.36218)">
<path fill-opacity="1" stroke="none" marker="none" d="m 32,966.36215 c -9.93735,0 -18,8.0626 -18,18 l 0,36.00005 c 0,9.9374 8.06265,18 18,18 l 36,0 c 9.93735,0 18,-8.0626 18,-18 l 0,-36.00005 c 0,-9.9374 -8.06265,-18 -18,-18 l -36,0 z m 0,4 36,0 c 7.79054,0 14,6.2095 14,14 l 0,36.00005 c 0,7.7905 -6.20946,14 -14,14 l -36,0 c -7.79054,0 -14,-6.2095 -14,-14 l 0,-36.00005 c 0,-7.7905 6.20946,-14 14,-14 z m 38,6 c -2.2092,0 -4,1.7908 -4,4 0,2.2091 1.7908,4 4,4 2.2091,0 4,-1.7909 4,-4 0,-2.2092 -1.7909,-4 -4,-4 z m -20,9 c -9.36519,0 -17,7.6349 -17,16.99995 0,9.3651 7.63481,17.0001 17,17.0001 9.36519,0 17,-7.635 17,-17.0001 0,-9.36505 -7.63481,-16.99995 -17,-16.99995 z m 0,4 c 7.20341,0 13,5.7967 13,12.99995 0,7.2033 -5.79659,13.0001 -13,13.0001 -7.20341,0 -13,-5.7968 -13,-13.0001 0,-7.20325 5.79659,-12.99995 13,-12.99995 z"
display="inline" overflow="visible" style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate"
visibility="visible" />
</g>
</svg>
</div>
</div>
</div>
</div>
<svg id="clip">
<defs>
<clipPath id="cut">
<path d="M0,0H550V120H-400zM215,0a60,60 0 1,0 120,0a60,60 0 1,0 -120,0" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>html {
box-sizing: border-box;
background-color: #d8d8d8;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 99vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.blobs {
display: flex;
justify-content: center;
align-items: center;
filter: url(#goo);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box {
height: 100px;
width: 550px;
background: #ececec;
box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.075);
clip-path: url(#cut);
border-radius: 5px;
z-index: -1;
}
svg {
height: 0;
width: 0;
}
.circle-styles {
position: absolute;
width: 90px;
height: 90px;
transform: translate(0, -48px);
background: hsl(337, 70%, 58%);
clip-path: circle(42px at center);
}
.circle-styles:nth-child(1) span {
width: 35px;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
border-radius: 15px;
}
.circle-styles:nth-child(1) span:nth-child(2) {
transform: rotate(90deg);
}
.circle-styles:nth-child(1) {
display: flex;
align-items: center;
justify-content: center;
}
.first {
transition: transform 0.5s 100ms ease-out;
background: hsl(307, 70%, 58%);
}
.second {
transition: transform 0.5s 300ms ease-out;
background: hsl(277, 70%, 58%);
}
.last {
transition: transform 0.5s 500ms ease-out;
background: hsl(247, 70%, 58%);
}
.first.show {
transform: translate(-100px, -120px);
}
.second.show {
transform: translate(0px, -150px);
}
.last.show {
transform: translate(100px, -120px);
}
.cross {
transform-origin: center center;
transition: all 0.5s ease-in-out;
}
.bg {
transition: all 0.4s ease-in-out;
width: 100px;
height: 100px;
position: absolute;
border-radius: 100%;
transform: scale(0);
background: hsla(0, 0%, 100%, 0.459);
}
.bg.show {
transform: scale(0.7);
opacity: 0;
}
.cross.show {
transform: rotate(45deg);
}
.main-circle {
z-index: 2;
}
.icons {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.icons svg {
width: 45px;
height: 45px;
margin: 30px;
fill: hsl(0, 0%, 52%);
transition: fill 0.5s ease-out;
}
.icons svg.colorchange {
fill: hsla(0, 0%, 67%, 0.534);
}
.circles svg {
transition: fill 0.3s ease-out;
fill: hsl(0, 0%, 92%);
}
.circles:hover svg {
fill: hsl(0, 0%, 100%);
}
.main-icons {
fill: rgb(255, 255, 255);
width: 50px;
height: 50px;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.move-left {
transform: translate(-20px, 0px);
}
.move-right {
transform: translate(20px, 0px);
}
const button = document.querySelector(".main-circle");
const circles = document.querySelectorAll(".circles");
const cross = document.querySelector(".cross");
const crossbg = document.querySelector(".bg");
const boxicons = document.querySelectorAll(".icons svg");
button.addEventListener("click", function() {
cross.classList.toggle("show");
crossbg.classList.toggle("show");
circles.forEach(element => {
element.classList.toggle("show");
});
boxicons.forEach(element => {
element.classList.toggle("colorchange");
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.