cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <div class="mug">
  <div class="cup">
    <!-- Mug text -->
    <svg viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve">
      <defs>
        <filter id="text-blur">
          <feGaussianBlur stdDeviation="0.5" />
        </filter>
      </defs>
      <g filter="url(#text-blur)">
        <!-- I -->
        <path d="M83.493,68.854c0.064-15.154,0.13-30.308,0.195-45.463c2.903,0.334,5.808,0.631,8.717,0.888
            c-0.049,15.156-0.1,30.312-0.148,45.468C89.333,69.489,86.411,69.192,83.493,68.854z"/>
        <!-- (square) -->
        <path fill="none" stroke="rgb(240,0,0)" stroke-width="6" stroke-miterlimit="10" d="M150.643,60.996c0,0-11.323,0.918-15.098,1.129
	c-3.774,0.211-15.097,0.561-15.097,0.561V31.43c0,0,11.322-0.527,15.097-0.805c3.774-0.277,15.098-1.416,15.098-1.416V60.996z"/>
        <!-- ICON -->
        <path d="M47.716,138.984c0.127-15.143,0.253-30.287,0.38-45.431c2.894,0.661,5.792,1.283,8.697,1.865
            c-0.111,15.147-0.222,30.293-0.333,45.441C53.539,140.274,50.625,139.649,47.716,138.984z"/>
        <path d="M92.822,129.318c2.851,1.186,5.706,2.333,8.562,3.442c-1.325,4.885-3.522,8.438-6.589,10.602
            c-3.066,2.167-6.953,3.021-11.647,2.48c-5.809-0.673-10.562-3.439-14.259-8.16c-3.698-4.724-5.515-10.708-5.467-17.856
            c0.049-7.568,1.951-13.094,5.703-16.678c3.753-3.589,8.666-4.956,14.761-4.26c5.323,0.606,9.649,2.615,12.975,6.148
            c1.979,2.088,3.462,4.973,4.448,8.672c-2.913,0.55-5.827,1.061-8.737,1.534c-0.509-2.403-1.579-4.357-3.21-5.879
            c-1.632-1.523-3.616-2.409-5.954-2.679c-3.229-0.372-5.849,0.488-7.869,2.626c-2.019,2.137-3.043,5.899-3.074,11.316
            c-0.033,5.745,0.935,9.991,2.906,12.709c1.969,2.718,4.545,4.279,7.725,4.648c2.345,0.271,4.368-0.294,6.065-1.679
            C90.853,134.918,92.076,132.584,92.822,129.318z"/>
        <path d="M107.197,124.492c0.006-4.633,0.681-8.491,2.017-11.586c0.998-2.281,2.357-4.315,4.079-6.117
            c1.72-1.802,3.604-3.137,5.652-4.016c2.724-1.186,5.863-1.803,9.418-1.888c6.438-0.156,11.587,1.614,15.458,5.495
            c3.872,3.876,5.822,9.464,5.848,16.869c0.023,7.337-1.873,13.27-5.71,17.694c-3.835,4.421-8.981,6.803-15.434,6.963
            c-6.532,0.158-11.729-1.968-15.577-6.183C109.099,137.504,107.186,131.726,107.197,124.492z M116.309,124.429
            c-0.001,5.148,1.142,9.072,3.436,11.738c2.294,2.663,5.208,3.977,8.743,3.891c3.531-0.085,6.429-1.53,8.685-4.279
            c2.259-2.754,3.379-6.783,3.367-12.057c-0.014-5.21-1.119-9.025-3.322-11.476c-2.201-2.451-5.119-3.605-8.758-3.516
            c-3.638,0.088-6.572,1.398-8.8,3.987C117.429,115.303,116.312,119.196,116.309,124.429z"/>
        <path d="M156.731,145.217c-0.062-15.154-0.127-30.31-0.19-45.464c2.851-0.317,5.699-0.673,8.542-1.067
            c5.978,9.299,11.963,18.431,17.945,27.393c-0.068-10.115-0.145-20.231-0.217-30.346c2.7-0.527,5.396-1.087,8.087-1.684
            c0.125,15.146,0.246,30.29,0.371,45.436c-2.923,0.646-5.852,1.253-8.782,1.817c-5.903-8.751-11.81-17.67-17.707-26.748
            c0.049,9.881,0.101,19.762,0.151,29.644C162.201,144.572,159.468,144.911,156.731,145.217z"/>
        <!-- FONTS -->
        <path d="M20.523,207.91c0.171-15.131,0.345-30.261,0.516-45.393c9.771,3.099,19.632,5.731,29.558,7.898
            c-0.021,2.562-0.042,5.124-0.062,7.688c-7.007-1.533-13.984-3.294-20.919-5.288c-0.037,3.583-0.074,7.165-0.111,10.747
            c5.994,1.723,12.018,3.274,18.067,4.652c-0.021,2.562-0.043,5.124-0.065,7.687c-6.055-1.382-12.084-2.932-18.083-4.657
            c-0.067,6.432-0.135,12.864-0.202,19.295C26.317,209.706,23.417,208.829,20.523,207.91z"/>
        <path d="M55.885,194.561c0.035-4.63,0.728-8.378,2.079-11.262c1.008-2.122,2.377-3.94,4.106-5.468
            c1.729-1.53,3.62-2.564,5.673-3.12c2.73-0.754,5.878-0.871,9.445-0.394c6.458,0.862,11.63,3.444,15.51,7.937
            c3.878,4.483,5.815,10.38,5.797,17.785c-0.019,7.336-1.971,12.967-5.862,16.785c-3.891,3.812-9.084,5.378-15.557,4.518
            c-6.554-0.876-11.736-3.822-15.553-8.646C57.703,207.869,55.831,201.789,55.885,194.561z M64.981,195.944
            c-0.032,5.146,1.088,9.249,3.368,12.277c2.28,3.025,5.191,4.8,8.734,5.271c3.544,0.476,6.464-0.511,8.75-2.906
            c2.285-2.395,3.439-6.247,3.457-11.517c0.019-5.211-1.075-9.198-3.273-11.994c-2.2-2.801-5.127-4.416-8.777-4.902
            c-3.649-0.486-6.594,0.359-8.841,2.592C66.154,186.998,65.017,190.713,64.981,195.944z"/>
        <path d="M105.504,223.113c0.026-15.158,0.052-30.317,0.079-45.473c2.884,0.13,5.771,0.226,8.657,0.283
            c6.006,10.236,12.036,20.312,18.082,30.22c-0.016-10.122-0.028-20.246-0.041-30.368c2.755-0.1,5.511-0.231,8.262-0.398
            c0.035,15.156,0.068,30.314,0.105,45.472c-2.988,0.183-5.979,0.324-8.971,0.425c-5.964-9.684-11.912-19.528-17.838-29.537
            c-0.008,9.884-0.015,19.769-0.023,29.654C111.042,223.332,108.273,223.24,105.504,223.113z"/>
        <path d="M160.027,221.088c-0.058-12.59-0.113-25.18-0.171-37.772c-4.342,0.526-8.694,0.962-13.048,1.312
            c-0.01-2.564-0.017-5.13-0.022-7.694c11.651-0.937,23.272-2.494,34.819-4.685c0.019,2.562,0.035,5.124,0.054,7.688
            c-4.305,0.815-8.62,1.543-12.944,2.185c0.069,12.589,0.14,25.178,0.208,37.767C165.961,220.331,162.996,220.728,160.027,221.088z"
            />
        <path d="M185.279,202.234c2.857-0.862,5.712-1.764,8.56-2.704c0.539,2.878,1.603,4.839,3.188,5.87
            c1.583,1.031,3.713,1.215,6.373,0.526c2.819-0.731,4.933-1.944,6.345-3.593c1.413-1.649,2.107-3.318,2.092-4.988
            c-0.013-1.074-0.32-1.899-0.927-2.486c-0.608-0.583-1.659-0.942-3.159-1.09c-1.027-0.093-3.359-0.114-7.018-0.148
            c-4.703-0.043-8.022-0.808-9.936-2.171c-2.694-1.918-4.056-4.698-4.081-8.294c-0.02-2.312,0.595-4.606,1.835-6.888
            c1.241-2.278,3.037-4.203,5.386-5.795c2.349-1.595,5.184-2.798,8.503-3.652c5.421-1.396,9.492-1.328,12.241,0.36
            c2.749,1.684,4.215,4.564,4.396,8.691c-2.882,1.037-5.773,2.035-8.671,2.991c-0.396-2.229-1.211-3.681-2.446-4.366
            c-1.237-0.685-3.08-0.696-5.538-0.063c-2.534,0.65-4.521,1.678-5.95,3.115c-0.921,0.923-1.376,1.971-1.366,3.146
            c0.01,1.074,0.451,1.895,1.325,2.45c1.115,0.708,3.808,1.088,8.064,1.027c4.255-0.068,7.397,0.114,9.433,0.644
            c2.037,0.526,3.634,1.578,4.801,3.175c1.164,1.596,1.762,3.823,1.794,6.693c0.029,2.6-0.624,5.255-1.969,7.949
            c-1.345,2.695-3.263,4.976-5.767,6.812c-2.502,1.834-5.635,3.269-9.405,4.244c-5.488,1.419-9.736,1.047-12.714-0.963
            C187.692,210.721,185.894,207.201,185.279,202.234z"/>
      </g>
    </svg>
  </div>
  <div class="handle"></div>
