<svg xmlns="http://www.w3.org/2000/svg" display="none" version="1.1">
	<symbol id="dribbble" viewBox="0 0 20 20">
<path d="M10 20C4.486 20 0 15.514 0 10S4.486 0 10 0s10 4.486 10 10-4.486 10-10 10zM9.462 7.205c-1.354-2.398-2.8-4.418-3.09-4.82C4.042 3.498 2.3 5.643 1.74 8.225h.084c.778 0 4.003-.064 7.636-1.02zm2.005 4.253c-4.627 1.612-6.38 4.77-6.62 5.245C6.275 17.803 8.06 18.46 10 18.46c1.156 0 2.258-.233 3.263-.655-.135-.786-.627-3.325-1.786-6.35-.004 0-.006.002-.01.003zm4.1-7.794c-1.488-1.306-3.437-2.1-5.567-2.1-.655 0-1.293.077-1.905.22.343.464 1.79 2.463 3.108 4.88 2.85-1.08 4.128-2.678 4.363-3zm-4.99 6.375l.282-.09c-.21-.45-.42-.91-.65-1.35-3.75 1.11-7.39 1.2-8.44 1.2-.1 0-.17 0-.22-.01-.01.07-.01.14-.01.21 0 2.14.8 4.1 2.12 5.59.35-.59 2.68-4.21 6.9-5.57zm2.588 1c1.05 2.9 1.506 5.28 1.62 5.93 1.85-1.28 3.167-3.27 3.55-5.58-.322-.1-1.703-.49-3.468-.49-.54 0-1.112.03-1.702.12zM11.9 8.01c.19.39.373.786.543 1.185l.17.405c.653-.08 1.305-.112 1.925-.112 1.92 0 3.53.3 3.908.38-.032-1.946-.726-3.735-1.867-5.15-.3.383-1.73 2.076-4.68 3.296z"></path>
</symbol>
	<symbol id="github" viewBox="0 0 20 20">
<path d="M10 0C4.477 0 0 4.59 0 10.253c0 4.53 2.865 8.373 6.84 9.73.5.093.68-.223.68-.495 0-.243-.007-.888-.012-1.744-2.782.62-3.37-1.374-3.37-1.374-.453-1.185-1.11-1.5-1.11-1.5-.907-.636.07-.624.07-.624 1.003.073 1.53 1.057 1.53 1.057.893 1.567 2.342 1.114 2.912.852.09-.662.35-1.114.635-1.37-2.22-.26-4.555-1.14-4.555-5.068 0-1.12.39-2.035 1.03-2.75-.104-.26-.447-1.303.097-2.715 0 0 .84-.275 2.75 1.052.797-.228 1.653-.342 2.503-.346.85.004 1.705.118 2.504.346 1.91-1.327 2.747-1.052 2.747-1.052.55 1.412.21 2.455.1 2.714.65.716 1.03 1.632 1.03 2.75 0 3.94-2.34 4.807-4.56 5.06.36.317.68.943.68 1.9 0 1.37-.01 2.476-.01 2.812 0 .274.18.593.69.493 3.96-1.35 6.82-5.19 6.82-9.72C20 4.59 15.53 0 10 0"></path>
</symbol>
	<symbol id="codepen" fill-rule="evenodd" viewBox="0 0 20 20">
<path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm5.12 10.89L13.79 10l1.33-.89v1.78zm-4.59 3.77v-2.48l2.305-1.54 1.86 1.243-4.164 2.776zM10 11.256L8.12 10 10 8.743 11.88 10 10 11.257zm-.53 3.402L5.305 11.88l1.86-1.242 2.304 1.54v2.48zM4.88 9.11l1.33.89-1.33.89V9.11zm4.59-3.77v2.48L7.164 9.36l-1.86-1.243L9.47 5.34zm1.06 0l4.165 2.777-1.86 1.244-2.304-1.54V5.34zm5.648 2.707c0-.008-.003-.015-.004-.023-.003-.015-.005-.03-.01-.045 0-.01-.005-.02-.007-.03l-.014-.04-.012-.03c0-.02-.01-.03-.01-.04l-.01-.03-.02-.04-.02-.03-.02-.03-.02-.02-.03-.03-.02-.02s0-.01-.01-.01L10.3 3.9c-.18-.12-.41-.12-.59 0L4.052 7.675l-.008.007c-.01.01-.016.017-.024.02l-.03.028-.02.02c-.01.01-.02.02-.02.03l-.02.02-.02.03-.01.026-.02.035c-.002.01-.01.02-.01.03-.005.01-.01.03-.014.04l-.01.03-.01.05v.03c-.004.03-.006.05-.006.07V12l.01.044.01.023.012.04.01.02c.005.01.01.025.017.037l.01.022.02.038c0 .01.01.02.02.027l.02.03.02.02.03.03.02.02.01.01 5.65 3.77c.09.06.19.09.29.09.1 0 .21-.03.3-.09l5.65-3.77v-.01c.01 0 .01-.01.02-.02l.04-.03.02-.02.03-.03.01-.02c.01-.01.02-.02.02-.03l.01-.02.02-.03.013-.02.02-.04.01-.02.01-.05v-3.9c0-.02 0-.04-.006-.07z"></path>
</symbol>
	<symbol id="twitter" viewBox="0 0 20 17">
