Skip to content

Instantly share code, notes, and snippets.

@kdubbels

kdubbels/musica-viva.html

Created November 29, 2020 06:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kdubbels/e3a1d051955a5da69c4060a1f860c661 to your computer and use it in GitHub Desktop.
Save kdubbels/e3a1d051955a5da69c4060a1f860c661 to your computer and use it in GitHub Desktop.
Download ZIP
Musica Viva by Josef Müller-Brockmann
Raw
musica-viva.html
<!-- based on the pioneering graphic design of Josef Müller-Brockmann -->
<!-- see the basis for this here:
https://i1.wp.com/www.grapheine.com/wp-content/uploads/2013/03/MULLER-BROCKMANN-music-geometric-poster.jpg?quality=90&strip=all&ssl=1
-->
<!-- learn more about Josef Müller-Brockmann here: https://www.grapheine.com/en/history-of-graphic-design/graphic-designer-muller-brockmann-swiss-style -->
<div class="poster-container">
<div class="poster">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g class="group-10">
<circle class="stroke-30" cx="300" cy="300" r="250"/>
<circle class="stroke-29" cx="300" cy="300" r="250"/>
<circle class="stroke-28" cx="300" cy="300" r="250"/>
</g>
<g class="group-9">
<circle class="stroke-27" cx="300" cy="300" r="225"/>
<circle class="stroke-26" cx="300" cy="300" r="225"/>
<circle class="stroke-25" cx="300" cy="300" r="225"/>
</g>
<g class="group-8">
<circle class="stroke-24" cx="300" cy="300" r="200"/>
<circle class="stroke-23" cx="300" cy="300" r="200"/>
<circle class="stroke-22" cx="300" cy="300" r="200"/>
</g>
<g class="group-7">
<circle class="stroke-21" cx="300" cy="300" r="175"/>
<circle class="stroke-20" cx="300" cy="300" r="175"/>
<circle class="stroke-19" cx="300" cy="300" r="175"/>
</g>
<g class="group-6">
<circle class="stroke-18" cx="300" cy="300" r="150"/>
<circle class="stroke-17" cx="300" cy="300" r="150"/>
<circle class="stroke-16" cx="300" cy="300" r="150"/>
</g>
<g class="group-5">
<circle class="stroke-15" cx="300" cy="300" r="125"/>
<circle class="stroke-14" cx="300" cy="300" r="125"/>
<circle class="stroke-13" cx="300" cy="300" r="125"/>
</g>
<g class="group-4">
<circle class="stroke-12" cx="300" cy="300" r="100"/>
<circle class="stroke-11" cx="300" cy="300" r="100"/>
<circle class="stroke-10" cx="300" cy="300" r="100"/>
</g>
<g class="group-3">
<circle class="stroke-9" cx="300" cy="300" r="75"/>
<circle class="stroke-8" cx="300" cy="300" r="75"/>
<circle class="stroke-7" cx="300" cy="300" r="75"/>
</g>
<g class="group-2">
<circle class="stroke-6" cx="300" cy="300" r="50"/>
<circle class="stroke-5" cx="300" cy="300" r="50"/>
<circle class="stroke-4" cx="300" cy="300" r="50"/>
</g>
<g class="group-1">
<circle class="stroke-3" cx="300" cy="300" r="25"/>
<circle class="stroke-2" cx="300" cy="300" r="25"/>
<circle class="stroke-1" cx="300" cy="300" r="25"/>
</g>
</svg>
<h1><span>musica</span> <span>viva</span>
</h1>
<p class='p-1'>donnerstag, den 7.january 1971</p>
<p class='p-2'>20.15 uhr grosser tonhallesaal</p>
<p class='p-3'>zweites musica viva-konzert der tonhalle-gesellschaft zürich</p>
<br/>
<p class='p-4'>leitung &nbsp;&nbsp;ernest bour</p>
<p class='p-5'>solist &nbsp;&nbsp;hansheinz schneeberger</p>
<p class='p-6'>orchester &nbsp;&nbsp;tonhalle-orchester</p>
<br/>
<p class='p-7'>klaus huber &nbsp;&nbsp;violinkonzert«tempora»</p>
<p class='p-8'>karl amadeus hartmann &nbsp;&nbsp;siebente sinfonie</p>
<br/>
</div>
</div>
Raw
styles.scss
$yellow: #fcb741;
$green: #44cb4c;
$red: #da2842;
$background: #efefe7;
$red-type: #9d4132;
// I know this is an import somehow :grimace:
$pi: 3.14159265359;
@function calculateDash($radius) {
$result: (($radius * 2) * $pi) / 16;
@return $result;
}
@function bothDashes($radius) {
$result: (($radius * 2) * $pi) / 16;
@return calculateDash($radius), calculateDash($radius)*3;
}
$group-1-dashes: bothDashes(25);
$group-2-dashes: bothDashes(50);
$group-3-dashes: bothDashes(75);
$group-4-dashes: bothDashes(100);
$group-5-dashes: bothDashes(125);
$group-6-dashes: bothDashes(150);
$group-7-dashes: bothDashes(175);
$group-8-dashes: bothDashes(200);
$group-9-dashes: bothDashes(225);
$group-10-dashes: bothDashes(250);
@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
.stroke-1 {
stroke: $yellow;
stroke-width: 5;
// stroke-dasharray: 58.9, 176.7;
stroke-dasharray: $group-1-dashes;
fill: none;
transform-origin: center;
}
.stroke-2 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-1-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-3 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-1-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-4 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-2-dashes;
fill: none;
transform-origin: center;
}
.stroke-5 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-2-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-6 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-2-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-7 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-3-dashes;
fill: none;
transform-origin: center;
}
.stroke-8 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-3-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-9 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-3-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-10 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-4-dashes;
fill: none;
transform-origin: center;
}
.stroke-11 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-4-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-12 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-4-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-13 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-5-dashes;
fill: none;
transform-origin: center;
}
.stroke-14 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-5-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-15 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-5-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-16 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-6-dashes;
fill: none;
transform-origin: center;
}
.stroke-17 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-6-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-18 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-6-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-19 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-7-dashes;
fill: none;
transform-origin: center;
}
.stroke-20 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-7-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-21 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-7-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-22 {
stroke: $yellow;
stroke-width: 5;
// stroke-dasharray: 29.45, 88.35;
stroke-dasharray: $group-8-dashes;
fill: none;
transform-origin: center;
}
.stroke-23 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-8-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-24 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-8-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-25 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-9-dashes;
fill: none;
transform-origin: center;
}
.stroke-26 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-9-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-27 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-9-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.stroke-28 {
stroke: $yellow;
stroke-width: 5;
stroke-dasharray: $group-10-dashes;
fill: none;
transform-origin: center;
}
.stroke-29 {
stroke: $green;
stroke-width: 5;
stroke-dasharray: $group-10-dashes;
fill: none;
transform-origin: center;
transform: rotate(22.5deg);
}
.stroke-30 {
stroke: $red;
stroke-width: 5;
stroke-dasharray: $group-10-dashes;
fill: none;
transform-origin: center;
transform: rotate(45deg);
}
.group-2, .group-6 {
transform-origin: center;
transform: rotate(-22.5deg)
}
.group-3, .group-7 {
transform-origin: center;
transform: rotate(-45deg)
}
.group-4, .group-8 {
transform-origin: center;
transform: rotate(-67.5deg)
}
.group-5, .group-9 {
transform-origin: center;
transform: rotate(-90deg)
}
.group-10 {
transform-origin: center;
transform: rotate(-22.5deg)
}
/* DEMO STYLES */
body {
background: $background;
font-family: 'Helvetica'
}
h1 {
text-align: right;
margin-top: 0;
}
span {
margin-right: 50px;
}
svg {
width: 600px;
height: 600px;
}
.poster {
width: 600px;
}
.poster-container {
display: flex;
justify-content: center;
}
p {
color: $red-type;
font-size: 12px;
margin: 0; // x-value gets overriden later
}
.p-1 {
margin-left: 50px;
}
.p-2 {
margin-left: 75px;
}
.p-3 {
margin-left: 100px;
}
.p-4 {
margin-left: 150px;
}
.p-5 {
margin-left: 175px;
}
.p-6 {
margin-left: 200px;
}
.p-7 {
margin-left: 250px;
}
.p-8 {
margin-left: 275px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment