Skip to content

Instantly share code, notes, and snippets.

@kdubbels

kdubbels/beethoven.css

Last active December 3, 2020 22:36
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/e7f055d0c4625c595c9b4b0f6f9148da to your computer and use it in GitHub Desktop.
Save kdubbels/e7f055d0c4625c595c9b4b0f6f9148da to your computer and use it in GitHub Desktop.
Download ZIP
Beethoven by Josef Müller-Brockmann
Raw
beethoven.css
body {
font-family: 'Helvetica';
display: flex;
flex-direction: column;
align-items: center;
}
div.container {
width: 1050px;
min-width: 1050px;
}
h2 {
display: inline-block;
text-align: right;
right: 375px;
top: 205px;
position: absolute;
}
svg {
height: 250px;
width: 250px;
}
svg.clip-top-right {
clip-path: circle(20% at 100% 0);
}
svg.clip-bottom-right {
clip-path: circle(20% at 100% 100%);
}
svg.clip-bottom-left {
clip-path: circle(20% at 0% 100%);
}
.circle-1 {
fill: white;
}
.circle-2 {
fill: black;
}
.circle-3 {
fill: white;
}
.circle-4 {
fill: black;
}
.circle-5 {
fill: white;
}
.circle-6 {
fill: black;
}
.circle-7 {
fill: white;
}
Raw
beethoven.html
<p><a href="https://64.media.tumblr.com/6138634b298f0b6bf3876e30bd0847a6/tumblr_mxb58x0Mn81rpgpe2o1_640.jpg">Original here.</a></p>
<p>Nota bene: this is actually a variation on Müller-Brockmann's original work by Jessica Svendsen.</p>
<div class="container" style="transform: translate(100px, 0)">
<!-- first row -->
<div style="display: block; transform: translate(105px, 0)">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
<h2>beethoven</h2>
</div>
<!-- second row -->
<div>
<div style="display: inline-block">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(0, 35px)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(0, 0)">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
</div>
<!-- third row -->
<div>
<div style="display: inline-block; transform: translate(-35px, 0)">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-35px, 35px)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-105px, 0)">
<svg>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-105px, 0)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; position: absolute; transform: translate(-540px, -70px) ">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
</div>
<!-- fourth row -->
<div>
<div style="display: inline-block; transform: translate(-70px, 0)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<!-- here -->
<div style="display: inline-block; transform: translate(-70px, -105px)">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-140px, -175px)">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-395px, -70px">
<svg>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; position: absolute; transform: translate(-390px, -175px">
<svg>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
</div>
<!-- fifth row -->
<div>
<div style="display: inline-block; transform: translate(-140px, -210px)">
<svg>
<g cx="0" cy="0">
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-140px, -105px)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-140px, -175px)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
</div>
<!-- sixth row -->
<div>
<div style="display: inline-block; transform: translate(-140px, -210px)">
<svg>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-140px, -210px)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-395px, -280px)">
<svg>
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-395px, -175px)">
<svg>
<g transform="translate(0, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
</div>
<!-- seventh row -->
<div>
<div style="display: inline-block; transform: translate(-35px, -385px)">
<svg>
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-35px, -280px)">
<svg>
<g cx="0" cy="0">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
</div>
<!-- end of container -->
<div style="display: inline-block; transform: translate(114px, -1339px)">
<svg class='clip-bottom-right'>
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-140px, -1085px)">
<svg class='clip-top-right'>
<g transform="translate(250, 0)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-394px, -1121px)"/>
<svg class='clip-bottom-right'>
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(-753px, -972px)"/>
<svg class="clip-bottom-right">
<g transform="translate(250, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
<div style="display: inline-block; transform: translate(263px, -1226px)"/>
<svg class="clip-bottom-left">
<g transform="translate(0, 250)">
<circle class="circle-1" r="130"></circle>
<circle class="circle-2" r="120"></circle>
<circle class="circle-3" r="95"></circle>
<circle class="circle-4" r="85"></circle>
<circle class="circle-5" r="60"></circle>
<circle class="circle-6" r="50"></circle>
<circle class="circle-7" r="25"></circle>
</g>
</svg>
</div>
</div>
@kdubbels
Copy link
Author

kdubbels commented Dec 2, 2020 •
edited

This is just an experiment. Elements here are effectively just eye-balled/ placed by hand. Thinking through a more programmatic solution, this is just fucking around.

Check it out: https://codepen.io/kdubbels/pen/ZEpYjLe

The original inspiration is here: https://www.design-is-fine.org/post/69024342387/josef-muller-brockmann-poster-design-for-a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment