cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="14 82 272 139">
	<g id="coca-cola">
		<title>Coca-Cola</title>
		<path d="M109.6 157.3c-7.9 0-15.4 2.3-22.9 4.6-5.4 1.6-11.1 3.8-16.8 3.8-7.4 0-12.4-5.1-12.4-12.4 0-3.6.7-7.1 1.9-10.4 2.9-8.2 7-16 12.3-22.9 2.6-3.5 10.3-12.3 15.1-12.3.8 0 1.6.6 1.6 1.5 0 .7-1.2.7-1.6.8-1.9.7-3.5 3.4-3.5 5.4 0 1.1.9 2.5 2.1 2.5 3.9 0 5.8-5.4 5.8-8.6s-2.7-5.3-5.8-5.3c-8.6 0-18.7 9-23.8 14.9C54.4 127 47 140 47 151.4c0 10.9 5.6 18.7 17 18.7 12.1 0 23.2-6.7 35.3-6.7 6 0 10.4 1.9 13.7 7 3.1-1.5 6.2-2.2 9.6-2.2 5.6 0 10.8 1.6 16.2 2.8-6.3-9.5-18.3-13.7-29.2-13.7z"/>
		<path d="M131.4 145.8c-.2 0-.4-.1-.4-.3 0-.5.4-1.2.6-1.7l11.9-23.4h-8.1l-.7 1.3c-1-1.1-2.3-1.4-3.8-1.4-5.3 0-10.8 6.1-13.4 10.4l-1.9 3.3-1 1.6c-2.3 3.5-8.9 12.6-13.5 12.6-1.6 0-2.3-1.5-2.3-2.9 0-4.2 2.6-8.2 4.7-11.6 1.3-2.1 5.2-9.3 8.3-9.2.4 0 1 .1 1 .6 0 .6-4.7 1.1-4.7 5.6 0 1.2.8 2.3 2 2.3 3.1 0 5.5-5.2 5.5-7.8 0-3-2-5-5-5-4.1 0-7.7 3.1-10.3 6l-2.6 2.9c-1.9 2.1-4.2 3.7-7.1 3.6.5-2.2 1.1-4.4 1.1-6.7 0-3-1.9-5.8-5.2-5.8-9.4 0-19.8 18.4-19.8 26.9 0 3.4 1.8 6.7 5.5 6.7 4.5 0 7.7-3.5 10.2-6.8 2.5-3.3 4.9-6.9 6.6-10.7 1.4 0 2.8-.3 4.2-.6-1.4 3.3-3.2 6.8-3.2 10.4 0 3.7 2.2 7.8 6.3 7.8 5.6 0 10.3-4.5 14.1-8.1-.2 1-.3 1.9-.3 2.9 0 2.6 1.6 5.3 4.4 5.3 2.9 0 5.6-2.3 7.4-4.3.1 2.1.7 4.4 3.2 4.4 7 0 14.5-11.4 17-17.5h-3.2c-1 2-5.1 9.2-7.5 9.2zm-54.2.5c-1.2 0-1.7-1.2-1.7-2.3 0-3.5 3.2-9.4 5.2-12.3 1.6 1.7 3.1 2.8 5.2 3.5-1.1 2.9-5.3 11.1-8.7 11.1zm10.1-14.1c-.2.5-2.4-.9-2.6-1.1-.8-.7-1.4-1.8-1.4-2.9 0-1.8 1.6-4 3.5-4 1.3 0 1.9 1.4 1.9 2.5 0 2-.6 3.8-1.4 5.5zm41.2 2.8c-.9 1.9-5.6 11.1-8.3 11.1-.7 0-1-.9-.9-1.5.2-4.2 8.7-20.1 12.7-20.1.4 0 .8.4.8.8 0 .6-.2 1.3-.5 1.9l-1.2 2.6-2.6 5.2z"/>
		<path d="M151.7 126.6l3-6.2h-6c-1.5 0-2.3.3-3 1.6l-3.3 6.5h5.8c1.9 0 2.7-.3 3.5-1.9zM172.2 136.4c-8.7 0-14.6 13.2-14.6 20.7 0 .7.1 1.5.3 2.2 2.9-3.4 5.3-5.8 9.3-7.7.3-3 2.3-11 6.2-11 1.6 0 1.7 2 1.7 3.2 0 7-8.4 20.8-16 20.8-3.8 0-5.6-3.1-5.6-6.6 0-3.2.6-6.4 1.7-9.4 3.1-9.2 7.9-17.8 13.8-25.5 3.6-4.7 9.1-10.8 14.2-13.9 1.5-.8 2.9-1.2 4.6-1.4-5.7 4.4-12.5 11.6-12.5 19.3 0 2.7 1.6 4.9 4.5 4.9 7.5 0 13.4-13.9 13.4-20.4 0-.8-.1-1.6-.1-2.4.9-.2 1.9-.3 2.8-.3 2.7 0 5.4.7 7.8 1.9 4.5 2.4 8.7 5.6 12.9 8.7l6-7.2c-6.1-4.7-12.7-8.8-20.6-8.8-3.6 0-7 .9-10.3 2.3-1.5-1.4-3.4-2-5.5-2-9.8 0-20.3 9.8-26.1 16.6-7.8 9.1-16.2 24.3-16.2 36.8 0 6.9 4.2 13 11.5 13 11.8 0 22.9-16.4 22.9-27.3-.4-3.4-2.6-6.5-6.1-6.5zm14.6-14.3c-1.2 2.1-4.1 6.9-7 6.9-1 0-1.6-1-1.6-1.9 0-6.1 6.5-13.6 11.6-16.6-.2 4.1-.9 7.9-3 11.6z"/>
		<path d="M245.7 136.5h-7.9l-.7 1.4-.4-.3-.8-.6c-.7-.5-1.8-.7-2.6-.7-11.1 0-19.1 25.9-24.1 25.9-.8 0-1-.9-1-1.5 0-6.4 5.3-18.6 8-24.4 3.4-7.1 7.9-15.2 13.2-21.2l5.1-5.8c.7-.8 1.9-2.2 3.1-2.2.2 0 .3.2.3.4 0 .5-.3 1-.6 1.3l-.6.7c-.1.2-.3.5.1.5h.2c1.1 0 2.5-2.3 2.5-3.3 0-1.6-1.4-3-3.1-3-6.3 0-12.5 8.2-16 12.7-7.4 9.6-13.1 20.6-17.3 31.9-1.2.7-2.4.9-3.8 1 .7-2.4 1.6-4.9 1.6-7.3 0-2.8-1.7-5.7-4.8-5.7-9.2 0-19.7 18.3-19.7 26.7 0 3.2 1.5 7.1 5.3 7.1 3.2 0 6.4-2.6 8.4-4.8 3.4-3.7 5.7-8.1 7.9-12.6h.8c1 0 2-.1 3-.5-1 3.5-1.9 7-1.9 10.7 0 3.1 1.2 7 4.9 7 4 0 6.8-4 9-6.7v1.4c0 2.6 1.1 5.3 4 5.3 3 0 5.4-2.5 7.4-4.5v.8c0 1.8 1.2 3.6 3.1 3.6 6.7 0 13.9-11.8 16.1-17.3h-2.9c-.9 2.1-4.7 9.2-7.3 9.2-.3 0-.3-.3-.3-.5 0-.6.4-1.2.6-1.7l11.2-23zm-59.4 26.1c-1.2 0-1.7-1.5-1.7-2.5 0-3.8 2.9-8.9 4.9-12 1.4 1.9 2.8 3.5 5.2 4.1-1.3 2.7-4.8 10.4-8.4 10.4zm9.8-13.6c-1.8-.8-3.5-1.8-3.5-4.1 0-1.8 1.1-4.5 3.2-4.5 1.2 0 1.9 1.2 1.9 2.3.1 2.2-.7 4.4-1.6 6.3zm35.4 1.1c-.6 1.4-5.6 11.9-8.1 12.1-.7.1-1.1-.7-1.1-1.3 0-4.4 4.5-12.2 7-15.7.7-1 3.4-4.5 5-4.5.4 0 .7.5.7.9s-.1.7-.3 1.1l-3.2 7.4z"/>
		<path d="M224.9 123.6c.8.1 1.6.1 2.5.1 12 0 23.1-9.1 25.5-20.8-6.8 7.1-11.5 11.7-21.7 12l-6.3 8.7z"/>
		</g>
			<path id="dynamic_curve" d="M172.4 169.5c-9.2 4.6-19.8 6.9-29.9 9-14 2.9-28.3 4.7-42.6 4.7-19.3 0-38.9-2.4-57.3-8.1-7.4-2.3-14.6-5.1-21.8-7.9l.1 32.6c7.3 1.5 14.6 2.9 22 3.8 7.6.9 15.3 1.4 23 1.4 26 0 51.6-5.3 75.6-15.1 12.6-5.1 25.2-11 35.6-19.7l-1.9-2.3c-.9.5-1.8 1.1-2.8 1.6zM261.7 115.1c-9 2.1-17.6 5.4-25.8 9.7-6.3 3.3-12 7.5-17.7 11.8l-2.6 5.9c6-3.7 12-6.9 18.9-8.7 7.5-2 15.3-2.8 23.1-2.8 7.2 0 14.4.8 21.6 1.8l.1-20.4c-6 .6-11.9 1.3-17.6 2.7z"/>
		<g id="coke">
			<title>Coke</title>
			<path d="M202.8 186.7c-6.2 0-11.7 5.3-11.7 11.6 0 .7.1 1.4.3 2.1-.8.3-1.5.5-2.3.5-3.4 0-5.6-3.1-5.6-6.3 0-5.2 3.3-13.2 9.4-13.2 2.8 0 4.9 1.6 6.3 4l1.6-6.9c-.4.1-.8.1-1.2.1-.5 0-1.1-.1-1.6-.1l-2.4-.3c-.7-.1-1.5-.2-2.2-.2-9.2 0-16.9 8.5-16.9 17.5 0 6.2 3.8 9.7 10 9.7 2.4 0 4.5-.6 6.7-1.8 2.2 1.4 4.3 1.8 6.8 1.7 5.8-.1 10.5-6.3 10.5-11.8-.3-4.2-3.7-6.6-7.7-6.6zm-3.9 16.4c-1.8 0-2.3-2-2.3-3.5 0-2.9 2-10.1 5.7-10.1 1.6 0 2.2 1.8 2.2 3.1 0 3-1.9 10.5-5.6 10.5z"/>
			<path d="M229.9 187.2H221c.5.5.9.9.9 1.6 0 1.4-3.4 3.9-4.3 4.8l1.8-9h-7c.9.6 1.4 1.3 1.4 2.3 0 .3 0 .6-.1.8l-2.7 12.5-.3 1.4c-.3 1.4-1.4 2.3-2.3 3.3h8.2c-.5-.5-1-1-1-1.8 0-.5.1-1 .2-1.5l1-3.9 2.9 7.2h6.6c-1.7-3.6-3.8-7.1-5.3-10.8 2.6-2.6 5.7-4.8 8.9-6.9z"/>
			<path d="M236.1 186.5c-6.1 0-10.6 6.3-10.6 12 0 3.8 2.7 6.6 6.5 6.6 3.5 0 6.6-2.5 7.4-5.9-1.2 1.2-3.1 2.2-4.8 2.2-2 0-4-1.6-4-3.7 0-1.4.5-2.7.9-3.9h8c1.3 0 1.8-.7 1.8-1.9 0-3-2.2-5.4-5.2-5.4zm-.7 5.5h-3c.5-1.3 1.5-2.8 3.1-2.8.9 0 1.3.7 1.3 1.5-.1 1.1-.4 1.3-1.4 1.3z"/>
			</g>
				<path id="drink" d="M113.1 94.2H108l-2.7 12.7h5.1c2.2 0 3.9-1 5.2-2.9.7-1.1 1.3-2.3 1.5-3.6.4-1.7.2-3.2-.4-4.3-.6-1.3-1.9-1.9-3.6-1.9zm2.2 6.4c-.1.4-.2.8-.4 1.3-.3.8-.7 1.4-1.1 2-.6.6-1.2 1.1-1.9 1.3-.4.1-.9.2-1.5.2h-3.1l2.1-9.7h3c1.4 0 2.3.4 2.7 1.3.5.8.5 2 .2 3.6zM123.9 99.1l.3-1.6h-.4c-.6 0-1.2.2-1.8.7-.6.4-.9.8-1.1 1.1l.3-1.6h-1.5l-2 9.2h1.6l1.1-5.3c.1-.7.5-1.2 1-1.7s1.2-.8 2-.8h.3c0-.1.1-.1.2 0zM123.6 106.8h1.6l1.9-9.2h-1.5zM134 97.4c-.6 0-1.2.1-1.7.4-.5.2-1.1.6-1.6 1.2l.3-1.3h-1.5l-2 9.2h1.6l1-4.8c.1-.6.3-1.1.4-1.4.1-.3.4-.6.7-.9.4-.4.8-.6 1.3-.8.3-.1.6-.1.9-.1.7 0 1.2.3 1.3.9.1.3.1.8 0 1.4l-1.2 5.8h1.6l1.3-5.9c.2-.9.2-1.6.1-2.1-.4-1.2-1.2-1.6-2.5-1.6zM146.7 97.6h-2l-4.8 3.9 1.6-7.3H140l-2.7 12.6h1.5l.7-3.5 1.6-1.1 1.9 4.6h2l-2.5-5.8z"/>
		<g id="coke-singular">
