.compass {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 20px auto;
  background: #222;
  padding: 20px;
  border-radius: 40px;
  border: 5px solid #444;
  overflow: hidden;
}

.compass .disc {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 200;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYWFnXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iODg1LjM4NnB4IiBoZWlnaHQ9Ijg4NS4zODVweCIgdmlld0JveD0iMCAwIDg4NS4zODYgODg1LjM4NSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODg1LjM4NiA4ODUuMzg1IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Y2lyY2xlIGZpbGw9IiNCRTE2MjIiIGN4PSI0NDIuNjkyIiBjeT0iNDQyLjY5MyIgcj0iNDI1LjYyMiIvPjxjaXJjbGUgZmlsbD0iIzQwOEFBNyIgY3g9IjQ0Mi42OTMiIGN5PSI0NDIuNjkzIiByPSIzODYuOTI5Ii8+PGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9IiMxQzc4OTQiIHN0cm9rZS13aWR0aD0iMzcwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjI4LjU3MzUsMjcuNTg4MiIgY3g9IjQ0Mi42OTIiIGN5PSI0NDIuNjkzIiByPSIyNTAuMjY2Ii8+PGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9IiM0MDhBQTciIHN0cm9rZS13aWR0aD0iMjAiIHN0cm9rZS1saW5lam9pbj0iYmV2ZWwiIGN4PSI0NDIuNjkzIiBjeT0iNDQyLjY5MyIgcj0iMzkwLjU2NiIvPjxwYXRoIGZpbGw9IiNGMUYyQzQiIGQ9Ik00NDIuNjkzLDI2YzIzMC4xMzIsMCw0MTYuNjkyLDE4Ni41Niw0MTYuNjkyLDQxNi42OTNjMCwyMzAuMTM0LTE4Ni41NjEsNDE2LjY5Mi00MTYuNjkyLDQxNi42OTJDMjEyLjU2LDg1OS4zODUsMjYsNjcyLjgyNywyNiw0NDIuNjkzQzI2LDIxMi41NiwyMTIuNTYsMjYsNDQyLjY5MywyNiBNNDQyLjY5MywwYy01OS43NTIsMC0xMTcuNzMsMTEuNzA4LTE3Mi4zMjQsMzQuOGMtNTIuNzE5LDIyLjI5OC0xMDAuMDYsNTQuMjE0LTE0MC43MDcsOTQuODYyQzg5LjAxNCwxNzAuMzEsNTcuMDk4LDIxNy42NSwzNC44LDI3MC4zNjlDMTEuNzA4LDMyNC45NjMsMCwzODIuOTQxLDAsNDQyLjY5M3MxMS43MDgsMTE3LjczLDM0LjgsMTcyLjMyNGMyMi4yOTgsNTIuNzE5LDU0LjIxNCwxMDAuMDYsOTQuODYyLDE0MC43MDdjNDAuNjQ3LDQwLjY0Nyw4Ny45ODgsNzIuNTYzLDE0MC43MDcsOTQuODYxYzU0LjU5NCwyMy4wOTIsMTEyLjU3MiwzNC44LDE3Mi4zMjQsMzQuOHMxMTcuNzI5LTExLjcwOCwxNzIuMzIzLTM0LjhjNTIuNzE5LTIyLjI5OCwxMDAuMDYtNTQuMjE0LDE0MC43MDctOTQuODYxczcyLjU2NC04Ny45ODgsOTQuODYyLTE0MC43MDdjMjMuMDkyLTU0LjU5NCwzNC44LTExMi41NzIsMzQuOC0xNzIuMzI0cy0xMS43MDgtMTE3LjczLTM0LjgtMTcyLjMyNGMtMjIuMjk4LTUyLjcxOS01NC4yMTUtMTAwLjA1OS05NC44NjItMTQwLjcwN0M3MTUuMDc2LDg5LjAxNCw2NjcuNzM1LDU3LjA5OCw2MTUuMDE3LDM0LjhDNTYwLjQyMywxMS43MDgsNTAyLjQ0NCwwLDQ0Mi42OTMsMEw0NDIuNjkzLDB6Ii8+PHBhdGggZmlsbD0iI0YxRjJDNCIgZD0iTTQ0Mi42OTMsNTAuMTY3YzUyLjk5OSwwLDEwNC40MDIsMTAuMzc1LDE1Mi43ODIsMzAuODM4YzQ2LjczOSwxOS43NjksODguNzIsNDguMDc0LDEyNC43NzQsODQuMTI5YzM2LjA1NiwzNi4wNTYsNjQuMzYsNzguMDM2LDg0LjEzLDEyNC43NzVjMjAuNDYzLDQ4LjM3OSwzMC44MzgsOTkuNzgzLDMwLjgzOCwxNTIuNzgzcy0xMC4zNzUsMTA0LjQwMy0zMC44MzgsMTUyLjc4M2MtMTkuNzcsNDYuNzM5LTQ4LjA3NCw4OC43MTktODQuMTMsMTI0Ljc3NGMtMzYuMDU1LDM2LjA1NS03OC4wMzUsNjQuMzYtMTI0Ljc3NCw4NC4xM2MtNDguMzgsMjAuNDYyLTk5Ljc4MywzMC44MzgtMTUyLjc4MiwzMC44MzhjLTUzLDAtMTA0LjQwMy0xMC4zNzYtMTUyLjc4My0zMC44MzhjLTQ2Ljc0LTE5Ljc3LTg4LjcyLTQ4LjA3NS0xMjQuNzc1LTg0LjEzYy0zNi4wNTYtMzYuMDU2LTY0LjM2MS03OC4wMzYtODQuMTMtMTI0Ljc3NWMtMjAuNDYzLTQ4LjM3OS0zMC44MzgtOTkuNzgzLTMwLjgzOC0xNTIuNzgyUzYwLjU0MiwzMzguMjksODEuMDA1LDI4OS45MWMxOS43NjktNDYuNzM5LDQ4LjA3NS04OC43Miw4NC4xMy0xMjQuNzc1YzM2LjA1NS0zNi4wNTYsNzguMDM2LTY0LjM2MSwxMjQuNzc1LTg0LjEzQzMzOC4yOSw2MC41NDIsMzg5LjY5NCw1MC4xNjcsNDQyLjY5Myw1MC4xNjcgTTQ0Mi42OTMsMzAuMTY3Yy0yMjcuODMyLDAtNDEyLjUyNywxODQuNjk0LTQxMi41MjcsNDEyLjUyNnMxODQuNjk1LDQxMi41MjUsNDEyLjUyNyw0MTIuNTI1YzIyNy44MzEsMCw0MTIuNTI0LTE4NC42OTMsNDEyLjUyNC00MTIuNTI1UzY3MC41MjQsMzAuMTY3LDQ0Mi42OTMsMzAuMTY3TDQ0Mi42OTMsMzAuMTY3eiIvPjxwb2x5Z29uIGZpbGw9IiMxQzc4OTQiIHBvaW50cz0iNTAwLjE0NSwzODUuMjQzIDYwNS4xOTIsNDQyLjY5MSA1MDAuMTQ3LDUwMC4xNDUgNDQyLjY5Miw2MDUuMTk0IDM4NS4yNDIsNTAwLjE0NiAyODAuMTkzLDQ0Mi42OTQgMzg1LjI0MSwzODUuMjM3IDQ0Mi42OTIsMjgwLjE5MSIvPjxwb2x5Z29uIGZpbGw9IiM0MDhBQTciIHBvaW50cz0iNDQyLjY5NCwzNjEuNDQ1IDU1Ny41OTcsMzI3Ljc4NyA1MjMuOTQ0LDQ0Mi42OTIgNTU3LjU5OSw1NTcuNTk4IDQ0Mi42OTMsNTIzLjk0MiAzMjcuNzksNTU3LjU5OCAzNjEuNDQyLDQ0Mi42OSAzMjcuNzg3LDMyNy43ODciLz48cG9seWdvbiBmaWxsPSIjNDA4QUE3IiBwb2ludHM9IjM5OC41MDEsMzk4LjUgNDQyLjY5MiwzMTcuNjkzIDQ4Ni44ODgsMzk4LjQ5OCA1NjcuNjk0LDQ0Mi42OTMgNDg2Ljg4OCw0ODYuODg2IDQ0Mi42OTQsNTY3LjY5MyAzOTguNDk3LDQ4Ni44ODYgMzE3LjY5Miw0NDIuNjkzIi8+PHBvbHlnb24gZmlsbD0iIzFDNzg5NCIgcG9pbnRzPSI0NDIuNjk0LDM4MC4xOTUgNTMxLjA4MSwzNTQuMzA0IDUwNS4xOTQsNDQyLjY5MiA1MzEuMDgyLDUzMS4wODIgNDQyLjY5NCw1MDUuMTkyIDM1NC4zMDYsNTMxLjA4MiAzODAuMTkyLDQ0Mi42OTEgMzU0LjMwNCwzNTQuMzA0Ii8+PHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA4NS43NjM3IDQ1OS44Nzc0KSIgZmlsbD0iI0YxRjJDNCIgZm9udC1mYW1pbHk9IidDZW50dXJ5JyIgZm9udC1zaXplPSI2MiI+VzwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDQxNy40Mjk3IDc4MC42MDk5KSIgZmlsbD0iI0YxRjJDNCIgZm9udC1mYW1pbHk9IidDZW50dXJ5JyIgZm9udC1zaXplPSI2MiI+UzwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDc0OS4wOTU3IDQ1OS44Nzc0KSIgZmlsbD0iI0YxRjJDNCIgZm9udC1mYW1pbHk9IidDZW50dXJ5JyIgZm9udC1zaXplPSI2MiI+RTwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDQxNy40Mjk3IDEzOS4xNDUpIiBmaWxsPSIjRjFGMkM0IiBmb250LWZhbWlseT0iJ0NlbnR1cnknIiBmb250LXNpemU9IjYyIj5OPC90ZXh0Pjwvc3ZnPg==);

  width: 260px;
  height: 260px;
  background-size: 100%;
}

