editor/workshop/src/ui/img/play.svg

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 145 144.6">
 <path fill="#FEDCA4" opacity="0.8"
       d="m124.2 70.2c0.01 12.12 0.03 24.24-0.02 36.36-0.01 2.09-0.18 4.21-0.58 6.26-1.49 7.7-5.25 10.91-12.91 10.93-21.16 0.06-42.32 0.35-63.47-0.13-5.93-0.13-11.9 1.08-17.78-0.22-7.3-1.61-10.12-5.01-10.14-12.42-0.06-24.05-0.06-48.09-0.02-72.14 0-3.13 0.31-6.24 0.3-9.4-0.02-6.39 5.05-10.56 12.04-10.57 20.74-0.02 41.48 0.3 62.2-0.17 5.71-0.13 11.37 0.3 17.05 0.2 8.55-0.15 13.15 4.22 13.27 12.8 0.1 12.73 0 25.55 0 38.38z"/>
 <path fill="#D6BA8A" opacity="0.5"
       d="m14.68 97.46c0-14.99-0.35-28.73 0.15-42.43 0.26-7.09-0.56-14.24 0.14-21.16 1.25-12.41 6.55-18.79 20.46-19.28 21.03-0.73 42.1-0.26 63.16-0.23 4.47 0.01 8.95 0.05 13.41 0.1 12.47 0.15 20.93 10.71 20.61 23.52-0.24 9.63 0.18 19.29-0.15 28.88-0.54 15.89 1.06 31.8-0.67 47.66-1.13 10.42-10.11 18.04-20.61 17.62-15.08-0.6-30.15-0.37-45.23 0.01-10.13 0.26-20.25-0.36-30.39-0.3-13.06 0.08-20.87-8.72-20.81-21.76 0.09-4.5 0.37-9.2 0.01-12.54zm108.7-25.2c0-12.16 0.13-24.31-0.04-36.47-0.12-8.14-4.48-12.28-12.58-12.14-5.39 0.09-10.75-0.31-16.16-0.19-19.64 0.44-39.3 0.13-58.96 0.16-6.62 0.01-11.43 3.96-11.41 10.01 0.01 2.99-0.28 5.94-0.29 8.91-0.04 22.79-0.04 45.58 0.02 68.37 0.02 7.02 2.69 10.25 9.61 11.77 5.57 1.23 11.23 0.08 16.85 0.21 20.04 0.46 40.11 0.18 60.16 0.12 7.26-0.02 10.83-3.06 12.24-10.36 0.38-1.94 0.54-3.95 0.55-5.93 0.1-11.47 0-22.96 0-34.44z"/>
 <path fill="#FEA104"
       d="m12.68 95.46c0-14.99-0.36-28.73 0.15-42.43 0.26-7.09-0.56-14.24 0.14-21.16 1.25-12.41 6.55-18.79 20.46-19.28 21.03-0.73 42.1-0.26 63.16-0.23 4.47 0.01 8.95 0.05 13.41 0.1 12.47 0.14 20.93 10.71 20.61 23.52-0.24 9.63 0.18 19.29-0.15 28.88-0.54 15.89 1.05 31.8-0.67 47.66-1.13 10.42-10.11 18.04-20.61 17.62-15.08-0.6-30.15-0.37-45.23 0.01-10.13 0.26-20.25-0.36-30.39-0.3-13.06 0.08-20.87-8.72-20.81-21.76 0.09-4.5 0.37-9.17 0.01-12.54zm108.7-25.2c0-12.15 0.13-24.31-0.04-36.47-0.12-8.14-4.48-12.28-12.58-12.14-5.39 0.09-10.75-0.31-16.17-0.19-19.64 0.44-39.3 0.14-58.96 0.16-6.62 0.01-11.43 3.96-11.41 10.01 0.01 2.99-0.28 5.94-0.29 8.91-0.04 22.79-0.04 45.58 0.02 68.37 0.02 7.02 2.7 10.25 9.61 11.77 5.57 1.23 11.23 0.08 16.85 0.21 20.04 0.46 40.11 0.18 60.16 0.12 7.26-0.02 10.83-3.06 12.24-10.36 0.38-1.94 0.54-3.95 0.55-5.93 0.1-11.47 0-22.96 0-34.44z"/>
 <!-- Play symbol -->
 <g id="play" transform="translate(72.5 72.3)">
  <g transform="translate(-72.5 -72.3)">
   <path fill="#D6BA8A"
         d="m63.45 49.22c2.63 0.13 4.7 1.26 6.58 2.61 6.35 4.55 12.72 9.09 18.89 13.89 8.46 6.59 8.92 13.89 0.78 20.72-6.6 5.54-13.72 10.52-20.98 15.18-5.8 3.72-9.7 1.43-9.98-5.37-0.56-13.45-0.6-26.9-0.02-40.35 0.14-3.24 0.48-6.49 4.73-6.66z"/>
   <path fill="#FEA104"
         d="m62.45 47.22c2.63 0.13 4.7 1.26 6.58 2.61 6.35 4.55 12.72 9.09 18.89 13.89 8.46 6.59 8.92 13.89 0.78 20.72-6.6 5.54-13.72 10.52-20.98 15.18-5.8 3.72-9.7 1.43-9.98-5.37-0.56-13.45-0.6-26.9-0.02-40.35 0.14-3.26 0.48-6.51 4.73-6.68z"/>
  </g>
 </g>
 <!-- Pause symbol -->
 <g id="pause" transform="translate(72.5 72.3)" opacity="0">
  <g transform="translate(-72.5 -72.3)">
   <g fill="#D6BA8A">
     <path d="M98.93,99.45c0,2.18-1.77,3.95-3.95,3.95h-11.6c-2.18,0-3.95-1.77-3.95-3.95v-49.1c0-2.18,1.77-3.95,3.95-3.95h11.6c2.18,0,3.95,1.77,3.95,3.95V99.45z"/>
     <path d="M67.13,99.45c0,2.18-1.77,3.95-3.95,3.95h-11.6c-2.18,0-3.95-1.77-3.95-3.95v-49.1c0-2.18,1.77-3.95,3.95-3.95h11.6c2.18,0,3.95,1.77,3.95,3.95V99.45z"/>
   </g>
   <g fill="#FEA104">
     <path d="M65.46,98.02c0,2.18-1.77,3.95-3.95,3.95h-11.6c-2.18,0-3.95-1.77-3.95-3.95v-49.1c0-2.18,1.77-3.95,3.95-3.95h11.6c2.18,0,3.95,1.77,3.95,3.95V98.02z"/>
     <path d="M97.25,98.02c0,2.18-1.77,3.95-3.95,3.95h-11.6c-2.18,0-3.95-1.77-3.95-3.95v-49.1c0-2.18,1.77-3.95,3.95-3.95h11.6c2.18,0,3.95,1.77,3.95,3.95V98.02z"/>
   </g>
  </g>
 </g>
 <!-- Show pause anim -->
 <animateTransform xlink:href="#play" attributeName="transform"
   type="scale" from="1" to="1.8"
   dur="0.25s" restart="whenNotActive" additive="sum"
   calcMode="spline" keySplines="0.52 0 1 1"
   begin="indefinite" id="pauseanim"/>
 <animate xlink:href="#play" attributeName="opacity"
   from="1" to="0" dur="0.25s" fill="freeze"
   calcMode="spline" keySplines="0.52 0 1 1"
   begin="pauseanim.begin"/>
 <animateTransform xlink:href="#pause" attributeName="transform"
   type="scale" from="0" to="1"
   values="0; 1.1; 0.95; 1" keyTimes="0; 0.5; 0.8; 1"
   dur="0.3s" additive="sum"
   calcMode="spline" keySplines="0 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
   begin="pauseanim.begin+0.2s"/>
 <animate xlink:href="#pause" attributeName="opacity"
   from="0" to="1" dur="0.3s" fill="freeze"
   begin="pauseanim.begin+0.2s"/>
 <!-- Show play anim -->
 <animateTransform xlink:href="#pause" attributeName="transform"
   type="scale" from="1" to="1.8"
   dur="0.25s" restart="whenNotActive" additive="sum"
   calcMode="spline" keySplines="0.52 0 1 1"
   begin="indefinite" id="playanim"/>
 <animate xlink:href="#pause" attributeName="opacity"
   from="1" to="0" dur="0.25s" fill="freeze"
   calcMode="spline" keySplines="0.52 0 1 1"
   begin="playanim.begin"/>
 <animateTransform xlink:href="#play" attributeName="transform"
   type="scale" from="0" to="1"
   values="0; 1.1; 0.95; 1" keyTimes="0; 0.5; 0.8; 1"
   dur="0.3s" additive="sum"
   calcMode="spline" keySplines="0 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
   begin="playanim.begin+0.2s"/>
 <animate xlink:href="#play" attributeName="opacity"
   from="0" to="1" dur="0.3s" fill="freeze"
   begin="playanim.begin+0.2s"/>
 <script type="text/javascript">
 <![CDATA[
  document.showPlay = function() {
    // Ignore if we're already showing
    // (if we're in the process of showing the restart="whenNotActive" will
    //  prevent the animation from restarting)
    if (getOpacity('play') == 1)
      return;
    document.getElementById("playanim").beginElement();
  }

  document.showPause = function() {
    // Ignore if we're already showing
    if (getOpacity('pause') == 1)
      return;
    document.getElementById("pauseanim").beginElement();
  }

  function getOpacity(id) {
    var elem = document.getElementById(id);
    return window.getComputedStyle(elem).opacity;
  }
 ]]>
 </script>
</svg>