Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Heart Shaped Bokeh
<header>
<button class="btn-change">Press To Change Heart Symbol</button>
Find here the full list of <a href="http://www.psd-dude.com/tutorials/resources/heart-text-symbol.aspx">heart symbol</a> shapes
</header>
<div class="bokeh" style="--emoji-shape:'♥'">
</div>
const bokehCount = 25;
const heartSymbols = [..."♥❤♡🎔❥❦❧♥"];
const $bokeh = $(".bokeh");
for (var i=0;i<bokehCount;i++){
$bokeh.append($("<div/>"));
}
$(".btn-change").click(
() =>{
var idx = Math.round(Math.random()*(heartSymbols.length-1));
var symbol = heartSymbols[idx];
$bokeh.css({"--emoji-shape":`'${symbol}'`})
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
:root{
margin:0;
padding:0;
}
.bokeh {
width: 100vw;
height: 100vh;
position: relative;
background: #1d0302;
overflow: hidden;
}
$bokehCount: 25;
$bokehBaseSize: 11rem;
$bokehBaseOpacity: 0.45;
$bokehBaseBrightness: 200;
$bokehBaseDuration: 16s;
$colorSet: (
rgba(224,0,0,0.8),
rgba(255,123,123,0.2),
rgba(96,27,0,0.7),
);
.bokeh div {
position: absolute;
border-radius: 50%;
@for $i from 1 through $bokehCount {
&:nth-child(#{$i}) {
$randomizedSize: random() + $bokehBaseSize;
&:after{
content:var(--emoji-shape);
font-size: $randomizedSize;
}
width: $randomizedSize;
height: $randomizedSize;
top: random(50) * 1vh;
left: random(50) * 1vw;
color: nth($colorSet, random(length($colorSet)));
opacity: $bokehBaseOpacity + random(4) * 0.15;
text-shadow: ($randomizedSize + 5rem) 0 (0.2rem + random()*0.5rem) currentColor;
filter: blur(random(10)*2px) brightness($bokehBaseBrightness + random(250)*1%);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment