tn198403s 高校時代blog

「人生に無意味な時間は無い。ただ、その時間の意味を感じることなく生きているだけである。」この言葉を確かめてみようと、徒然なるまま、私の高校時代(1984.03卒業)の意味を振り返り綴るブログです。

雪の結晶!?を文字で描いたらこうなった CCS利用のパズル

これらは何に見えますか?

f:id:tn198403s:20201112034323p:plain

雪の結晶を文字で描く

CSSを利用して文字を重ねて並べて描いてみました。

それぞれどんな文字を使っているでしょう?

 

このパズルを思いついたきっかけは、たびたび言及させていただいているLSSさんのブログからでした。

簡単に説明すると、CSSで雪の結晶を描くために文字を60°ずつ回転させて配置し、雪の結晶みたいなのを表示させるというものです。

記事で表示されていた、きっと雪の結晶がこれです。 

この絵に使われている文字が何かわかりますか?

・・・

 

・・・

答えは、¥です。

 

文字を60°ずつ回転させるなら、万華鏡のイメージです。となると、元がどんな文字(数字や記号も含む:以下同じ)でも雪の結晶風に見えるのでは?と考えました。また、雪の結晶にどんな文字が使われているのか考えるのはパズルにもなりそうという発想に至ったのです。

 

ちなみに上のをさらに+30°傾けたのがこちら。

 ちょっと雰囲気が違って見える気がしました。文字の形によって上下に頂点が一つずつある正六角形に見えやすい向きが違うようです。人によって見え方が違う気もします。そんなわけで、ここでは元の文字を30°傾けたもの、そのまま使っているものが混じっています。

  

 

まずは問題に慣れてもらうため、簡単なお試し問題から。

例題00 お試し

下の絵はどんな文字を使っているでしょう?

答え *

 

では以下、本番の問題です。

なお、これ以降では、答えの行をカーソル反転させると、文字が読めます。

 

アルファベットや記号、カタカナで描く(問題01~12)

 問題01

答え 

 問題02

答え Y (+30°)

問題03

答え A

 問題04

答え ※ (+30°)

問題05

 答え M (+30°)

 問題06

 答え 

 問題07

 答え #  (+30°)

 問題08

 答え 〒 (+30°)

 問題09

 答え キ (かたかな)

問題10

TT
TT
TT
TT
TT
TT

答え TT (+30°)

問題11

AA
AA
AA
AA
AA
AA

答え AA (+30°)

問題12

答え ♡

 

 

漢字を使ってみたらいい感じ(1)(問題13~30)

 問題13

 答え 目 (+30°)

 問題14

 答え 貝 (+30°)

  問題15

答え 中 (+30°)

問題16 

答え 

問題17

答え 天 (+30°)

問題18

答え 夫 (+30°)

問題19

答え 羊 (+30°)

 問題20

答え 六 (+30°)

問題21

答え 三 (+30°)

問題22

答え 両 (+30°)

問題23

答え 雨 (+30°)

問題24

答え 而 (+30°)

問題25

答え 用 (+30°)

問題26

 答え 兄 (+30°)

問題27

 答え 只 (+30°)

問題28

 答え 見 (+30°)

問題29

 答え 土 (+30°) 

問題30

 答え 共 (+30°)

 

漢字を使ってみたらいい感じ(2)(問題31~42)

問題31

 答え 

問題32 

 答え 

問題33

 答え 

問題34

 答え 圭  (+30°)

問題35

 答え 立 (+30°)

問題36

 答え 並  (+30°)

問題37

 答え 串 (傾き+30°)

問題38

 答え 輩 (傾き+30°)

問題39

 答え 書 (傾き+30°)

問題40

 答え 忠  (+30°)

問題41

 答え 患  (+30°)

問題42

 答え 華  (+30°)

 

曲線のある文字でもやってみた (問題43~45)

コードに入れる文字でどんな絵が描かれるのか予想しても大きく外れることや、似ている文字でも少しの違いで全然違う感じになるのが楽しくて、試したい字が尽きませんでした。最終的に100以上にも試す羽目に。

 

上の問題ではハート(♡)だけ紹介しましたが、雪の結晶ということなので曲線のある文字はちょっとイメージが違うかなとほとんどボツにしています。  その中から、3つだけ復活。

 

問題43

 答え ◎ 

問題44

 答え 

また、半角3文字にも挑戦。ただ、全角1文字または半角2文字で位置が合うようで、ちょっと位置が変になりました。

問題45

qop
qop
qop
qop
qop
qop

 答え qop

 

問題43や45は、花の感じですね。

これはこれで面白そうです。

 

使用したコード

LSSさんの記事に紹介されていたコードにほんの少し手を加えました。

背景の縦を少し短くしています。(青字)

<style><!--
.yen{
position:absolute;
font-size:100px;
transform-origin:50% 70%;
color:white;
left:100px;
}
--></style>
<blockquote>
<div style="background-color: blue; position: relative; width: 300px; height: 250px;">
<div class="yen" style="transform: rotate(0deg);">¥</div>
<div class="yen" style="transform: rotate(60deg);">¥</div>
<div class="yen" style="transform: rotate(120deg);">¥</div>
<div class="yen" style="transform: rotate(180deg);">¥</div>
<div class="yen" style="transform: rotate(240deg);">¥</div>
<div class="yen" style="transform: rotate(300deg);">¥</div>
</div>

 また赤字の 0~300deg をそれぞれ30、90、150、210、270、330deg に変えると、+30°の傾きを加えることができます。

 

LSSさん、楽しめる記事をありがとうございました。

 

一番雪の結晶に見える文字は?

個人的には問題36かなと思っています。でも、問題30や37も捨てがたいなあ。

皆さんのお気に入りはどれでしょう?

え?選択肢多過ぎ?

 

私もそう思います。ちょっと、ハマリ過ぎた感があります。