</div>
            
          
!
            
              $color: rgb(240,240,240);
$size: 300px;

body {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	height: 100vh;
  margin: 0;
  perspective: $size;
}
.mug {
  display: flex;
	display: -webkit-flex;
	display: -ms-flex;
  align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
  margin: auto;
  width: $size;
  height: $size;
  transform: rotateX(-4deg);
}
.cup {
  background: {
    color: $color;
    image: linear-gradient(
    	90deg,
    	rgba(255,255,255,0),
      	$color*1.067 15%,
        $color*1.067 25%,
        rgba(255,255,255,0),
        $color*1.067 75%,
        $color*1.067 85%,
        rgba(255,255,255,0)
      ),
      linear-gradient(
        rgba(255,255,255,0),
        $color*0.98
      );
  }
  border-radius: #{$size / 2} / #{$size * 0.1667};
  box-shadow: 0 0 ($size * 0.0139) ($size * 0.0028) $color*0.99 inset;
  position: relative;
  text-align: center;
  width: $size * 0.7222;
  height: $size;
  &::before, &::after {
		border-radius: 50%;
		content: "";
		display: block;
  }
  &::before {
		background-image:
  		radial-gradient(
    		($size * 0.1) ($size * 0.1) at 20% -22%,
      		rgba(255,255,255,1) 80%,
        	rgba(255,255,255,0)
    	),
    	radial-gradient(
    		($size * 0.1) ($size * 0.1) at 80% -22%,
      		rgba(255,255,255,1) 80%,
        	rgba(255,255,255,0)
    	),
  		radial-gradient(
    		100% 100% at center bottom,
      		$color*0.85 30%,
      		$color*0.98 75%,
      		$color
      	);
		box-shadow: 0 0 ($size * 0.0028) ($size * 0.0028) $color inset;
		margin: ($size * 0.02) auto;
		width: $size * 0.667;
		height: $size * 0.2361;
  }
  &::after {
		box-shadow: 0 0 ($size * 0.0333) ($size * 0.0222) rgb(216, 216, 216);
		position: absolute;
		bottom: 0;
		width: 100%;
		height: $size * 0.2667;
		z-index: -1;
  }
}
svg {
  width: $size * 0.6667;
  height: $size * 0.6667;
}
.handle {
  background: {
    color: $color;
    image: radial-gradient(($size * 0.07) ($size * 0.07) at 52% 19%, rgba(255,255,255,1) 70%, rgba(255,255,255,0));
  };
  border-radius: #{$size*0.1667} #{$size*0.5556} #{$size*0.5556} #{$size*0.1667} / #{$size*0.0278} #{$size*0.6111} #{$size*0.6111} #{$size*0.0278};
  box-shadow: (-$size*0.0056) 0 ($size*0.0056) ($size*0.0056) rgb(255,255,255) inset;
  width: $size * 0.2778;
  height: $size * 0.6111;
  &::before {
  	background: rgb(255,255,255);
		border-radius: 30% 100% 100% 20% / 15% 50% 50% 20%;
		box-shadow: 0 0 ($size*0.0278) ($size*0.0056) rgb(255,255,255), 0 0 ($size*0.025) ($size*0.05) ($color*0.95);
		content: "";
		display: block;
		margin: 30% auto auto 0;
		width: 70%;
		height: 70%;
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console