👌
2025年万博ロゴ「いのちの輝きくん」をCSSだけで作ってみた
Zenn初投稿
何年か前にX(当時のTwitter)で投稿したネタをZennにも投稿してみました。
2025年に開催される万博のロゴ「いのちの輝きくん」を見てみたら、なんかCSSだけで表現できそうだなーということでやってみたらいい感じにできました。
完成品
HTMLとCSS
index.html
<!DOCTYPE html>
<html>
<title>2025 osaka expo logo css</title>
<head>
<style>
div {
border-radius: 50%;
}
#circle1-1 {
position: absolute;
width: 85px;
height: 85px;
left: 234px;
top: 252px;
background: #E70012;
}
#circle1-2 {
position: absolute;
width: 29px;
height: 29px;
left: 258px;
top: 296px;
background: #FFFFFF;
}
#circle1-3 {
position: absolute;
width: 13px;
height: 13px;
left: 266px;
top: 311px;
background: #0068B9;
}
#circle2 {
position: absolute;
width: 62px;
height: 62px;
left: 186px;
top: 257px;
background: #E70012;
}
#circle3 {
position: absolute;
width: 45px;
height: 74px;
left: 166px;
top: 206px;
background: #E70012;
}
#circle4-1 {
position: absolute;
width: 81px;
height: 81px;
left: 123px;
top: 153px;
background: #E70012;
}
#circle4-2 {
position: absolute;
width: 35px;
height: 35px;
left: 157px;
top: 181px;
background: #FFFFFF;
}
#circle4-3 {
position: absolute;
width: 17px;
height: 17px;
left: 165px;
top: 181px;
background: #0068B9;
}
#circle5 {
position: absolute;
width: 58px;
height: 58px;
left: 171px;
top: 114px;
background: #E70012;
}
#circle6-1 {
position: absolute;
width: 67px;
height: 67px;
left: 119px;
top: 92px;
background: #E70012;
}
#circle6-2 {
position: absolute;
width: 35px;
height: 35px;
left: 127px;
top: 105px;
background: #FFFFFF;
}
#circle6-3 {
position: absolute;
width: 17px;
height: 17px;
left: 129px;
top: 110px;
background: #0068B9;
}
#circle7 {
position: absolute;
width: 65px;
height: 65px;
left: 169px;
top: 60px;
background: #E70012;
}
#circle8 {
position: absolute;
width: 71px;
height: 71px;
left: 209px;
top: 25px;
background: #E70012;
}
#circle9-1 {
position: absolute;
width: 93px;
height: 93px;
left: 272px;
top: 26px;
background: #E70012;
}
#circle9-2 {
position: absolute;
width: 40px;
height: 40px;
left: 307px;
top: 35px;
background: #FFFFFF;
}
#circle9-3 {
position: absolute;
width: 18px;
height: 18px;
left: 325px;
top: 38px;
background: #0068B9;
}
#circle10 {
position: absolute;
width: 108px;
height: 51px;
left: 295px;
top: 101px;
background: #E70012;
}
#circle11 {
position: absolute;
width: 67px;
height: 75px;
left: 312px;
top: 138px;
background: #E70012;
}
#circle12-1 {
position: absolute;
width: 102px;
height: 88px;
left: 286px;
top: 203px;
background: #E70012;
}
#circle12-2 {
position: absolute;
width: 49px;
height: 43px;
left: 332px;
top: 229px;
background: #FFFFFF;
}
#circle12-3 {
position: absolute;
width: 20px;
height: 19px;
left: 359px;
top: 236px;
background: #0068B9;
}
</style>
</head>
<body>
<div id="circle1-1"></div>
<div id="circle1-2"></div>
<div id="circle1-3"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4-1"></div>
<div id="circle4-2"></div>
<div id="circle4-3"></div>
<div id="circle5"></div>
<div id="circle6-1"></div>
<div id="circle6-2"></div>
<div id="circle6-3"></div>
<div id="circle7"></div>
<div id="circle8"></div>
<div id="circle9-1"></div>
<div id="circle9-2"></div>
<div id="circle9-3"></div>
<div id="circle10"></div>
<div id="circle11"></div>
<div id="circle12-1"></div>
<div id="circle12-2"></div>
<div id="circle12-3"></div>
</body>
</html>
Discussion