Burst effect for popped bubbles
This commit is contained in:
Jason Zimdars
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 310.61 281.75" xmlns="http://www.w3.org/2000/svg"><path d="m20.47 271.92c-1.6-6.97 2.82-15.44 9.97-17.4 12.8-3.61 24.89 6.78 37.67 6.31 15.88-.37 21.55-17.47 30.42-27.85 24.86-29.76 43.09-15.99 55.66-29.43 6.11-6.89 6.02-17.7 11.34-25.03 3.56-5.2 10.53-8.05 16.55-5.64 4.98 1.84 8.18 6.54 11.3 10.68 1.82 2.38 3.85 4.63 6.2 5.91 4.23 2.49 9.06.6 10.31-3.89 3.96-14.02-15.89-22.54-12.55-34.08 1.29-3.43 4.96-4.99 9.06-4.91 6.05.12 11.44 3.32 17.61 4.46 28.76 4.66 13.73-34.72 14.62-50.46.19-27.14 15.28-45.38 34.38-62.66 5.49-5.16 13.69-10.19 21.22-7.22 5.82 2.17 8.96 9.87 10.6 16.13 5.62 22.06 9.09 44.93 1.11 66.37-20.23 50.47-56.78 95.13-102.65 123.97-46.23 27.85-101.79 42.33-155.42 44.54-9.31.01-24.05 1.27-27.35-9.61l-.04-.17z" fill="#fff"/><g stroke="#000" stroke-miterlimit="10" stroke-width="6"><circle cx="109.95" cy="235.27" fill="#fff" r="15.98"/><circle cx="159.65" cy="148.41" fill="none" r="15.53"/><circle cx="205.67" cy="113.68" fill="none" r="11.29"/><circle cx="200.45" cy="216.88" fill="#fff" r="12.28"/><circle cx="69.15" cy="187.8" fill="none" r="11.44"/><circle cx="103.6" cy="205.59" fill="#fff" r="6.35"/><circle cx="64.07" cy="232.27" fill="#fff" r="6.35"/><circle cx="153.29" cy="219.28" fill="#fff" r="6.35"/><circle cx="261.43" cy="128.79" fill="#fff" r="10.02"/><circle cx="222.19" cy="140.93" fill="#fff" r="5.22"/><circle cx="236.73" cy="187.8" fill="#fff" r="5.22"/><circle cx="292.7" cy="61.47" fill="#fff" r="5.22"/><circle cx="252.54" cy="61.47" fill="none" r="15.81"/><circle cx="292.7" cy="88.64" fill="#fff" r="11.36"/><path d="m13.03 265.59c-10.1-3.27-13.54-18.51-5.82-25.79 5.26-4.97 13.31-5.68 19.21-9.86s8.92-11.25 11.38-18.04c4.51-12.46 8.08-25.25 10.69-38.24.84-4.17 1.59-8.42 3.48-12.24 4.88-9.87 17.2-14.91 27.98-12.64s19.6 10.92 23.56 21.2c2.26 5.87 3.12 12.28 6.03 17.87s8.87 10.38 15.03 9.11c6.49-1.34 10.06-8.97 9.26-15.55s-4.75-12.3-8.56-17.73-7.72-11.18-8.43-17.78c-.99-9.28 4.93-18.37 12.98-23.09s17.82-5.68 27.12-4.9c6.21.52 13.48 1.4 17.73-3.15 5.15-5.52 1.88-14.38 2.65-21.89 1.32-12.95 15.25-21.16 28.21-22.37 2.29-.21 4.65-.29 6.78-1.16 6.09-2.48 8.01-10.2 7.84-16.78s-1.52-13.51 1.23-19.49c4.42-9.63 17.06-12.01 27.62-11.13s21.63 3.68 31.42-.37" fill="none"/><circle cx="288.05" cy="19.59" fill="#fff" r="16.59"/><circle cx="18.98" cy="262.62" fill="#fff" r="15.98"/><circle cx="205.67" cy="67.25" fill="#fff" r="10.02"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
.windshield {
|
||||
--column-gap: 1cqi;
|
||||
--column-gap: 2cqi;
|
||||
--row-gap: 1cqi;
|
||||
|
||||
margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2));
|
||||
@@ -351,14 +351,14 @@
|
||||
}
|
||||
|
||||
.bubble__title {
|
||||
-webkit-line-clamp: var(--lines, 5);
|
||||
-webkit-line-clamp: var(--lines, 4);
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
font-size: 9cqi;
|
||||
line-height: 1.2;
|
||||
margin: auto;
|
||||
max-block-size: 75cqi;
|
||||
max-inline-size: 75cqi;
|
||||
max-block-size: 60cqi;
|
||||
max-inline-size: 60cqi;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: normal;
|
||||
@@ -544,6 +544,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bubble__burst {
|
||||
--bubble-border-width: 0.6rem;
|
||||
|
||||
block-size: 55cqi;
|
||||
inline-size: 55cqi;
|
||||
position: absolute;
|
||||
inset: auto -2cqi -6cqi auto;
|
||||
transition: transform 200ms ease-out;
|
||||
z-index: 0;
|
||||
|
||||
.bubble__perma & {
|
||||
--bubble-border-width: 0.3rem;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.windshield .bubble:hover & {
|
||||
transform: translate(-1rem, 1rem) rotate(20deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble__actions-container {
|
||||
background-color: color(from var(--bubble-color) srgb r g b / 0.15);
|
||||
margin-block-start: -0.7em;
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
|
||||
<%= render "bubbles/assignments", bubble: bubble %>
|
||||
<%= render "bubbles/boosts", bubble: bubble %>
|
||||
<%= render "bubbles/burst", bubble: bubble %>
|
||||
<%= render "bubbles/comments", bubble: bubble %>
|
||||
<%= render "bubbles/date", bubble: bubble %>
|
||||
<%= render "bubbles/image", bubble: bubble %>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<% if bubble.popped? %>
|
||||
<div class="bubble__burst">
|
||||
<svg viewBox="0 0 310.61 281.75" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m19.93 272.09c-3.59-10.81-2.95-27.42 3.76-36.86 6.59-9.27 18.97-12.6 30.34-12.3s22.46 3.52 33.78 4.45c3.95.33 8.11.33 11.63-1.48 3.21-1.65 5.42-4.63 8.5-6.44 3.5-2.06 7.95-3.38 11.92-4.12 5.36-1 11.73-.03 16.99 1.16 4.8 1.09 10.23 2.73 14.31 0 2.29-1.54 3.59-4.15 4.67-6.69 1.68-3.96 1.08-9.09 1.64-13.37.71-5.41 1.79-10.77 3.23-16.04 1.16-4.23 2.86-8.78 6.71-10.87 4.16-2.26 9.25-.84 13.88.12s10.32 1.03 13.12-2.79c2.71-3.69 1.17-8.86-.47-13.14-2.06-5.39-4.13-10.79-6.19-16.18-1.42-3.72-2.86-7.83-1.53-11.59 1.74-4.91 7.61-7.14 12.81-7.01 5.68.15 11.09 2.33 16.65 3.51s11.91 1.17 16.29-2.46c7.85-6.49 4.22-17.56 6.02-26.19 1.44-6.91 3.74-14.37 6.72-20.82 6.38-13.79 17.13-24.98 28.27-35.07 5.49-5.16 13.69-10.19 21.22-7.22 5.82 2.17 8.96 9.87 10.6 16.13 5.62 22.06 9.09 44.93 1.11 66.37-20.23 50.47-56.78 95.13-102.65 123.97-46.23 27.85-101.79 42.33-155.42 44.54-7.71.01-16.83.89-23.61-3.63-2.13-1.42-3.5-3.54-4.31-5.98z" fill="var(--color-bg)"/>
|
||||
<g stroke="var(--bubble-color)" stroke-miterlimit="10" stroke-width="var(--bubble-border-width)">
|
||||
<circle cx="109.95" cy="235.27" fill="var(--color-bg)" r="15.98"/>
|
||||
<circle cx="159.65" cy="148.41" fill="none" r="15.53"/>
|
||||
<circle cx="205.67" cy="113.68" fill="none" r="11.29"/>
|
||||
<circle cx="200.45" cy="216.88" fill="var(--color-bg)" r="12.28"/>
|
||||
<circle cx="69.15" cy="187.8" fill="none" r="11.44"/>
|
||||
<circle cx="103.6" cy="205.59" fill="var(--color-bg)" r="6.35"/>
|
||||
<circle cx="64.07" cy="232.27" fill="var(--color-bg)" r="6.35"/>
|
||||
<circle cx="153.29" cy="219.28" fill="var(--color-bg)" r="6.35"/>
|
||||
<circle cx="261.43" cy="128.79" fill="var(--color-bg)" r="10.02"/>
|
||||
<circle cx="222.19" cy="140.93" fill="var(--color-bg)" r="5.22"/>
|
||||
<circle cx="236.73" cy="187.8" fill="var(--color-bg)" r="5.22"/>
|
||||
<circle cx="292.7" cy="61.47" fill="var(--color-bg)" r="5.22"/>
|
||||
<circle cx="252.54" cy="61.47" fill="none" r="15.81"/>
|
||||
<circle cx="292.7" cy="88.64" fill="var(--color-bg)" r="11.36"/>
|
||||
<path d="m8.82 270.88c-3.15-8.15-.94-17.54 3.37-25.14s10.52-13.91 16.08-20.65c12-14.53 16.58-33.26 20.22-51.43.84-4.17 1.59-8.42 3.48-12.24 4.88-9.87 17.2-14.91 27.98-12.64s19.6 10.92 23.56 21.2c2.26 5.87 3.12 12.28 6.03 17.87s8.87 10.38 15.03 9.11c6.49-1.34 10.06-8.97 9.26-15.55s-4.75-12.3-8.56-17.73-7.72-11.18-8.43-17.78c-.99-9.28 4.93-18.37 12.98-23.09s17.82-5.68 27.12-4.9c6.21.52 13.48 1.4 17.73-3.15 5.15-5.52 1.88-14.38 2.65-21.89 1.32-12.95 15.25-21.16 28.21-22.37 2.29-.21 4.65-.29 6.78-1.16 6.09-2.48 8.01-10.2 7.84-16.78s-1.52-13.51 1.23-19.49c4.42-9.63 17.06-12.01 27.62-11.13s21.63 3.68 31.42-.37" fill="none"/>
|
||||
<circle cx="288.05" cy="19.59" fill="var(--color-bg)" r="16.59"/>
|
||||
<circle cx="18.98" cy="262.62" fill="var(--color-bg)" r="15.98"/>
|
||||
<circle cx="205.67" cy="67.25" fill="var(--color-bg)" r="10.02"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<% end %>
|
||||
Reference in New Issue
Block a user