CodePen

HTML

            
              <object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgd2lkdGg9IjYxMnB4IiBoZWlnaHQ9IjUwMi4xNzRweCIgdmlld0JveD0iMCA2NS4zMjYgNjEyIDUwMi4xNzQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCA2NS4zMjYgNjEyIDUwMi4xNzQiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJsb2dvIj4KCiAgIDxzdHlsZT4KICAgLmdyb3VuZCB7CiAgZmlsbDogIzc4N2Y2YTsKfQouZ3JvdW5kOmhvdmVyIHsKICBmaWx0ZXI6IHVybCgjcGljdHVyZUZpbHRlcik7CiAgZmlsbDogIzg5NmQzZDsKfTwvc3R5bGU+Cgo8ZWxsaXBzZSBjbGFzcz0iZ3JvdW5kIiBjeD0iMjgzLjUiIGN5PSI0ODcuNSIgcng9IjI1OSIgcnk9IjgwIi8+CjxwYXRoIGNsYXNzPSJraXdpIiBkPSJNMjEwLjMzMyw2NS4zMzFDMTA0LjM2Nyw2Ni4xMDUtMTIuMzQ5LDE1MC42MzcsMS4wNTYsMjc2LjQ0OWM0LjMwMyw0MC4zOTMsMTguNTMzLDYzLjcwNCw1Mi4xNzEsNzkuMDMKICBjMzYuMzA3LDE2LjU0NCw1Ny4wMjIsNTQuNTU2LDUwLjQwNiwxMTIuOTU0Yy05LjkzNSw0Ljg4LTE3LjQwNSwxMS4wMzEtMTkuMTMyLDIwLjAxNWM3LjUzMS0wLjE3LDE0Ljk0My0wLjMxMiwyMi41OSw0LjM0MQogIGMyMC4zMzMsMTIuMzc1LDMxLjI5NiwyNy4zNjMsNDIuOTc5LDUxLjcyYzEuNzE0LDMuNTcyLDguMTkyLDIuODQ5LDguMzEyLTMuMDc4YzAuMTctOC40NjctMS44NTYtMTcuNDU0LTUuMjI2LTI2LjkzMwogIGMtMi45NTUtOC4zMTMsMy4wNTktNy45ODUsNi45MTctNi4xMDZjNi4zOTksMy4xMTUsMTYuMzM0LDkuNDMsMzAuMzksMTMuMDk4YzUuMzkyLDEuNDA3LDUuOTk1LTMuODc3LDUuMjI0LTYuOTkxCiAgYy0xLjg2NC03LjUyMi0xMS4wMDktMTAuODYyLTI0LjUxOS0xOS4yMjljLTQuODItMi45ODQtMC45MjctOS43MzYsNS4xNjgtOC4zNTFsMjAuMjM0LDIuNDE1YzMuMzU5LDAuNzYzLDQuNTU1LTYuMTE0LDAuODgyLTcuODc1CiAgYy0xNC4xOTgtNi44MDQtMjguODk3LTEwLjA5OC01My44NjQtNy43OTljLTExLjYxNy0yOS4yNjUtMjkuODExLTYxLjYxNy0xNS42NzQtODEuNjgxYzEyLjYzOS0xNy45MzgsMzEuMjE2LTIwLjc0LDM5LjE0Nyw0My40ODkKICBjLTUuMDAyLDMuMTA3LTExLjIxNSw1LjAzMS0xMS4zMzIsMTMuMDI0YzcuMjAxLTIuODQ1LDExLjIwNy0xLjM5OSwxNC43OTEsMGMxNy45MTIsNi45OTgsMzUuNDYyLDIxLjgyNiw1Mi45ODIsMzcuMzA5CiAgYzMuNzM5LDMuMzAzLDguNDEzLTEuNzE4LDYuOTkxLTYuMDM0Yy0yLjEzOC02LjQ5NC04LjA1My0xMC42NTktMTQuNzkxLTIwLjAxNmMtMy4yMzktNC40OTUsNS4wMy03LjA0NSwxMC44ODYtNi44NzYKICBjMTMuODQ5LDAuMzk2LDIyLjg4Niw4LjI2OCwzNS4xNzcsMTEuMjE4YzQuNDgzLDEuMDc2LDkuNzQxLTEuOTY0LDYuOTE3LTYuOTE3Yy0zLjQ3Mi02LjA4NS0xMy4wMTUtOS4xMjQtMTkuMTgtMTMuNDEzCiAgYy00LjM1Ny0zLjAyOS0zLjAyNS03LjEzMiwyLjY5Ny02LjYwMmMzLjkwNSwwLjM2MSw4LjQ3OCwyLjI3MSwxMy45MDgsMS43NjdjOS45NDYtMC45MjUsNy43MTctNy4xNjktMC44ODMtOS41NjYKICBjLTE5LjAzNi01LjMwNC0zOS44OTEtNi4zMTEtNjEuNjY1LTUuMjI1Yy00My44MzctOC4zNTgtMzEuNTU0LTg0Ljg4NywwLTkwLjM2M2MyOS41NzEtNS4xMzIsNjIuOTY2LTEzLjMzOSw5OS45MjgtMzIuMTU2CiAgYzMyLjY2OC01LjQyOSw2NC44MzUtMTIuNDQ2LDkyLjkzOS0zMy44NWM0OC4xMDYtMTQuNDY5LDExMS45MDMsMTYuMTEzLDIwNC4yNDEsMTQ5LjY5NWMzLjkyNiw1LjY4MSwxNS44MTksOS45NCw5LjUyNC02LjM1MQogIGMtMTUuODkzLTQxLjEyNS02OC4xNzYtOTMuMzI4LTkyLjEzLTEzMi4wODVjLTI0LjU4MS0zOS43NzQtMTQuMzQtNjEuMjQzLTM5Ljk1Ny05MS4yNDcKICBjLTIxLjMyNi0yNC45NzgtNDcuNTAyLTI1LjgwMy03Ny4zMzktMTcuMzY1Yy0yMy40NjEsNi42MzQtMzkuMjM0LTcuMTE3LTUyLjk4LTMxLjI3M0MzMTguNDIsODcuNTI1LDI2NS44MzgsNjQuOTI3LDIxMC4zMzMsNjUuMzMxCiAgeiBNNDQ1LjczMSwyMDMuMDFjNi4xMiwwLDExLjExMiw0LjkxOSwxMS4xMTIsMTEuMDM4YzAsNi4xMTktNC45OTQsMTEuMTExLTExLjExMiwxMS4xMTFzLTExLjAzOC00Ljk5NC0xMS4wMzgtMTEuMTExCiAgQzQzNC42OTMsMjA3LjkyOSw0MzkuNjEzLDIwMy4wMSw0NDUuNzMxLDIwMy4wMXoiLz4KPGZpbHRlciBpZD0icGljdHVyZUZpbHRlciIgPgogIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE1IiAvPgo8L2ZpbHRlcj4KPC9zdmc+">
    <img src="fallback.png">
</object>
  
<img src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgd2lkdGg9IjYxMnB4IiBoZWlnaHQ9IjUwMi4xNzRweCIgdmlld0JveD0iMCA2NS4zMjYgNjEyIDUwMi4xNzQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCA2NS4zMjYgNjEyIDUwMi4xNzQiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJsb2dvIj4KCiAgIDxzdHlsZT4KICAgLmdyb3VuZCB7CiAgZmlsbDogIzc4N2Y2YTsKfQouZ3JvdW5kOmhvdmVyIHsKICBmaWx0ZXI6IHVybCgjcGljdHVyZUZpbHRlcik7CiAgZmlsbDogIzg5NmQzZDsKfTwvc3R5bGU+Cgo8ZWxsaXBzZSBjbGFzcz0iZ3JvdW5kIiBjeD0iMjgzLjUiIGN5PSI0ODcuNSIgcng9IjI1OSIgcnk9IjgwIi8+CjxwYXRoIGNsYXNzPSJraXdpIiBkPSJNMjEwLjMzMyw2NS4zMzFDMTA0LjM2Nyw2Ni4xMDUtMTIuMzQ5LDE1MC42MzcsMS4wNTYsMjc2LjQ0OWM0LjMwMyw0MC4zOTMsMTguNTMzLDYzLjcwNCw1Mi4xNzEsNzkuMDMKICBjMzYuMzA3LDE2LjU0NCw1Ny4wMjIsNTQuNTU2LDUwLjQwNiwxMTIuOTU0Yy05LjkzNSw0Ljg4LTE3LjQwNSwxMS4wMzEtMTkuMTMyLDIwLjAxNWM3LjUzMS0wLjE3LDE0Ljk0My0wLjMxMiwyMi41OSw0LjM0MQogIGMyMC4zMzMsMTIuMzc1LDMxLjI5NiwyNy4zNjMsNDIuOTc5LDUxLjcyYzEuNzE0LDMuNTcyLDguMTkyLDIuODQ5LDguMzEyLTMuMDc4YzAuMTctOC40NjctMS44NTYtMTcuNDU0LTUuMjI2LTI2LjkzMwogIGMtMi45NTUtOC4zMTMsMy4wNTktNy45ODUsNi45MTctNi4xMDZjNi4zOTksMy4xMTUsMTYuMzM0LDkuNDMsMzAuMzksMTMuMDk4YzUuMzkyLDEuNDA3LDUuOTk1LTMuODc3LDUuMjI0LTYuOTkxCiAgYy0xLjg2NC03LjUyMi0xMS4wMDktMTAuODYyLTI0LjUxOS0xOS4yMjljLTQuODItMi45ODQtMC45MjctOS43MzYsNS4xNjgtOC4zNTFsMjAuMjM0LDIuNDE1YzMuMzU5LDAuNzYzLDQuNTU1LTYuMTE0LDAuODgyLTcuODc1CiAgYy0xNC4xOTgtNi44MDQtMjguODk3LTEwLjA5OC01My44NjQtNy43OTljLTExLjYxNy0yOS4yNjUtMjkuODExLTYxLjYxNy0xNS42NzQtODEuNjgxYzEyLjYzOS0xNy45MzgsMzEuMjE2LTIwLjc0LDM5LjE0Nyw0My40ODkKICBjLTUuMDAyLDMuMTA3LTExLjIxNSw1LjAzMS0xMS4zMzIsMTMuMDI0YzcuMjAxLTIuODQ1LDExLjIwNy0xLjM5OSwxNC43OTEsMGMxNy45MTIsNi45OTgsMzUuNDYyLDIxLjgyNiw1Mi45ODIsMzcuMzA5CiAgYzMuNzM5LDMuMzAzLDguNDEzLTEuNzE4LDYuOTkxLTYuMDM0Yy0yLjEzOC02LjQ5NC04LjA1My0xMC42NTktMTQuNzkxLTIwLjAxNmMtMy4yMzktNC40OTUsNS4wMy03LjA0NSwxMC44ODYtNi44NzYKICBjMTMuODQ5LDAuMzk2LDIyLjg4Niw4LjI2OCwzNS4xNzcsMTEuMjE4YzQuNDgzLDEuMDc2LDkuNzQxLTEuOTY0LDYuOTE3LTYuOTE3Yy0zLjQ3Mi02LjA4NS0xMy4wMTUtOS4xMjQtMTkuMTgtMTMuNDEzCiAgYy00LjM1Ny0zLjAyOS0zLjAyNS03LjEzMiwyLjY5Ny02LjYwMmMzLjkwNSwwLjM2MSw4LjQ3OCwyLjI3MSwxMy45MDgsMS43NjdjOS45NDYtMC45MjUsNy43MTctNy4xNjktMC44ODMtOS41NjYKICBjLTE5LjAzNi01LjMwNC0zOS44OTEtNi4zMTEtNjEuNjY1LTUuMjI1Yy00My44MzctOC4zNTgtMzEuNTU0LTg0Ljg4NywwLTkwLjM2M2MyOS41NzEtNS4xMzIsNjIuOTY2LTEzLjMzOSw5OS45MjgtMzIuMTU2CiAgYzMyLjY2OC01LjQyOSw2NC44MzUtMTIuNDQ2LDkyLjkzOS0zMy44NWM0OC4xMDYtMTQuNDY5LDExMS45MDMsMTYuMTEzLDIwNC4yNDEsMTQ5LjY5NWMzLjkyNiw1LjY4MSwxNS44MTksOS45NCw5LjUyNC02LjM1MQogIGMtMTUuODkzLTQxLjEyNS02OC4xNzYtOTMuMzI4LTkyLjEzLTEzMi4wODVjLTI0LjU4MS0zOS43NzQtMTQuMzQtNjEuMjQzLTM5Ljk1Ny05MS4yNDcKICBjLTIxLjMyNi0yNC45NzgtNDcuNTAyLTI1LjgwMy03Ny4zMzktMTcuMzY1Yy0yMy40NjEsNi42MzQtMzkuMjM0LTcuMTE3LTUyLjk4LTMxLjI3M0MzMTguNDIsODcuNTI1LDI2NS44MzgsNjQuOTI3LDIxMC4zMzMsNjUuMzMxCiAgeiBNNDQ1LjczMSwyMDMuMDFjNi4xMiwwLDExLjExMiw0LjkxOSwxMS4xMTIsMTEuMDM4YzAsNi4xMTktNC45OTQsMTEuMTExLTExLjExMiwxMS4xMTFzLTExLjAzOC00Ljk5NC0xMS4wMzgtMTEuMTExCiAgQzQzNC42OTMsMjA3LjkyOSw0MzkuNjEzLDIwMy4wMSw0NDUuNzMxLDIwMy4wMXoiLz4KPGZpbHRlciBpZD0icGljdHVyZUZpbHRlciIgPgogIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE1IiAvPgo8L2ZpbHRlcj4KPC9zdmc+">
            
          
!

CSS

            
              .logo {
  width: 200px;
  height: 164px;
}

.kiwi {
  fill: #94d31b; 
  
  // stroke: #909;
	// stroke-width: 10;
  
  // not sure which of these is correct
  // stroke-linejoin: butt | round | square;
  // stroke-linecap: butt | round | square;
  
  // stroke-dasharray: 5, 5, 10;
  
  // filter: url(#pictureFilter);
  // mask: url(#f1);
  // clip-path: url();
}
.kiwi:hover {
  fill: #ace63c; 
}

.ground {
  fill: #787f6a;
}
.ground:hover {
  filter: url(#pictureFilter);
  fill: #896d3d;
}

body {
  padding: 20px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................