<html>
<head></head>
<body>
<section>
<div class="info"><span style="margin: 60px">CSS3 background patterns inspired by the artist <a href="http://yayoi-kusama.jp/e/information/index.html">Yayoi Kusama</a></span></div>
<div class="seven"></div>
<div class="six"></div>
<div class="five"></div>
<div class="four"></div>
<div class="three"></div>
<div class="two"></div>
<div class="one"></div>
</section>
</body>
</html>
/* CSS3 patterns inspired by artist /*Yayoi Kusama*/
/*https://24ways.org/2011/css3-patterns-explained */
body {
margin: 0;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
div {
width: 400px;
height: 400px;
}
div.info {
background: #fe0579;
background: radial-gradient(circle, #fe0579 49.5%, transparent 50%);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
}
div.one {
background: radial-gradient(circle, black 30%, transparent 31%),
radial-gradient(circle, black 19%, #ffc302 21%) 50px 40px;
background-size: 100px 100px;
}
div.two {
background: radial-gradient(circle, #118383 30.9%, transparent 31%),
radial-gradient(circle, black 20%, #74d48a 21%) 23px 100px;
background-size: 200px 200px;
}
div.three {
background: #d7010d; /*fallback*/
background: radial-gradient(circle, white 30%, transparent 31%),
radial-gradient(circle, white 19%, #d7010d 21%) 50px 50px;
background-size: 100px 100px;
}
div.four {
background: radial-gradient(circle, black 30.9%, transparent 31%),
radial-gradient(circle, black 20.9%, #ffc302 21%) 50px 50px;
}
div.five {
/*http://www.artnet.com/artists/yayoi-kusama/pumpkin-bb-c-a-5EQ52qYeKE8rthunukPtOQ2*/
background: #2a6197; /*fallback*/
background: radial-gradient(circle, black 30%, transparent 31%),
radial-gradient(circle, black 20%, #2a6197 21%) 60px 55px;
background-size: 100px 100px;
}
div.six {
background: #E10159;
background: radial-gradient(circle, black 58%, transparent 60%),
radial-gradient(circle, black 38%, #E10159 40%) 50px 50px;
background-size: 100px 100px;
}
div.seven {
background-color: black;
background-image: radial-gradient(circle, white 8%, transparent 10%),
radial-gradient(circle, white 38%, transparent 40%);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.