Pure CSS Apple Swift Logo

Preview:

Description:

In this post we’re going to use Html and CSS/CSS3 to draw a Swift logo, which is a new App programming language released by Apple Inc. at WWDC 2014.

Getting Started:

Include the StyleFix 1.0.3 & PrefixFree 1.0.7 in the head section of the page.

The Html.

<div class="icon">
  <div class="body"></div>
  <div class="head"></div>
  <div class="tail"></div>
  <div class="longshadow"></div>
</div>

The SCSS.

// By @guilh
* {
  margin: 0;
  padding: 0;
}
$global-bg: white;
%abs {
  position: absolute;
}
%rel {
  position: relative;
}
%p-el {
  &::before, 
  &::after {
    content: "";
    display: block;
    @extend %abs;
  }
}
%body {
	border-radius: 50%;
	@extend %abs;
}
%mask {
	width: 25px;
	height: 100px;
	background: $global-bg;
	z-index: 4000;
}
.icon {
	width: 254px;
	height: 254px;
	margin: 4% auto;
	border-radius: 3.6em;
	@extend %rel;
	box-shadow: 0 26px 30px -25px rgba(0,0,0,.6);
	background: linear-gradient(to bottom, #fbaf40 0%,#ff291a 100%);
	@extend %p-el;
	&::before {
		left: -25px;
		top: 23px;
		@extend %mask;
	}
	&::after { 
		@extend %mask;
		transform: rotate(90deg);
		top: -63px;
		left: 55px;
	}
}
.body {
	width: 220px;
	height: 172px;
	@extend %body;
	top: -5%;
	left: -12.5%;
	border-top: solid 19px transparent;
	border-right: solid 45px $global-bg;
	transform: rotate(62deg);
	@extend %p-el;
	z-index: 1000;
	&::before {
		width: 171px;
		height: 222px;
		@extend %body;
		top: -17%;
		left: 21%;
		border-right: solid 19px transparent;
		border-top: solid 45px $global-bg;
		transform: rotate(55deg);
	}
}
%head {
		width: 82px;
		height: 75px;
		z-index: 5000;
		border-radius: 50%;
		border-right: solid 24px $global-bg;
		border-top: solid 24px transparent;
}
.head {
		top: 63%;
		right: 10.9%;
		@extend %abs;
		@extend %p-el;
		@extend %head;
		transform: rotate(-94deg) skewY(25deg) skewX(-12deg);
		&::before {
			width: 76px;
			@extend %head;
			top: -25%;
			left: -6%;
			transform: rotate(-20deg) skewY(24deg) skewX(-15deg);
		}
}
.tail {
	width: 200px;
	height: 80px;
	border-radius: 50% 55% 70% 45%;
	border-bottom: solid 25px $global-bg;
	transform: rotate(33deg) skewX(59deg);
	@extend %abs;
	top: 12.5%;
	left: 5.3%;
	z-index: 4000;
	@extend %p-el;
	&::after {
		width: 130px;
		height: 58px;
		bottom: -5%;
		right: 10%;
		border-radius: 50% 55% 70% 45%;
		transform: rotate(6deg) skewX(6deg);
		border-bottom: solid 20px $global-bg;
	}
}
.longshadow {
	width: 230px;
	height: 160px;
	background: rgba(164, 52, 21,.15);
	border-radius: 178px 8em 8em 190px / 122px 8em 8em 138px;
	z-index: 100;
	@extend %abs;
	top: 7.6%;
	left: -7.2%;
	transform: rotate(43deg);	
}

Or the CSS.

* {
  margin: 0;
  padding: 0;
}
.icon::before, .body::before, .head::before, .tail::before, .icon::after, .body::after, .head::after, .tail::after, .body, .head, .tail, .longshadow {
  position: absolute;
}
.icon {
  position: relative;
}
.icon::before, .body::before, .head::before, .tail::before, .icon::after, .body::after, .head::after, .tail::after {
  content: "";
  display: block;
}
.body, .body::before {
  border-radius: 50%;
}
.icon::before, .icon::after {
  width: 25px;
  height: 100px;
  background: white;
  z-index: 4000;
}
.icon {
  width: 254px;
  height: 254px;
  margin: 4% auto;
  border-radius: 3.6em;
  box-shadow: 0 26px 30px -25px rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #fbaf40 0%, #ff291a 100%);
}
.icon::before {
  left: -25px;
  top: 23px;
}
.icon::after {
  transform: rotate(90deg);
  top: -63px;
  left: 55px;
}
.body {
  width: 220px;
  height: 172px;
  top: -5%;
  left: -12.5%;
  border-top: solid 19px transparent;
  border-right: solid 45px white;
  transform: rotate(62deg);
  z-index: 1000;
}
.body::before {
  width: 171px;
  height: 222px;
  top: -17%;
  left: 21%;
  border-right: solid 19px transparent;
  border-top: solid 45px white;
  transform: rotate(55deg);
}
.head, .head::before {
  width: 82px;
  height: 75px;
  z-index: 5000;
  border-radius: 50%;
  border-right: solid 24px white;
  border-top: solid 24px transparent;
}
.head {
  top: 63%;
  right: 10.9%;
  transform: rotate(-94deg) skewY(25deg) skewX(-12deg);
}
.head::before {
  width: 76px;
  top: -25%;
  left: -6%;
  transform: rotate(-20deg) skewY(24deg) skewX(-15deg);
}
.tail {
  width: 200px;
  height: 80px;
  border-radius: 50% 55% 70% 45%;
  border-bottom: solid 25px white;
  transform: rotate(33deg) skewX(59deg);
  top: 12.5%;
  left: 5.3%;
  z-index: 4000;
}
.tail::after {
  width: 130px;
  height: 58px;
  bottom: -5%;
  right: 10%;
  border-radius: 50% 55% 70% 45%;
  transform: rotate(6deg) skewX(6deg);
  border-bottom: solid 20px white;
}
.longshadow {
  width: 230px;
  height: 160px;
  background: rgba(164, 52, 21, 0.15);
  border-radius: 178px 8em 8em 190px / 122px 8em 8em 138px;
  z-index: 100;
  top: 7.6%;
  left: -7.2%;
  transform: rotate(43deg);
}

This Pure CSS Apple Swift Logo was designed by Guilh. You can check out his portfolio on Github here.