Creating Interactive, Responsive Posters with SVG and CSS

Understanding the Circle of Fifths

The circle of fifths is a music theory concept that organizes the 12 chromatic pitches as a sequence of perfect fifths. The circle has three rings: the outer ring contains the staff with either flats (b) or sharps (#), the middle ring contains the major chords, and the inner ring contains the minor chords. A full circle is 360 degrees, so each “chromatic pitch” will be 30 (360/12) degrees.

Creating the Circle with SVG

To create the circle, we’ll use SVG’s path element and some math. We’ll define a function to convert polar coordinates into Cartesian coordinates and another function to create paths with arcs in SVG. Then, we’ll call these functions 12 times, updating the index for each iteration, to create the circle.

<svg viewBox="0 0 400 400">
  <path d="M200,200 L200,200" />
  <!-- ... -->
</svg>

Here’s an example of how you can create the circle using JavaScript:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);
  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");
  return d;       
}

var svg = document.getElementById('svg');
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
svg.appendChild(path);

for (var i = 0; i < 12; i++) {
  var angle = i * 30;
  path.setAttribute("d", describeArc(200, 200, 100, angle, angle + 30));
}

Styling the Circle with CSS

To add some style to our circle, we’ll use CSS to set the background color and add a hover effect.

.circle {
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

.circle:hover {
  fill: #ccc;
}

Adding Text and Elements

To complete our poster, we’ll add text and elements, such as the staff, flats, and sharps, using SVG’s text and symbol elements.

<svg viewBox="0 0 400 400">
  <!-- ... -->
  <text x="200" y="200" font-size="24">C</text>
  <!-- ... -->
</svg>

Customizing the Aesthetic

To create a unique and vintage look, we’ll add some subtle noise to our poster using an SVG filter.

<svg viewBox="0 0 400 400">
  <!-- ... -->
  <filter id="noise">
    <!-- ... -->
  </filter>
  <!-- ... -->
</svg>

Check out the final result on CodePen.