Skip to content

Instantly share code, notes, and snippets.

@guilhermesimoes

guilhermesimoes/README.md

Last active Jul 27, 2021
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
YouTube's new morphing play/pause SVG icon
Raw
README.md

As soon as I saw the new YouTube Player and its new morphing play/pause button, I wanted to understand how it was made and replicate it myself.

From my analysis it looks like YouTube is using SMIL animations. I could not get those animations to work on browsers other than Chrome and it appears that they are deprecated and will be removed. I settled for the following technique:

  1. Define the icon path elements inside a defs element so that they are not drawn.

  2. Draw one icon by definining a use element whose xlink:href attribute points to one of the paths defined in the previous step. Simply changing this attribute to point to the other icon is enough to swap them out, but this switch is not animated. To do that,

  3. Replace the use with the actual path when the page is loaded.

  4. Use D3 transitions to morph one path into the other when the button is clicked. Other SVG libraries like Snap.svg or Raphaël can also be used for this effect.

Finally, it's important to point out that the number and order of the points of each path affect the way in which they morph into one another. If a path is drawn clockwise and another is drawn anticlockwise or if they are not drawn using the exact same number of points, animations between them will not look smooth. This is the reason the play button - a triangle - is drawn using 8 points instead of just 3. There's definitely more to be said on this subject.

Have any tips or suggestions? Comment and fork away :)

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.button {
flex: 1;
padding: 0;
height: 100%;
border: 0;
background-color: white;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.button svg {
width: 100%;
height: 100%;
}
</style>
<body>
<div class="container">
<button class="button js-button">
<svg viewBox="0 0 36 36">
<defs>
<path id="pause-icon" data-state="playing" data-next-state="paused" d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" />
<path id="play-icon" data-state="paused" data-next-state="playing" d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" />
</defs>
<use xlink:href="#play-icon" />
</svg>
</button>
</container>
<!--
<script src="https://cdn.jsdelivr.net/npm/d3-color@2.0.0/dist/d3-color.min.js" integrity="sha256-q6AewSdFihb0Ivx9H/OYYrakVi32V28/YaBsx6WsOy4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-ease@2.0.0/dist/d3-ease.min.js" integrity="sha256-B2rj4Zh6nUUF47NMo+6tby3yob2eIdBuj/AakAeRwSE=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.min.js" integrity="sha256-1pmTErM5B7Vvr2jL5roQTCh/LIx6jxa1zO5IA7o96o4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@2.0.1/dist/d3-interpolate.min.js" integrity="sha256-P1W7M74o3nb1vF6iGaruA5Hgo1jfRN1g1LCqI/W1Mdg=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-dispatch@2.0.0/dist/d3-dispatch.min.js" integrity="sha256-QmkMXTtH6RvxasB3nXUBjn9R81NP9G4OF36X2CUb8AI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-selection@2.0.0/dist/d3-selection.min.js" integrity="sha256-x/Z3vkIy98JMpcyi0VizY1btggFV30l+HQUmUSSWAm8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-transition@2.0.0/dist/d3-transition.min.js" integrity="sha256-QduTNttH+PA2VJSoGk5vp1OBZVrZio9yFkTSSc6Jksg=" crossorigin="anonymous"></script>
-->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="text/javascript">
"use strict";
/* global d3, document */
class PlayPauseButton {
constructor(el) {
this.el = el;
this.animationDuration = 350;
this.replaceUseWithPath();
this.el.addEventListener("click", this.goToNextState.bind(this));
}
replaceUseWithPath() {
var useEl = this.el.querySelector("use");
var iconId = useEl.getAttribute("xlink:href");
var iconEl = this.el.querySelector(iconId);
var nextState = iconEl.getAttribute("data-next-state");
var iconPath = iconEl.getAttribute("d");
this.pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.pathEl.setAttribute("data-next-state", nextState);
this.pathEl.setAttribute("d", iconPath);
var svgEl = this.el.querySelector("svg");
svgEl.replaceChild(this.pathEl, useEl);
}
goToNextState() {
var nextIconEl = this.getNextIcon();
var iconPath = nextIconEl.getAttribute("d");
var nextState = nextIconEl.getAttribute("data-next-state");
d3.select(this.pathEl)
.attr("data-next-state", nextState)
.transition()
.duration(this.animationDuration)
.attr("d", iconPath);
}
getNextIcon() {
var nextState = this.pathEl.getAttribute("data-next-state");
return this.el.querySelector(`[data-state="${nextState}"]`);
}
};
var playPauseButton = new PlayPauseButton(document.querySelector(".js-button"));
</script>
</body>
@kmthinkingrock
Copy link

kmthinkingrock commented Dec 17, 2015

Very, very cool. I am surprised to see no comments on this. I found this while looking for a play/pause SVG for my html5 video experiment. I didn't know about D3 - I have to say I am an intrigued but I am a bit overloaded with technologies to learn at the moment, so I'm not sure where to put D3 in my priority stack. I think probably near the top :)

I would be interested to see what else you come up with - I have played a bit with some other SVG JS libraries iin the past, but only very briefly.

Kay

@guilhermesimoes
Copy link
Author

guilhermesimoes commented Jan 21, 2016 •
edited

Thank you for the kind words 😀 I only saw your comment now because GitHub does not have gist notifications.

My use of D3 here is minimal. I use it to select, remove and append elements but you can use jQuery or even vanilla JavaScript for that. The only significant use for D3 here is morphing one button path into the other. But you can use other SVG libraries or jQuery for that.
Really, I don't know why I used D3 here. I guess if all you have is a hammer, everything looks like a nail 😄

Still, I'd say D3 is one of the coolest and most useful libraries for the web that you could learn. And there are lots of free resources:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment