# first.items[].content
6️⃣ 816 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRR RZE

Behind the demo https://css-tricks.com/recreating-the-twitter-heart-animation/

Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!

#CSS #code #coding #frontend #webDev #web #dev #webDevelopment

# first.items[].contentMap.en
6️⃣ 816 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRR RZE

Behind the demo https://css-tricks.com/recreating-the-twitter-heart-animation/

Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!

#CSS #code #coding #frontend #webDev #web #dev #webDevelopment

# first.items[].attachment[].name
Shows the twitter heart animation with sparks flying away from it as it goes from grey to red on click.

# first.items[].attachment[].name
The current twitter heart in DevTools: created with an SVG path, but that path data is a lot of char vomit.