Heart Shaped Bokeh

heart-shaped-bokeh.markdown

Heart Shaped Bokeh

JS/CSS code for creating a beautiful Heart Shaped Bokeh You can replace the bokeh heart shape with any of the heart symbol shapes in this list.

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<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>

script.js

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}'`})
  }
  );

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

style.scss

: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%);
    }
  }
}