Skip to Main Content

SVG

Passoã Jus

The pulsating ball is SVG code inside a 'Static Content' region.
Region appearance has a fixed size CSS class. I.e. 'h700'.
Animations are done using the animate tag. 
<svg id="passoajus" width="455" height="500" viewBox="0 0 455 455" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:space="preserve" style="height:100%;">
  <defs>
    <linearGradient id="passoa-jus" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>
  <symbol id="bubble" width="1" height="1" viewBox="0 0 2 2">
    <circle  fill="#f48e8e" stroke="none" cx="1" cy="1" r="1" />
  </symbol>  
  <g id="Group">
    <g id="glass_1">
      <path fill="#d2fcff" stroke="none" d="M 153.813004 124.136993 L 157.593002 172.389008 L 176.289993 410.729004 C 177.487 425.992004 190.222 437.765991 205.531006 437.765991 L 249.207993 437.765991 C 264.516998 437.765991 277.252014 425.991028 278.449005 410.729004 L 297.145996 172.389008 L 300.925995 124.136993 L 153.813004 124.136993" />
    </g>
    <g id="orange">
      <path fill="#fca430" stroke="none" d="M 378.024994 124.136993 C 378.024994 81.556 343.506989 47.037994 300.925995 47.037994 C 258.345001 47.037994 223.826996 81.556 223.826996 124.136993 C 223.826996 166.71698 258.345001 201.236008 300.925995 201.236008 C 343.506989 201.235001 378.024994 166.71698 378.024994 124.136993" />
      <path fill="#ffde55" stroke="none" d="M 355.755005 124.136993 C 355.755005 93.855011 331.207001 69.307983 300.925995 69.307983 C 270.644989 69.307983 246.097 93.855988 246.097 124.136993 C 246.097 154.417999 270.644989 178.966003 300.925995 178.966003 C 331.207001 178.966003 355.755005 154.417999 355.755005 124.136993" />
    </g>
    <g id="straw">
      <path fill="#f75959" stroke="none" d="M 233.776993 235.059006 L 216.057007 239.959 L 197.356995 172.389008 L 184.007004 124.139008 L 155.317001 20.449005 C 154.927002 19.019012 153.867004 18.459015 153.266998 18.248993 C 152.667007 18.028992 151.487 17.80899 150.287003 18.669006 L 91.827003 60.419006 C 90.207001 61.57901 88.347 62.128998 86.497002 62.128998 C 83.626999 62.128998 80.796997 60.789001 79.007004 58.278992 C 76.056999 54.148987 77.016998 48.408997 81.147003 45.458984 L 139.606995 3.709015 C 145.347 -0.390991 152.746994 -1.44101 159.406998 0.919006 C 166.057007 3.269012 171.156998 8.739014 173.037003 15.549011 L 203.087006 124.139008 L 216.436996 172.389008 L 233.776993 235.059006 Z" />
      <path fill="#f48e8e" stroke="none" d="M 216.436996 172.389008 L 197.356995 172.389008 L 184.007004 124.139008 L 203.087006 124.139008 Z" />
    </g>
    <g id="glass-content">
      <path fill="url('#passoa-jus')" stroke="none" d="M 157.593002 172.389008 L 176.289993 410.729004 C 177.487 425.992004 190.222 437.765991 205.531006 437.765991 L 249.207993 437.765991 C 264.516998 437.765991 277.252014 425.991028 278.449005 410.729004 L 297.145996 172.389008 L 157.593002 172.389008" />
    </g>
    <g id="bubbles">
      <use href="#bubble" x="176" y="233" width="22" height="22" />
      <use href="#bubble" x="241" y="208" width="36" height="36" />
      <use href="#bubble" x="206" y="283" width="34" height="34" />
      <use href="#bubble" x="183" y="322" width="20" height="20" />
      <use href="#bubble" x="251" y="347" width="20" height="20" />
      <use href="#bubble" x="200" y="392" width="21" height="21" />
    </g>
    <g id="glass_2">
      <path fill="#57c3ff" stroke="none" d="M 135.783997 114.682983 L 161.434998 441.768982 C 162.020004 449.234985 168.25 454.995972 175.740005 454.995972 L 278.993011 454.995972 C 286.481995 454.995972 292.712006 449.235992 293.296997 441.768982 L 318.947998 114.682983 C 319.277008 110.48999 315.963013 106.906006 311.756012 106.906006 L 142.975006 106.906006 C 138.768997 106.904999 135.455002 110.488983 135.783997 114.682983 M 157.593002 172.389008 L 153.813004 124.136993 L 300.925995 124.136993 L 297.145996 172.389008 L 278.450012 410.729004 C 277.252991 425.992004 264.518005 437.765991 249.209 437.765991 L 205.531998 437.765991 C 190.222 437.765991 177.488007 425.991028 176.291 410.729004 L 157.593002 172.389008" />
    </g>
  </g>
