Skip to content

Instantly share code, notes, and snippets.

@seki
Created May 23, 2023 09:18
Show Gist options
  • Save seki/b86a7664e6a16c45de804815a35343fd to your computer and use it in GitHub Desktop.
Save seki/b86a7664e6a16c45de804815a35343fd to your computer and use it in GitHub Desktop.
dRuby25th logo study
<!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>
@seki
Copy link
Author

seki commented May 23, 2023

erb drb25.rhtml > drb25.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment