<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);
}
}
View Compiled
/*
*
* 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
*/
This Pen doesn't use any external CSS resources.