どうも！LSSです！！
あまり出番がないので ご存知ない方もおられるかも知れませんが、このブログにはマスコットキャラクター「まるいの」という謎の生物がいます。
今回、無駄に労力を使って、CSSのbackgroundプロパティを使って「まるいの」を描いてみました。
ついでに、ちょっとだけ動きます（動かす方は全然簡単でした）。
まるいの
一応、コード
使えるようなものじゃないですが、一応どんなコードで描いているかだけ。
<style>
@keyframes maruinoa{
0%,70%{
background-position:
18% 40%,40% 42%,16% 35%,40% 34%,
30% 55%,
76% 62%,100% 61%,100% 70%,
70% 10%,
50% 30%,10% 10%,50% 57%,50% 70%;
}
80%,100%{
background-position:
21% 41%,45% 44%,16% 35%,40% 34%,
30% 55%,
76% 62%,100% 61%,100% 70%,
70% 10%,
50% 30%,10% 10%,50% 57%,50% 70%;
}
}
.maruino{
border:1px solid black;
width:300px;
height:450px;
background-image:
radial-gradient(100% 100%,#000000 49%,#00000000 50%)
,radial-gradient(100% 100%,#000000 49%,#00000000 50%)
,conic-gradient(from 285deg at 140% 100%,#000000 9deg,#00000000 10deg)
,conic-gradient(from 75deg at -40% 100%,#000000 9deg,#00000000 10deg)
,conic-gradient(from 115deg at 30% 10%,#000000 7deg,#00000000 8deg 150deg,#000000 151deg 158deg,#00000000 159deg)
,radial-gradient(100% 100%,#ffffff 44%,#000000 45% 49%,#00000000 50%)
,radial-gradient(100% 100% at 50% 0%,#ffffff00 41%,#000000 42% 49%,#00000000 50%)
,radial-gradient(100% 100% at 50% 0%,#ffffff 46%,#000000 47% 49%,#00000000 50%)
,conic-gradient(from 160deg at 70% 30%,#000000 5deg,#ffffff 6deg 82deg,#000000 83deg 88deg,#00000000 89deg)
,radial-gradient(100% 100%,#ffffff 47%,#000000 48% 49%,#00000000 50%)
,conic-gradient(from 100deg at 30% 30%,#000000 5deg,#ffffff 6deg 82deg,#000000 83deg 88deg,#00000000 89deg)
,radial-gradient(100% 100%,#ffffff 47%,#000000 48% 49%,#00000000 50%)
,radial-gradient(100% 100%,#ffffff 47%,#000000 48% 49%,#00000000 50%)
;
background-repeat:no-repeat;
background-size:
7% 9%,8% 10%,14% 7%,18% 9%,
20% 10%,
12% 9%,33% 4%,33% 17%,
30% 30%,
80% 45%,30% 30%,60% 20%,55% 40%;
animation:maruinoa 6s linear infinite alternate;
}
</style>
<div class="maruino">まるいの（猫っぽいけど猫ではない）</div>
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
