<div class="california-map">
  <div class="mark"></div>
   <svg
     width="400px" height="400px" viewBox="0 0 150 250">
  <path fill="#dbdbda" d="
    M127.694,241.198l3.939-0.489l1.486-2.011l0.545-2.941l-3.552-0.59l-0.514-0.669l0.477-2.031l-0.159-0.59l1.923-0.62l3.043-2.833
    l0.581-4.994l1.38-3.402l1.943-2.166l3.52-1.59l1.654-1.605l0.068-2.108l-0.993-0.58l-1.023-1.073l-1.155-5.848l-2.685-4.83
    l0.565-3.506l-2.42-1.029L67.258,91.514l18.901-67.602L19.08,8.214l-1.507,4.733l-0.162,7.437l-5.173,11.801l-3.072,2.586
    l-0.323,1.132l-1.778,0.808L5.61,40.915l-0.809,3.233l2.748,4.203l1.616,4.203l1.132,3.557l-0.323,6.466l-1.778,3.071l-0.646,5.82
    l-0.97,3.718l1.778,3.88l2.748,4.526l2.264,4.85l1.293,4.042l-0.323,3.233l-0.323,0.485v2.102l5.658,6.305l-0.485,2.425
    l-0.646,2.263l-0.646,1.94l0.161,8.245l2.102,3.718l1.94,2.586l2.748,0.485l0.97,2.748l-1.132,3.557l-2.102,1.617h-1.131
    l-0.809,3.879l0.484,2.91l3.233,4.365l1.617,5.334l1.455,4.688l1.293,3.071l3.395,5.82l1.455,2.586l0.485,2.91l1.616,0.971v2.424
    l-0.809,1.94l-1.778,7.113l-0.484,1.94l2.425,2.748l4.203,0.484l4.526,1.778l3.88,2.102h2.91l2.91,3.071l2.586,4.85l1.132,2.264
    l3.88,2.102l4.85,0.809l1.455,2.102l0.646,3.232l-1.455,0.647l0.323,0.97l3.233,0.809l2.748,0.162l3.16-1.688l3.88,4.203
    l0.809,2.264l2.586,4.203l0.323,3.232v9.377l0.485,1.778l10.023,1.454l19.723,2.749L127.694,241.198z M39.559,197.481l1.294,1.536
    l-0.162,1.293l-3.233-0.081l-0.565-1.212l-0.646-1.455L39.559,197.481z M41.499,197.481l1.212-0.646l3.557,2.102l3.072,1.212
    l-0.89,0.646l-4.526-0.242l-1.616-1.616L41.499,197.481z M62.191,217.285l1.778,2.344l0.809,0.971l1.535,0.565l0.566-1.455
    l-0.97-1.778l-2.668-2.021l-1.051,0.162V217.285z M60.736,225.934l1.778,3.152l1.213,1.94l-1.455,0.242l-1.293-1.212
    c0,0-0.728-1.455-0.728-1.859s0-2.183,0-2.183L60.736,225.934z"/>
  </svg>
</div>

@import "compass/css3";

html, body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.california-map {
  left: 50%;
  margin-left: -200px;
  position: absolute;
  
   &:before {
    background-color: #22cbe9;
    border-radius: 50%;
    content:'';
    height: 20px;
    left: 104px;
    position: absolute;
    top: 155px;
    width: 20px;
  }

}

.mark {
  background-color: rgba(34, 203, 233, .2);
  border-radius: 50%;
  height: 50px;
  left: 90px;
  position: absolute;
  top: 140px;
  width: 50px;
  animation: markPulse 3s ease-out infinite;
}

@keyframes markPulse {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
   transform: scale(0, 0); 
  }
}

/*
*
* Saw Kerem's shot on dribbble showing his 
* progress on his website and thought
* it would be cool way to show off the beauty
* of vectors and css3 animations.  
* 
* SVG code was made in illustrator.
* 
* See his beautiful shot http://drbl.in/glCU
*/