- object.svg
- style.css
SVG
<svg viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice" width="250" height="400">
<rect width="100%" height="100%" fill="none" stroke="yellowgreen" />
<g fill="orange" stroke="saddlebrown" stroke-width="15">
<circle r="23" cx="32" cy="31" />
<circle r="23" cx="168" cy="31" />
</g>
<ellipse fill="saddlebrown" rx="84" ry="70" cx="100" cy="80" />
<circle fill="none" stroke="#000000" stroke-opacity="0.5" stroke-width="3" r="4" cx="100" cy="135" />
<g>
<ellipse fill="orange" rx="24" ry="28" cx="77" cy="78" transform="rotate(-30,77,78)" />
<ellipse fill="white" rx="14" ry="16" cx="79" cy="83" transform="rotate(-30,79,83)" />
<circle fill="black" r="9" cx="82" cy="87" />
<circle fill="white" r="3" cx="84" cy="83" />
</g>
<g>
<ellipse fill="orange" rx="24" ry="28" cx="123" cy="78" transform="rotate(30,123,78)" />
<ellipse fill="white" rx="14" ry="16" cx="120" cy="83" transform="rotate(30,120,83)" />
<circle fill="black" r="9" cx="118" cy="87" />
<circle fill="white" r="3" cx="121" cy="83" />
</g>
<g stroke="#000000" stroke-opacity="0.5" stroke-width="5" stroke-linecap="round">
<path d="M55,45 68,42" />
<path d="M145,45 135,42" />
</g>
<g>
<ellipse fill="black" rx="25" ry="15" cx="100" cy="107" />
<ellipse fill="white" fill-opacity="0.1" rx="17" ry="9" cx="102" cy="103" />
<ellipse fill="white" fill-opacity="0.1" rx="8" ry="4" cx="104" cy="100" />
</g>
</svg>
CSS
svg {
border: 2px solid teal;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Remove the
viewBoxand see how the content behaves.
Comments