<path d="M6.29 17c-2.317 0-4.474-.71-6.29-1.928.32.04.648.06.98.06 1.92 0 3.69-.686 5.095-1.837-1.796-.035-3.31-1.276-3.833-2.98.25.05.507.076.772.076.374 0 .736-.05 1.08-.15C2.22 9.85.804 8.12.804 6.04v-.06c.554.32 1.187.513 1.86.535-1.1-.77-1.826-2.083-1.826-3.572 0-.786.202-1.524.555-2.157C3.416 3.382 6.44 5.09 9.85 5.27c-.07-.314-.107-.642-.107-.978C9.743 1.922 11.58 0 13.847 0c1.18 0 2.246.52 2.995 1.355.935-.192 1.813-.55 2.605-1.04-.306 1-.956 1.842-1.804 2.373.83-.104 1.62-.334 2.357-.676-.55.86-1.246 1.617-2.047 2.222.007.184.01.37.01.555C17.963 10.46 13.838 17 6.29 17"></path>
</symbol>
</svg>

<div class="container">
	<a target="_blank" class="link  link--icon  link--twitter" href="https://twitter.com/daviddarnes" title="twitter">
		<svg class="icon  icon--twitter" role="img" aria-label="twitter icon">
		<title>twitter</title>
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
	</svg>
	</a>
	<a target="_blank" class="link  link--icon  link--github" href="https://github.com/daviddarnes" title="github">
		<svg class="icon  icon--github" role="img" aria-label="github icon">
		<title>github</title>
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
	</svg>
	</a>
	<a target="_blank" class="link  link--icon  link--codepen" href="https://codepen.io/daviddarnes" title="codepen">
		<svg class="icon  icon--codepen" role="img" aria-label="codepen icon">
		<title>codepen</title>
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#codepen"></use>
	</svg>
	</a>
	<a target="_blank" class="link  link--icon  link--dribbble" href="https://dribbble.com/daviddarnes" title="dribbble">
		<svg class="icon  icon--dribbble" role="img" aria-label="dribbble icon">
		<title>dribbble</title>
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#dribbble"></use>
	</svg>
	</a>
</div>
.icon {
	fill: #f1f1f1;
	width: 24px;
	height: 24px;
	transition: fill .2s;
	&--floating {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 100%;
		animation-name: rise;
		animation-timing-function: linear;
	}
}

.link {
	display: inline-block;
	margin: .5rem .4rem;
	position: relative;
	z-index: 2;
	&--twitter .icon,
	&--twitter:hover ~ .icon--twitter {
		fill: #55acee;
	}
	&--github .icon,
	&--github:hover ~ .icon--github {
		fill: #333;
	}
	&--codepen .icon,
	&--codepen:hover ~ .icon--codepen {
		fill: #111;
	}
	&--dribbble .icon,
	&--dribbble:hover ~ .icon--dribbble {
		fill: #ea4c89;
	}
}

.container {
	position: relative;
	overflow: hidden;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes rise {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(calc(-100vh - 24px));
	}
}
View Compiled
// randomiser courtesy of @bdc https://twitter.com/bdc/status/839960325805969408
const randomInterval = (() => {
  const random = (min, max) => Math.random() * (max - min) + min;
  return (callback, min, max) => {
    const time = {
      start: performance.now(),
      total: random(min, max)
    };
    const tick = now => {
      if (time.total <= now - time.start) {
        time.start = now;
        time.total = random(min, max);
        callback();
      }
      requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  };
})();

// Bubbling icon class
class bubblingIcon {
	constructor(icons, parent, speeds) {
		this.icons = icons;
		this.parent = parent;
		this.speeds = speeds;
	}

	randomInt(min, max) {
		const randomValue = Math.round(Math.random() * (max - min) + min);
		return randomValue;
	}

	getRandomIconID() {
		const iconID = this.icons[Math.floor(Math.random() * this.icons.length)];
		return iconID;
	}

	generateIcon() {
		const xsvgNS = 'http://www.w3.org/2000/svg';
		const xlinkNS = 'http://www.w3.org/1999/xlink';

		const svg = document.createElementNS(xsvgNS, 'svg');
		const use = document.createElementNS(xsvgNS, 'use');
		const iconID = this.getRandomIconID();

		svg.appendChild(use);
		svg.classList = `icon  icon--floating  icon--${iconID}`;
		use.setAttributeNS(xlinkNS, 'href', `#${iconID}`);

		return svg;
	}

	init() {
		const icon = this.generateIcon();
		const speed = `${this.randomInt(this.speeds[0], this.speeds[1])}000`;
		const position = `${this.randomInt(0, 100)}%`;

		icon.setAttribute('style', `left: calc(${position} - 24px); animation-duration: ${speed}ms`);

		this.parent.appendChild(icon);

		window.setTimeout(() => { this.parent.removeChild(icon); }, speed);
	}
};

// Icons IDs
const socialIcons = ['github', 'twitter', 'dribbble', 'codepen'];

// Parent container
const container = document.querySelector('.container');

// Bubbling icon set to const
const bubbleIcon = new bubblingIcon(socialIcons, container, [3, 9]);

// Generate bubbling icon with random intervals
randomInterval(() => { bubbleIcon.init() }, 200, 600);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.