css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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");
  });
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console