</svg>

Reusability

<g> element

In the <g> element, several elements can be grouped.
An ID can be given to the group, to find it easier with CSS. 
<g id="orange">
    <path fill="#fca430" stroke="none" d="M 378.024994 124.136993 C 378.024994 81.556 343.506989 47.037994 300.925995 47.037994 C 258.345001 47.037994 223.826996 81.556 223.826996 124.136993 C 223.826996 166.71698 258.345001 201.236008 300.925995 201.236008 C 343.506989 201.235001 378.024994 166.71698 378.024994 124.136993" />
    <path fill="#ffde55" stroke="none" d="M 355.755005 124.136993 C 355.755005 93.855011 331.207001 69.307983 300.925995 69.307983 C 270.644989 69.307983 246.097 93.855988 246.097 124.136993 C 246.097 154.417999 270.644989 178.966003 300.925995 178.966003 C 331.207001 178.966003 355.755005 154.417999 355.755005 124.136993" />
</g>
<g id="straw">
    <path fill="#f75959" stroke="none" d="M 233.776993 235.059006 L 216.057007 239.959 L 197.356995 172.389008 L 184.007004 124.139008 L 155.317001 20.449005 C 154.927002 19.019012 153.867004 18.459015 153.266998 18.248993 C 152.667007 18.028992 151.487 17.80899 150.287003 18.669006 L 91.827003 60.419006 C 90.207001 61.57901 88.347 62.128998 86.497002 62.128998 C 83.626999 62.128998 80.796997 60.789001 79.007004 58.278992 C 76.056999 54.148987 77.016998 48.408997 81.147003 45.458984 L 139.606995 3.709015 C 145.347 -0.390991 152.746994 -1.44101 159.406998 0.919006 C 166.057007 3.269012 171.156998 8.739014 173.037003 15.549011 L 203.087006 124.139008 L 216.436996 172.389008 L 233.776993 235.059006 Z" />
    <path fill="#f48e8e" stroke="none" d="M 216.436996 172.389008 L 197.356995 172.389008 L 184.007004 124.139008 L 203.087006 124.139008 Z" />
</g>

<defs> element

In the <defs> element, the definition is set for the gradient. Multiple definitions can go in one <defs> element.
The definition is used by pointing a selector as a url to the fill attribute of the path. 
<defs>
    <linearGradient id="passoa-jus" gradientTransform="rotate(90)">
        <stop offset="20%" stop-color="gold" />
        <stop offset="90%" stop-color="red" />
    </linearGradient>
</defs>
<g id="glass-content">
    <path fill="url('#passoa-jus')" stroke="none" d="M 157.593002 172.389008 L 176.289993 410.729004 C 177.487 425.992004 190.222 437.765991 205.531006 437.765991 L 249.207993 437.765991 C 264.516998 437.765991 277.252014 425.991028 278.449005 410.729004 L 297.145996 172.389008 L 157.593002 172.389008" />
</g>

<symbol> element

In the <symbol> element, the definition is set for one symbol. Multiple definitions can need to be in multiple <symbol> elements.
The symbol is used by the use of the use element.
Size (and other attributes) can change per use case. 
<symbol id="bubble" width="1" height="1" viewBox="0 0 2 2">
    <circle  fill="#f48e8e" stroke="none" cx="1" cy="1" r="1" />
</symbol> 
<use href="#bubble" x="176" y="233" width="22" height="22" />
Release 1.0