- object.svg
- style.css
SVG
<svg>
<g id="fish">
<path fill="olivedrab" d="M81.592.37c19.9 2.102 39.47 13.838 58.707 35.207L90.11 38.462C88.937 25.884 86.097 13.186 81.592.37zM99.354 150c12.867-1.36 25.852-9.268 38.954-23.727l-32.45-1.865c-1.423 8.774-3.59 17.305-6.504 25.592zM59.08 81.25c0 27.163-58.707 53.685-58.707 54.327C17.8 89.394 17.765 81.25.373 26.923c0 .952 58.707 27.164 58.707 54.327z"/>
<path fill="yellowgreen" d="M120.398 128.846c29.31 0 55.843-16.025 79.602-48.077-23.76-32.052-50.293-48.078-79.602-48.078-43.963 0-79.602 21.525-79.602 48.077 0 26.55 35.64 48.076 79.602 48.076z"/>
<path fill="gold" d="M139.13 126.32c23.436-5.678 43.726-20.86 60.87-45.55-20.02-27.17-40.293-42.348-60.818-45.537-30.57 31.603-18.83 65.88-.052 91.086z"/>
<g transform="translate(129.353 43.27)">
<ellipse cx="22.886" cy="23.077" fill="#FFF" rx="16.915" ry="16.346"/>
<circle cx="30.348" cy="24.519" r="7"/>
<circle r="2" cx="32" cy="22" fill="white"/>
<path fill="darkorange" d="M37.683 15.49C34.01 7.243 24.116 3.637 15.58 7.437c-8.533 3.8-12.475 13.566-8.803 21.813l30.906-13.76z"/>
</g>
<path fill="saddlebrown" stroke="darkorange" stroke-width="3" d="M195.788 86.538c1.728 0 3.13-2.583 3.13-5.77 0-3.185-1.402-5.768-3.13-5.768-1.73 0-3.13 2.583-3.13 5.77 0 3.185 1.4 5.768 3.13 5.768z"/>
</g>
</svg>
CSS
svg {
background-color: #ffffff;
border: 1px solid #dddddd;
}
- Goal
- Result
- Overlay
- Differences
- ?
Press Compare to send your code for review.