Wikipedia:Reference desk/Archives/Computing/2020 February 17

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

February 17

How does Instagram make hearts like smoke?

Someone was watching a live video on a TV series I was watching. I think the site was Instagram. On the right side there were lots of hearts moving upward like smoke.— Vchimpanzee • talk • contributions • 17:11, 17 February 2020 (UTC)

• Many ways. A typical way is to do it client-side (on the viewer's browser) with JavaScript and CSS. Each "heart" is a HTML <div> created by some JavaScript. The background image of that is set to a shared image wallpaper (a small heart), which is transparent around the heart shape. The position of this <div> is then modified by the script to float upwards. Often there's some tiny text in there too. I'm sure that a floating hearts script is downloadable.

This script does it by drawing hearts in CSS as boxes, no image file

Or (for a big site) it's done on the server. The same thing happens, but it's rendered onto the video stream at the source. Andy Dingley (talk) 17:23, 17 February 2020 (UTC)

Okay, thanks. I assumed it was something standard with whatever site it was.— Vchimpanzee • talk • contributions • 17:37, 17 February 2020 (UTC)

Are you asking how the site achieves this effect on a technical level?

Or are you just asking what the hearts represent? I believe Facebook Live does something similar. Viewers press one of the "like" buttons, and they show up as floating particles. If a stream is really popular, there might be a non-stop cloud of "likes" going by.

(BTW, If this was on a TV series, they probably used some fake generic-brand social media. They don't like to use brand-name products unless they're being sponsored.) ApLundell (talk) 03:06, 18 February 2020 (UTC)

I actually was wondering about what that was on the right. I can't remember what TV series or I would link to the video.— Vchimpanzee • talk • contributions • 21:44, 18 February 2020 (UTC)

You might be able to do it with CSS alone, see CSS animations. In the olden days it used to be done with Flash... 89.172.57.225 (talk) 22:25, 18 February 2020 (UTC)