<path d="M110,156.6c-8,0-15.5,2.3-23.1,4.6c-5.4,1.6-11.2,3.8-16.9,3.8c-7.4,0-12.5-5.1-12.5-12.5c0-3.6,0.7-7.1,1.9-10.5
c2.9-8.3,7.1-16.1,12.3-23.1c2.6-3.5,10.4-12.4,15.2-12.4c0.8,0,1.6,0.6,1.6,1.5c0,0.7-1.2,0.7-1.6,0.8c-2,0.7-3.5,3.4-3.5,5.4
c0,1.1,0.9,2.5,2.1,2.5c3.9,0,5.9-5.5,5.9-8.7s-2.7-5.4-5.8-5.4c-8.7,0-18.8,9-24,15c-7.3,8.4-14.7,21.5-14.7,33
c0,11,5.6,18.9,17.1,18.9c12.2,0,23.4-6.7,35.6-6.7c6,0,10.4,2,13.8,7c3.1-1.5,6.2-2.2,9.6-2.2c5.6,0,10.8,1.6,16.3,2.8 C133.2,160.9,121.1,156.6,110,156.6z"/>
	<path d="M145.5,138.2c-0.6,0-1.8,0.9-3.4,2.8c-2.3,2.6-4,4.3-4.9,5.2c-2.2,1.9-4.4,2.8-6.5,2.8c-0.9,0-1.4-0.6-1.4-1.8
