seki/drb25.rhtml

## drb25.rhtml
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  .bubble {
    transition: all 0.5s;
  }
  </style>
</head>
<%
bits16 = [
  "   bbbbbbbbbb",
  "  b1223333444b",
  " b122333333444b",
  "b12233333333444b",
  "b11141411114511b",
  " b134444444455b",
  "  b3344444455b",
  "   b34444445b",
  "    b344445b",
  "     b4444b",
  "      b44b",
  "       bb",
]

bits = [
  "  bbbbbbb",
  " b1223344b",
  "b122333344b",
  " b1344445b",
  "  b34445b",
  "   b444b",
  "    b4b",
  "     b",

]

color = {
  'b' => ['#e00c10', 0.7],
  '1' => ['white', 0.7],
  '2' => ['#FBD3CB', 0.5],
  '3' => ['#F69988', 0.5],
  '4' => ['#E84E40', 0.6],
  '5' => ['#E01C23', 0.7]
}
%>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 200 200">
  <%
    bits.each_with_index do |row, y|
      row.each_char.each_with_index do |col, x|
        next if col == ' '
        cx = x * 10
        cy = y * 10
        r = 8.8
        %><circle fill="black" cx="<%= cx %>" cy="<%= cy %>" r="<%= r %>"/> <%
      end
    end

    bits.each_with_index do |row, y|
      row.each_char.each_with_index do |col, x|
        next if col == ' '
        # next if col == 'b'
        cx = x * 10
        cy = y * 10
        n = 8
        r = 2 + rand(n) + rand(n) + rand(n)
        fill, opacity = color[col]
        opacity *= 1.1
        r *= (1 - opacity)
        r *= 1.2
        # r = 10
        %><circle class="bubble" data-op="<%= (1-opacity*1.1)*1.2 %>" fill-opacity="<%= 0.5 %>" fill="<%= fill%>" cx="<%= cx %>" cy="<%= cy %>" r="<%= r %>"/> <%
      end
    end
  %>
  <%
    %w(Last Century Modern).each_with_index do |w, n|
      y = (n) * 10
      %>
      <text fill="white" x="50" y="<%= y %>" width="50"
        font-family="Helvetica" font-size="11.5"
        letter-spacing="-0.7pt" font-weight="bold">
      <%= w%></text><%
    end
    %w(dRuby 1999 2024).each_with_index do |w, n|
      y = (n + 3) * 10
      %>
      <text fill="#ffb8af" x="50" y="<%= y %>" width="50"
        font-family="Helvetica" font-size="11.5"
        letter-spacing="-0.7pt" font-weight="bold">
      <%= w%></text><%
    end
  %>
  </svg>
<script>
function set_r(e) {
  let w = Number(e.dataset.op);
  let r = 2 + (Math.random() + Math.random() + Math.random()) * 8;
  e.setAttribute("r", r * w);
}
setInterval(() => {
  document.querySelectorAll(".bubble").forEach(e=> { set_r(e) });
}, 3000);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	.bubble {
	transition: all 0.5s;
	}
	</style>
	</head>
	<%
	bits16 = [
	" bbbbbbbbbb",
	" b1223333444b",
	" b122333333444b",
	"b12233333333444b",
	"b11141411114511b",
	" b134444444455b",
	" b3344444455b",
	" b34444445b",
	" b344445b",
	" b4444b",
	" b44b",
	" bb",
	]

	bits = [
	" bbbbbbb",
	" b1223344b",
	"b122333344b",
	" b1344445b",
	" b34445b",
	" b444b",
	" b4b",
	" b",

	]

	color = {
	'b' => ['#e00c10', 0.7],
	'1' => ['white', 0.7],
	'2' => ['#FBD3CB', 0.5],
	'3' => ['#F69988', 0.5],
	'4' => ['#E84E40', 0.6],
	'5' => ['#E01C23', 0.7]
	}
	%>
	<body>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 200 200">
	<%
	bits.each_with_index do \|row, y\|
	row.each_char.each_with_index do \|col, x\|
	next if col == ' '
	cx = x * 10
	cy = y * 10
	r = 8.8
	%><circle fill="black" cx="<%= cx %>" cy="<%= cy %>" r="<%= r %>"/> <%
	end
	end

	bits.each_with_index do \|row, y\|
	row.each_char.each_with_index do \|col, x\|
	next if col == ' '
	# next if col == 'b'
	cx = x * 10
	cy = y * 10
	n = 8
	r = 2 + rand(n) + rand(n) + rand(n)
	fill, opacity = color[col]
	opacity *= 1.1
	r *= (1 - opacity)
	r *= 1.2
	# r = 10
	%><circle class="bubble" data-op="<%= (1-opacity1.1)1.2 %>" fill-opacity="<%= 0.5 %>" fill="<%= fill%>" cx="<%= cx %>" cy="<%= cy %>" r="<%= r %>"/> <%
	end
	end
	%>
	<%
	%w(Last Century Modern).each_with_index do \|w, n\|
	y = (n) * 10
	%>
	<text fill="white" x="50" y="<%= y %>" width="50"
	font-family="Helvetica" font-size="11.5"
	letter-spacing="-0.7pt" font-weight="bold">
	<%= w%></text><%
	end
	%w(dRuby 1999 2024).each_with_index do \|w, n\|
	y = (n + 3) * 10
	%>
	<text fill="#ffb8af" x="50" y="<%= y %>" width="50"
	font-family="Helvetica" font-size="11.5"
	letter-spacing="-0.7pt" font-weight="bold">
	<%= w%></text><%
	end
	%>
	</svg>
	<script>
	function set_r(e) {
	let w = Number(e.dataset.op);
	let r = 2 + (Math.random() + Math.random() + Math.random()) * 8;
	e.setAttribute("r", r * w);
	}
	setInterval(() => {
	document.querySelectorAll(".bubble").forEach(e=> { set_r(e) });
	}, 3000);
	</script>
	</body>
	</html>