強引にlinear-gradientでラインアートしてみたところ…
どうも！LSSです！！
三が日最終日！
姪っ子（赤さん）もすっかり馴染んだところで、帰ってしまいました^^;
また当人が忘れる前に来るように、と妹（ママ）には言っておきましたｗ
さて、かなり以前に
JavaScriptでcanvas要素を使って、はるか昔にやった「ラインアート」を試みた事がありました。
何本もの直線を、始点のY座標・終点のX座標を一定量づつずらしながら描くと、全て直線なのに曲線のように見える、というものでした。
それを実現するには「斜めの線を明確に指定した座標で何本も引く」必要があり、canvas要素を用いたのですが、「CSSのみでもなんとかできるんじゃないか？」と思い立ち、強引に試みてみた記録です。
強引にlinear-gradientでラインアートしてみた
やりようもあるとは思いますが…linear-gradientで強引に引いたため、線自体あまり綺麗なものではないものの、なんか「それっぽく」はなりましたね^^
29本の線を引いていますが、１本あたり３行の指定（background-image、background-size、background-position）をしているため、コードは無駄に長くなっています^^;
無駄に長くなったコード
<style>
.nami{
width:300px;
height:300px;
background-repeat:no-repeat;
background-image:
linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
;
background-size:
10px 290px
,20px 280px
,30px 270px
,40px 260px
,50px 250px
,60px 240px
,70px 230px
,80px 220px
,90px 210px
,100px 200px
,110px 190px
,120px 180px
,130px 170px
,140px 160px
,150px 150px
,160px 140px
,170px 130px
,180px 120px
,190px 110px
,200px 100px
,210px 90px
,220px 80px
,230px 70px
,240px 60px
,250px 50px
,260px 40px
,270px 30px
,280px 20px
,290px 10px
;
background-position:
0px 10px
,0px 20px
,0px 30px
,0px 40px
,0px 50px
,0px 60px
,0px 70px
,0px 80px
,0px 90px
,0px 100px
,0px 110px
,0px 120px
,0px 130px
,0px 140px
,0px 150px
,0px 160px
,0px 170px
,0px 180px
,0px 190px
,0px 200px
,0px 210px
,0px 220px
,0px 230px
,0px 240px
,0px 250px
,0px 260px
,0px 270px
,0px 280px
,0px 290px
;
}
</style>
<div class="nami"> </div>
無駄に長い…ものの、内容は単純です。
background-imageは
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
が全く内容が同じ行が延々と続き、
background-sizeは
「一つめの要素（幅）が+10づつ、二つめの要素（高さ）が-10づつ」
という変化が延々と続き、
background-positionは
「一つめの要素（横位置）はずっと0px、二つめの要素（縦位置）が+10づつ」
という変化が延々と続いている…だけのものとなります。
「縦長の長方形の対角線（左上から右下）を引き、徐々に横長になっていく長方形を並べて同様に対角線を引いた、その対角線だけを重ね合わせて見ている」というイメージですね。
線を半分 間引いてみました
あまりにコードが長いので、線を半分 間引いてみたものが以下になります。
コード
<style>
.nami2{
width:300px;
height:300px;
background-repeat:no-repeat;
background-image:
linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
,linear-gradient(to top right,#00000000 47%,#000000ff 50%,#00000000 53%)
;
background-size:
10px 290px
,30px 270px
,50px 250px
,70px 230px
,90px 210px
,110px 190px
,130px 170px
,150px 150px
,170px 130px
,190px 110px
,210px 90px
,230px 70px
,250px 50px
,270px 30px
,290px 10px
;
background-position:
0px 10px
,0px 30px
,0px 50px
,0px 70px
,0px 90px
,0px 110px
,0px 130px
,0px 150px
,0px 170px
,0px 190px
,0px 210px
,0px 230px
,0px 250px
,0px 270px
,0px 290px
;
}
</style>
<div class="nami2"> </div>
…うん。
だいぶマシになったとは言え、それでもコードが長いですねｗ
あとがき
そんな、実用性のない実験をしていた、2022年正月三が日最終日でしたｗ
そもそも「ラインアート」って「プログラムでfor文を使って短いコードで美しい図形が描画できる」ところに意義があるのであって、今回のものをラインアートと言っていいのかは疑問が残ります^^;;;
（今回のコードと同様のものをJavaScriptで出力する事は可能で、そっちならスッキリはしますね。canvas→linear-gradientに置き換えただけで。）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