c0-1.1,0.4-2.6,1.2-4.6c4.1-0.9,7.7-2.4,10.6-4.6c3.7-2.7,5.6-5.8,5.6-9.4c0-3.6-1.6-5.4-4.7-5.4c-4.8,0-9.6,2.8-14.2,8.5
c-3.1,3.9-5.1,7.6-6,11.3l0,0c-1.5,1.2-2.6,2.2-3.3,2.8c-2.3,1.8-4.8,2.7-7.5,2.7l-0.8-0.8c1.4-0.4,2.2-2.2,2.2-5.5	c0-1.9-0.1-3.2-0.4-3.8c-0.5-1.1-1.5-1.8-3.1-2.1l4.6-4.8c2.3-2.4,3.8-3.6,4.5-3.6c0.1,0,0.7,0.2,1.8,0.5c-0.4,0.9-1.1,1.4-2.1,1.5
c-1.9,1.2-2.8,2.7-2.8,4.7c0,0.3,0.3,0.6,0.8,1c0.5,0.4,0.9,0.5,1.2,0.5c1.5,0,2.9-0.8,4-2.3c1.1-1.4,1.6-2.9,1.6-4.5
c0-1.3-0.6-2.4-1.7-3.3c-1.1-0.9-2.4-1.4-3.7-1.4c-2.6,0-5.1,1-7.5,3.1c-0.5,0.4-2.4,2.5-5.7,6.1l-1.3-1l-0.2-0.5
c3.1-4.2,6-9.1,8.7-14.9c3.2-7,5.6-12.2,7.2-15.8c-2.6,0-4-0.1-4.2-0.1c-1.1,0-2.5,0.5-4,1.5c-3,5.3-7.3,13.4-12.7,24.3 c-0.4,0.9-0.8,1.7-1.2,2.5c-1.5,1.2-3.2,1.9-5.3,1.9c0.5-2.2,1.1-4.5,1.1-6.8c0-3-1.9-5.9-5.2-5.9c-9.5,0-20,18.5-20,27.1 c0,3.4,1.8,6.7,5.5,6.7c4.5,0,7.8-3.6,10.3-6.9c2.6-3.4,4.9-7,6.7-10.8c1.4,0,2.8-0.3,4.2-0.6l0.6-0.9c-3.9,7.7-7,13.6-9.3,17.7 c4.1,0,7-0.5,8.9-1.4l6.7-13.6c0.3,1.5,1.4,2.2,3.5,2.2c0.5 0,1.4-0.1,2.7-0.2c-2.8,3.2-4.2,6.6-4.2,10.2c0,3,1.7,4.5,5.2,4.5 c2.6,0,4.8-0.5,6.4-1.4c1.2-0.6,2.7-2,4.6-4c1.6-1.7,2.5-3.1,3-4.2c-0.2,1.2-0.4,2.3-0.4,3.5c0,4.1,2.2,6.2,6.5,6.2
c4.6,0,9-2.7,13.4-8.2c3.1-3.9,4.7-6.1,4.7-6.7C145.8,138.4,145.7,138.2,145.5,138.2z M135.8,132.2c2.7-4.2,4.9-6.2,6.6-6.2
c0.3,0,0.5,0.1,0.7,0.2c0.3,0.5,0.4,1.1,0.4,1.8c0,2.7-1.4,5.4-4.2,8.2c-2.6,2.5-5.3,4.1-8.2,4.9
C132.2,138.2,133.8,135.3,135.8,132.2z M77.4,145.6c-1.2,0-1.7-1.2-1.7-2.3c0-3.5,3.2-9.5,5.2-12.3c1.6,1.7,3.1,2.8,5.2,3.6 C85,137.3,80.8,145.6,77.4,145.6z M87.6,131.4c-0.2,0.5-2.4-0.9-2.6-1.1c-0.9-0.7-1.5-1.8-1.5-2.9c0-1.8,1.6-4,3.6-4 c1.3,0,1.9,1.5,1.9,2.6C89,127.8,88.4,129.7,87.6,131.4z"/>
				</g>
		</svg>

            
          
!
            
              body {
  background: #fe001a;
  text-align: center;
  margin-top: 4rem;
}
svg {
  width: 40%;
}
svg path {
  fill: #fff;
}      
svg g {
  transition: 1s;
}
#coke-singular {
  opacity: 0;
}
@media all and (max-width: 90rem) {
  #drink, #coke {
    opacity: 0;
  }
}
@media all and (max-width: 70rem) {
  #dynamic_curve {
    opacity: 0;
  }
}
@media all and (max-width: 50rem) {
  #coca-cola {
    opacity: 0;
  }
  #coke-singular {
    opacity: 1;
  }
}
            
          
!
999px
Loading ..................

Console