Skip to content

Instantly share code, notes, and snippets.

@shumbo

shumbo/CSS Only TOKYO 2020 Olympic & Paralympic Games Logo.markdown

Created April 26, 2016 13:24
Show Gist options
  • Save shumbo/ac20840f217480da5ad41fd178ee1a7d to your computer and use it in GitHub Desktop.
Save shumbo/ac20840f217480da5ad41fd178ee1a7d to your computer and use it in GitHub Desktop.
Download ZIP
CSS Only TOKYO 2020 Olympic & Paralympic Games Logo
Raw
CSS Only TOKYO 2020 Olympic & Paralympic Games Logo.markdown
Raw
index.html
<div id="tokyoOlympic2020">
<div id="block01" class="parts">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<!-- /#block01.parts --></div>
<div id="block02" class="parts">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<!-- /#block02.parts --></div>
<div id="block03" class="parts">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<!-- /#block03.parts --></div>
<div class="title">
<span class="tokyo">TOKYO</span>
<span class="year">2020</span>
<!-- /.title --></div>
<div id="rings">
<div class="ring1"></div>
<div class="ring2"></div>
<div class="ring3"></div>
<div class="ring4"></div>
<div class="ring5"></div>
<!-- /#rings --></div>
<!-- /#tokyoOlympic2016 --></div>
<div id="tokyoParalympic2020">
<div id="block01" class="parts">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
<!-- /#block01.parts --></div>
<div class="title">
<span class="tokyo">TOKYO</span>
<span class="year">2020</span>
<!-- /.title --></div>
<div class="sub-title">
<span class="paralympic">PARALYMPIC</span>
<span class="games">GAMES</span>
<!-- /.sub-title --></div>
<div class="symbols">
<div class="symbol_red symbol"></div>
<div class="symbol_blue symbol"></div>
<div class="symbol_green symbol"></div>
<!-- /.symbols --></div>
<!-- /#tokyoParalympic2020 --></div>
Raw
style.scss
$blue: #002063;
body {
font-family: 'Oswald', sans-serif;
}
.title, .sub-title {
color: $blue;
font-weight: bold;
span {
&:nth-child(1) {
margin-right: -2px;
}
&:nth-child(2) {
letter-spacing:6px;
}
}
}
.title {
padding: 310px 0 0 20px;
font-size: 48px;
span {
&:nth-child(1) {
letter-spacing: 9px;
}
}
}
.sub-title {
margin: 10px 0 0 15px;
font-size: 20px;
letter-spacing: 4px;
text-align: center;
}
/* TOKYO Olympic 2020 Logo */
#tokyoOlympic2020{
position: relative;
width: 340px;
height: 480px;
margin: 30px auto;
#block01 {
position: absolute;
top: 126px;
left: 50px;
}
#block02 {
position: absolute;
top: 173px;
left: 190px;
transform: rotate(240deg);
transform-origin: right bottom;
}
#block03 {
position: absolute;
top: 56px;
left: 249px;
transform: rotate(120deg);
transform-origin: left top;
}
.bar1 {
position: relative;
width: 36px;
height: 11px;
background-color: $blue;
transform: rotate(60deg);
transform-origin: left top;
top: -1px;
left: -1px;
box-shadow: 62px 36px 0 $blue, 124px 0 0 $blue;
&:before, &:after {
content:"";
position:absolute;
top:0;
left:0;
display:block;
width: 36px;;
height: 10px;
background-color:$blue;
transform-origin:left top;
}
&:before {
left: 0;
top: 10px;
transform:rotate(30deg);
}
&:after {
top: -8px;
left: -5px;
transform:rotate(-30deg);
box-shadow: 98px 99px 0 $blue;
}
}
.bar2 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 24px;
left: 7px;
width: 33px;
height: 20px;
transform: rotate(75deg);
box-shadow: 51px -52px 0 $blue;
}
&:after {
top: 5px;
left: 30px;
width: 33px;
height: 20px;
transform: rotate(45deg);
box-shadow: 51px 52px 0 $blue, 120px 33px 0 $blue;
}
}
.bar3{
position: relative;
top: 41px;
left: 39px;
width: 28px;
height: 28px;
background-color: $blue;
transform: rotate(60deg);
transform-origin: left top;
box-shadow: 62px -37px 0 $blue;
}
.bar4 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 64px;
left: 151px;
width: 32px;
height: 20px;
transform: rotate(135deg);
}
&:after {
top: 99px;
left: 150px;
width: 26px;
height: 26px;
transform: rotate(119deg)
}
}
}
/* Olympic Ring */
@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/transform";
$size:3.2em;
$thickness: 0.4em;
$colors: #0079C3, #F5B629, $blue, #009945, #E71F4A;
@mixin ring($num){
div:nth-child(#{$num}){
top:(($num - 1) % 2) * ($size/2);
left:($num - 1) * ($size/2 + $thickness * 1.5);
z-index:5 * $num;
border-color:nth($colors,$num);
}
@if $num > 1{
div:nth-child(#{$num}):before{
content:' ';
@if $num % 2 == 0{
top:(-$size/2) - $thickness;
left:(-$size/2) - ($thickness * 2.5);
z-index:5 * ($num + 1) + 1;
border-color: transparent nth($colors,$num - 1) transparent transparent;
}
@else{
top:($size/2) - $thickness;
left:(-$size/2) - ($thickness * 2.5);
z-index:5 * ($num + 1) + 1;
border-color: nth($colors,$num - 1) transparent transparent transparent;
@include rotate(40deg);
}
}
}
}
#rings{
position:relative;
margin: 20px auto;
width: 205px;
div, div:before{
position:absolute;
width:$size;
height:$size;
border-width:$thickness;
border-style:solid;
@include border-radius($size);
}
@include ring(1);
@include ring(2);
@include ring(3);
@include ring(4);
@include ring(5);
}
#tokyoParalympic2020 {
position: relative;
width: 330px;
height: 400px;
margin: 0 auto 60px;
#block01 {
position: relative;
left:10px;
}
.bar1 {
position:absolute;
top: 238px;
left: 152px;
width: 10px;
height: 32px;
background-color: $blue;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 33px;
transform-origin: left top;
background-color: $blue;
}
&:before {
top: 9px;
left: -24px;
transform: rotate(-30deg);
}
&:after {
top: 5px;
left: 25px;
transform: rotate(30deg);
}
}
.bar2 {
position: absolute;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 32px;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 267px;
left: 113px;
transform: rotate(-60deg);
}
&:after {
top: 259px;
left: 196px;
transform: rotate(60deg);
}
}
.bar3 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 33px;
height: 10px;
transform-origin: left top;
background-color: $blue;
box-shadow: 0px -243px 0 $blue;
}
&:before {
top: 250px;
left: 84px;
transform: rotate(30deg);
}
&:after {
top: 266px;
left: 201px;
transform: rotate(-30deg);
}
}
.bar4 {
position: absolute;
top: 141px;
left: 30px;
width: 10px;
height: 33px;
background-color: $blue;
box-shadow: 243px 0 0 $blue;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 32px;
background-color: $blue;
transform-origin: left top;
box-shadow: 243px 0 0 $blue;
}
&:before {
top: -61px;
left: 25px;
transform: rotate(30deg);
}
&:after {
top: 66px;
left: 9px;
transform: rotate(-30deg);
}
}
.bar5 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
background-color: $blue;
transform-origin: left top;
width: 18px;
height: 29px;
}
&:before {
top: 239px;
left: 96px;
transform: rotate(-45deg);
}
&:after {
top: 227px;
left: 205px;
transform: rotate(45deg);
}
}
.bar6 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
display: block;
background-color: $blue;
transform-origin: left top;
width: 18px;
height: 29px;
}
&:before {
top: 215px;
left: 128px;
transform: rotate(-15deg);
}
&:after {
top: 210px;
left: 168px;
transform: rotate(15deg);
}
}
.bar7 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 18px;
height: 29px;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 230px;
left: 63px;
transform: rotate(-45deg);
box-shadow: 217px 0 0 $blue;
}
&:after {
top: 218px;
left: 238px;
transform: rotate(45deg);
box-shadow: -217px 0 0 $blue;
}
}
.bar8 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 17px;
height: 29px;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 174px;
left: 39px;
transform: rotate(-17deg);
box-shadow: 218px 8px 0 $blue;
}
&:after {
top: 169px;
left: 258px;
transform: rotate(17deg);
box-shadow: -218px 8px 0 $blue;
}
}
.bar9 {
position: absolute;
top: 187px;
left: 145px;
width: 24px;
height: 24px;
background-color: $blue;
box-shadow: -89px -42px 0 $blue, 89px -42px 0 $blue;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 24px;
height: 24px;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 19px;
left: -49px;
transform: rotate(-30deg);
}
&:after {
top: 7px;
left: 52px;
transform: rotate(30deg);
}
}
.bar10 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 24px;
height: 24px;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 197px;
left: 63px;
transform: rotate(-30deg);
box-shadow: 178px 0 0 $blue;
}
&:after {
top: 186px;
left: 229px;
transform: rotate(30deg);
box-shadow: -178px 0 0 $blue;
}
}
.bar11 {
position: relative;
&:before, &:after {
content: "";
position: absolute;
display: block;
width: 30px;
height: 18px;
background-color: $blue;
transform-origin: left top;
}
&:before {
top: 178px;
left: 111px;
transform: rotate(-15deg);
box-shadow: 98px -17px 0 $blue, -29px -17px 0 $blue;
}
&:after {
top: 170px;
left: 172px;
transform: rotate(15deg);
box-shadow: -97px -17px 0 $blue, 30px -18px 0 $blue;
}
}
.bar12 {
position: absolute;
top: 161px;
left: 140px;
width: 34px;
height: 10px;
background-color: $blue;
box-shadow: -33px -9px 0 $blue, 32px -9px 0 $blue;
}
.symbols {
position: relative;
width: 256px;
height: 150px;
margin: 0 auto;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Paralympic_flag.svg/260px-Paralympic_flag.svg.png) no-repeat 50% 50%;
.symbol {
&:before {
content: "";
position: absolute;
top: -11px;
left: 8px;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
z-index: 2;
}
}
.symbol_red {
position: absolute;
top: 7px;
left: 113px;
width: 60px;
height: 90px;
background-color: #AA272F;
border-radius: 50%;
transform: rotate(50deg);
transform-origin: left top;
}
.symbol_blue {
position: absolute;
top: 31px;
left: 113px;
width: 60px;
height: 90px;
background-color: #00549F;
border-radius: 50%;
transform: rotate(20deg);
transform-origin: left top;
}
.symbol_green {
position: absolute;
top: 103px;
left: 116px;
width: 50px;
height: 90px;
background-color: #008542;
border-radius: 50%;
transform: rotate(-80deg);
transform-origin: left top;
}
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment