Stacking and curves in pure-CSS logos - image

Question

How could one create arbitrary curves with just pure CSS? Is there a 'Bezier' library? I didn't find anything that could match the curve of the outer edge of the logo below.
Looking at the the Shapes of CSS, I think the logo could be approximated with 2 long pink and black rectangle with completely rounded edges tilted 45deg, 3 small white circles in the middle, and some large circles on either side of the rectangles to give that little 'dent'.
Can this shape really be made with just circles?
Update: This is what I've come up with so far (here's a JSFiddle):
<span class='grey logo'>
<span class='black circle' id='left_middle'> </span>
<span class='grey circle' id='left_top'> </span>
<span class='grey circle' id='left_bottom'> </span>
<span class='left black circle'> </span>
<span class='left white small circle'> </span>
<span class='top grey circle' id='left_right'> </span>
<span class='pink circle' id='right_middle'> </span>
<span class='top pink circle'> </span>
<span class='top white small circle'> </span>
<span class='right pink circle'> </span>
<span class='right white small circle'> </span>
<span class='grey circle' id='right_top'> </span>
<span class='grey circle' id='right_bottom'> </span>
</span>
and:
/* normalize CSS */
.logo, .logo *, .logo *:before, .logo *:after {
display: block;
margin: 0;
padding: 0;
background: transparent;
font: normal normal 0/0 serif;
border: 0;
outline: 0;
}
.logo {
position: relative;
overflow: hidden;
margin: 0 0;
width: 500px;
height: 500px;
}
.logo * {
position: absolute;
}
/* colors */
.logo [class*=pink] {
background-color: rgb(217, 27, 91);
}
.logo [class*=white] {
background-color: white;
}
.logo [class*=black] {
background-color: black;
}
[class*=grey] {
background-color: rgb(240, 240, 240)
}
/* shapes */
.logo [class*=circle] {
width: 100px;
height: 100px;
border-radius: 50px;
-moz-border-radius: 50;
-webkit-border-radius: 50px;
}
.logo [class*=small] {
margin-left: 20px;
margin-top: 20px;
width: 60px;
height: 60px;
}
/* positions */
.logo [class*=top] {
left: 108px;
top: 8px;
}
.logo [class*=left] {
left: 46px;
top: 70px;
}
.logo [class*=right] {
left: 170px;
top: 70px;
}
.logo #left_middle {
left: 76px;
top: 40px;
}
.logo #right_middle {
left: 140px;
top: 40px;
}
.logo #left_top {
left: 13px;
top: -25px;
}
.logo #right_top {
left: 203px;
top: -25px;
}
.logo #left_bottom {
left: 141px;
top: 103px;
}
.logo #right_bottom {
left: 75px;
top: 103px;
}
.logo #left_right {
margin-left: -5px;
margin-top: -5px;
width: 110px;
height: 110px;
}
The problem now is, no matter how I arrange my elements, the stacking is always messed up.
The problem is from GCI 2013.

Answer 1

Something to get you started
CSS
.circ {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.circ-small {
width: 65px;
height: 65px;
background: #fff;
-moz-border-radius: 33;
-webkit-border-radius: 33px;
border-radius: 33px;
}
div{
position:absolute;
}
HTML
<div class="circ" style="left:40px;top:40px;"></div>
<div class="circ"></div>
<div class="circ" style="left:70px;top:70px;"></div>
<div class="circ" style="left:103px;top:-25px;background-color:#fff"></div>
<div class="circ" style="left:-25px;top:103px;background-color:#fff"></div>
<div class="circ-small" style="left:25px;top:25px;"></div>
<div class="circ-small" style="left:88px;top:88px;"></div>

Answer 2

To leave you with a small rest of homework for the challenge, I'll just post the beginning of the code which won't suffer of overlapping issues. If you inspect the code carefully, you will see, that I didn't work with full circles here, but used a mix of transparent and colored borders. This solves the overlapping issue as well as decreasing the number of elements needed in total.
Your starting point
The essential part are the pseudo elements (here with different colors and z-indizes):
.pinky:before{
right:-84px;bottom:-1px;
height:30px;width:50px;
border-radius:50%;
z-index:1;
border:20px solid transparent;
border-bottom-color: $pink;
#include transform( rotate(45deg) );
}
You should start with changing colors and z-indizes for yourself to see how it was built and once you got into it complete the rest of the logo.

Answer 3

I did it! I had to get used to only being able to use 'border-radius' for any kind of shape in CSS† though (note: not entirely true).
The main problem here is the overlapping one caused by a cycle of shapes having to be above each other.
The 2 main approaches here are:
using a transparent shape and a solid right border (thanks, #Christoph!) to 'cut' from the gear connector (shown below);
simulating negative border-radii using CS3 gradients for the gear connector so no shapes to cut the part that we don't want are required (better, as allows for a transparent background);
Here's a JSFiddle with the compiled CSS, and the result of the first approach.
HTML:
<span class='wrapper'>
<span class='logo'>
<span class='circle black' id='left_middle'> </span>
<span class='circle dark_grey' id='left_right'> </span>
<span class='circle grey' id='left_left'> </span>
<span class='circle left black'> </span>
<span class='circle left small white'> </span>
<span class='circle top grey' id='left_top'> </span>
<span class='circle pink' id='right_middle'> </span>
<span class='circle grey' id='right_right'> </span>
<span class='grey' id='right_left'> </span>
<span class='circle top pink'> </span>
<span class='circle top white small'> </span>
<span class='circle right pink'> </span>
<span class='circle right small white'> </span>
</span>
<span class='text'>
<span class='bold'>BRL</span><span class='thin'>CAD</span>
</span>
</span>
SCSS/SASS:
/* Fonts */
#font-face {
font-family: 'BRL-CAD';
src: url('fonts/Grandesign Neue Roman.ttf');
}
#font-face {
font-family: 'BRL-CAD Bold';
src: url('fonts/Grandesign Neue Roman Bold.ttf');
}
/* Shapes */
$large_radius: 75px;
$small_radius: 45px;
/* Positions */
$all_left: 10px;
$all_top: 55px;
$top_left: $all_left + 55px;
$top_top: $all_top;
$left_left: $all_left;
$left_top: $all_top + 52px;
$right_left: $all_left + 100px;
$right_top: $all_top + 57px;
$right_middle_left: ($top_left + $right_left) / 2;
$right_middle_top: ($top_top + $right_top) / 2;
$right_right_left: $all_left + 129px;
$right_right_top: $all_top - 11.5px;
$right_left_diff: 50px;
$right_left_left: $all_left + 63px;
$right_left_top: $all_top + 72.5px;
$left_middle_left: ($top_left + $left_left) / 2;
$left_middle_top: ($top_top + $left_top) / 2;
$left_right_left: $all_left + 73.5px;
$left_right_top: $all_top + 64.5px;
$left_left_left: $all_left - 18px;
$left_left_top: $all_top - 21px;
$left_top_diff: 3px;
$left_top_left: $top_left - $left_top_diff;
$left_top_top: $top_top - $left_top_diff;
$logo_width: $right_left + $large_radius + $all_left;
$logo_height: $right_top + $large_radius + $all_top ;
$all_width: $logo_width + 290px;
$all_height: $logo_height;
/* Colors */
$pink: rgb(217, 27, 91);
$grey: rgb(235, 235, 235);
$dark_grey: rgb(230, 230, 230);
/* Normalized CSS */
.wrapper, .wrapper .logo, .wrapper .logo *, .wrapper .logo *:before, .wrapper .logo *:after {
display: block;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
/* Logo + Text */
.wrapper {
/* CSS Tricks */
position: relative;
overflow: hidden;
width: $all_width ;
height: $all_height;
> * {
float:left;
display:inline;
}
/* Background */
$start: rgb(240, 240, 240);
$stop: rgb(225, 225, 225);
background: $dark_grey; // non-CSS3 browsers
background: -webkit-gradient(linear, left top, left bottom, from($start), to($stop)); // for WebKit
background: -moz-linear-gradient(top, $start, $stop); // for Firefox
background: linear-gradient(0deg, $stop, $start); // for standards-compliance
/* Logo */
.logo {
/* CSS Tricks */
#extend .wrapper;
width: $logo_width ;
height: $logo_height;
* {
position: absolute;
}
/* Colors */
#mixin colorize($name, $color) {
[class*=#{$name}] {
background-color: $color;
}
}
#include colorize('white', white);
#include colorize('black', black);
#include colorize('pink', $pink);
#include colorize('grey', $grey);
#include colorize('dark_grey', $dark_grey);
/* Shapes */
[class*=circle] {
width: $large_radius;
height: $large_radius;
border-radius: 50%;
}
[class*=small] {
$margin: ($large_radius - $small_radius) / 2;
margin-left: $margin;
margin-top: $margin;
width: $small_radius;
height: $small_radius;
}
/* Classes and IDs */
[class*=top] {
left: $top_left;
top: $top_top;
}
[class*=left] {
left: $left_left;
top: $left_top;
}
[class*=right] {
left: $right_left;
top: $right_top;
}
#right_middle {
left: $right_middle_left + 5px;
top: $right_middle_top;
}
#right_right {
left: $right_right_left;
top: $right_right_top;
}
#right_left {
left: $right_left_left;
top: $right_left_top;
$radius: $right_left_diff;
width: $radius / 2;
height: $radius;
border-right: $radius / 4 solid $dark_grey;
border-radius: 0 $radius / 2 $radius / 2 0;
background: transparent;
}
#left_middle {
left: $left_middle_left; //76px;
top: $left_middle_top; //40px;
}
#left_right {
left: $left_right_left;
top: $left_right_top;
}
#left_left {
left: $left_left_left;
top: $left_left_top;
}
#left_top {
left: $left_top_left;
top: $left_top_top;
$radius: $large_radius + 2*$left_top_diff;
width: $radius;
height: $radius;
}
}
/* Text */
.text {
margin-left: 5px;
margin-top: $all_top + 10px;
font-size: 75px;
.bold {
color: $pink;
font-weight: bold;
font-family: 'BRL-CAD Bold', sans-serif;
}
.thin {
color: black;
font-family: 'BRL-CAD', sans-serif;
}
}
}