.compass .arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYWFnXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iODg1LjM4N3B4IiBoZWlnaHQ9Ijg4NS4zODVweCIgdmlld0JveD0iMCAwIDg4NS4zODcgODg1LjM4NSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODg1LjM4NyA4ODUuMzg1IiB4bWw6c3BhY2U9InByZXNlcnZlIj48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMxQzc4OTQiIHN0cm9rZS13aWR0aD0iNS42Mjg1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI0NDYuMTE0IiB5MT0iMzg2LjMxNCIgeDI9IjQ0Ni4xMTQiIHkyPSI0OTguNCIvPjxwb2x5Z29uIGZpbGw9IiMxQzc4OTQiIHBvaW50cz0iNDAzLjY5Niw0NDAuNTk0IDQ0Ni4xMTQsMTI3LjIwNyA0ODguNTMxLDQ0MC41OTQiLz48cG9seWdvbiBmaWxsPSIjMUM3ODk0IiBwb2ludHM9IjQwMy42OTcsNDQwLjM1NyA0NDYuMTE0LDc1OC4wMTUgNDg4LjUzLDQ0MC4zNTciLz48Y2lyY2xlIGZpbGw9IiMxQzc4OTQiIGN4PSI0NDYuMTE1IiBjeT0iNDQ0LjExIiByPSIxMi41MDEiLz48Y2lyY2xlIGZpbGw9IiMxQzc4OTQiIGN4PSI0NDYuMTE0IiBjeT0iNDQ0LjExIiByPSI5Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQkUxNjIyIiBzdHJva2Utd2lkdGg9IjUuNjI4NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNDQyLjEwNiIgeTE9IjM4Ni4zMTQiIHgyPSI0NDIuMTA1IiB5Mj0iNDk4LjQiLz48cG9seWdvbiBmaWxsPSIjQkUxNjIyIiBwb2ludHM9IjM5OS42ODgsNDQwLjU5NCA0NDIuMTA2LDEyNy4yMDggNDg0LjUyMiw0NDAuNTk0Ii8+PHBvbHlnb24gZmlsbD0iI0Y2RjZGNiIgcG9pbnRzPSIzOTkuNjg4LDQ0MC4zNTYgNDQyLjEwNSw3NTguMDE0IDQ4NC41MjIsNDQwLjM1OCIvPjxjaXJjbGUgZmlsbD0iIzFDNzg5NCIgY3g9IjQ0Mi4xMDYiIGN5PSI0NDQuMTExIiByPSIxMi41MDEiLz48Y2lyY2xlIGZpbGw9IiM0MDhBQTciIGN4PSI0NDIuMTA2IiBjeT0iNDQ0LjExMSIgcj0iOSIvPjwvc3ZnPg==);

  width: 260px;
  height: 260px;
  background-size: 100%;
}