A Pen by Ed Moore.

index.html

<div class="ubuntu"></div>

Single-Element-Ubuntu-Logo.markdown

Single Element Ubuntu Logo

Single Element Ubuntu Logo. Pure CSS

A Pen by Ed Moore on CodePen.

License.

style.css

.ubuntu {
  position: relative;
 	overflow:hidden;
  margin: 20px auto;
	width: 200px;
	height: 200px;
	display:block;
  
	/* Webkit */
	background:
		-webkit-radial-gradient(50% 50%, circle, #fff 0%, #fff 10%, rgba(221, 255, 255, 0) 11%) 34px 59px,
		-webkit-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 15%, rgba(221, 72, 20, 0) 16%) 34px 59px,

		-webkit-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) 34px -59px,
		-webkit-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) 34px -59px,

		-webkit-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) -67px 0,
		-webkit-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) -67px 0,

		-webkit-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 27.3%, rgba(221, 72, 20, 0) 28.3%) 0 0,
		-webkit-radial-gradient(50% 50%, circle, #fff 0%, #fff 40.6%, rgba(255, 255, 255, 0) 41.6%) 0 0,
		-webkit-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 70%, rgba(221, 72, 20, 0) 71%) 0 0;
	
  /* Firefox */
	background:
		-moz-radial-gradient(50% 50%, circle, #fff 0%, #fff 10%, rgba(221, 255, 255, 0) 11%) 34px 59px,
		-moz-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 15%, rgba(221, 72, 20, 0) 16%) 34px 59px,

		-moz-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) 34px -59px,
		-moz-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) 34px -59px,

		-moz-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) -67px 0,
		-moz-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) -67px 0,

		-moz-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 27.3%, rgba(221, 72, 20, 0) 28.3%) 0 0,
		-moz-radial-gradient(50% 50%, circle, #fff 0%, #fff 40.6%, rgba(255, 255, 255, 0) 41.6%) 0 0,
		-moz-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 70%, rgba(221, 72, 20, 0) 71%) 0 0;
	/* Opera */
	background:
		-o-radial-gradient(50% 50%, circle, #fff 0%, #fff 10%, rgba(221, 255, 255, 0) 11%) 34px 59px,
		-o-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 15%, rgba(221, 72, 20, 0) 16%) 34px 59px,

		-o-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) 34px -59px,
		-o-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) 34px -59px,

		-o-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) -67px 0,
		-o-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) -67px 0,

		-o-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 27.3%, rgba(221, 72, 20, 0) 28.3%) 0 0,
		-o-radial-gradient(50% 50%, circle, #fff 0%, #fff 40.6%, rgba(255, 255, 255, 0) 41.6%) 0 0,
		-o-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 70%, rgba(221, 72, 20, 0) 71%) 0 0;
	/* IE10 */
	background:
		-ms-radial-gradient(50% 50%, circle, #fff 0%, #fff 10%, rgba(221, 255, 255, 0) 11%) 34px 59px,
		-ms-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 15%, rgba(221, 72, 20, 0) 16%) 34px 59px,

		-ms-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) 34px -59px,
		-ms-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) 34px -59px,

		-ms-radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) -67px 0,
		-ms-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) -67px 0,

		-ms-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 27.3%, rgba(221, 72, 20, 0) 28.3%) 0 0,
		-ms-radial-gradient(50% 50%, circle, #fff 0%, #fff 40.6%, rgba(255, 255, 255, 0) 41.6%) 0 0,
		-ms-radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 70%, rgba(221, 72, 20, 0) 71%) 0 0;
	/* W3C */
	background:
		radial-gradient(50% 50%, circle, #fff 0%, #fff 10%, rgba(221, 255, 255, 0) 11%) 34px 59px,
		radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 15%, rgba(221, 72, 20, 0) 16%) 34px 59px,

		radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) 34px -59px,
		radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) 34px -59px,

		radial-gradient(50% 50%, circle, #fff 0%, #fff 9.1%, rgba(255,255,255,0) 10.1%) -67px 0,
		radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 13.3%, rgba(221, 72, 20, 0) 14.3%) -67px 0,

		radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 27.3%, rgba(221, 72, 20, 0) 28.3%) 0 0,
		radial-gradient(50% 50%, circle, #fff 0%, #fff 40.6%, rgba(255, 255, 255, 0) 41.6%) 0 0,
		radial-gradient(50% 50%, circle, #DD4814 0%, #DD4814 70%, rgba(221, 72, 20, 0) 71%) 0 0;
	background-color: #fff;
}

.ubuntu:before, .ubuntu:after {
	content: '';
	position: absolute;
	width:30px;
	height:10px;
	background: #DD4814;
	display: block;
}

.ubuntu:before {
	top: 53px;
	left:63px;
	-webkit-transform:rotate(240deg);
	   -moz-transform:rotate(240deg);
	     -o-transform:rotate(240deg);
	    -ms-transform:rotate(240deg);
	        transform:rotate(240deg);
}

.ubuntu:after {
	top: 95px;
	right:25px;
 	width:82px;
	height:75px;
	-webkit-transform:skew(-210deg);
	   -moz-transform:skew(-210deg);
	     -o-transform:skew(-210deg);
	    -ms-transform:skew(-210deg);
	        transform:skew(-210deg);
 	border:10px solid #DD4814;
  border-left-width:11px;
 	border-radius:20px;
  background:none;
}