👌

2025年万博ロゴ「いのちの輝きくん」をCSSだけで作ってみた

2022/01/03に公開

CSS

HTML

万博

idea

Zenn初投稿

何年か前に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>

GitHubで編集を提案

Zenn初投稿

完成品

HTMLとCSS

Discussion