[SVG] 아까네코 종이모형

Posted at 2012.02.07 11:37 | Posted in 프로그램

하드코딩으로도 그림을 그릴 수 있다? SVG로 벡터형식의 그림을 그려보세요!
사용하시는 브라우저에 따라 그림이 표시되지 않을 수 있습니다. Chrome 16+ 버전에서 잘 보입니다.

그림이 안보이면 클릭하세요(svg그림을 캡쳐한 이미지가 표시됩니다)
소스
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full" width="255" height="380" stroke-width="8">
	<defs fill="white" stroke="white">
		<mask id="tonguemask">
			<path d="M 27 10 c -30 130 116 130 86 0" stroke="black" />
		</mask>
		<mask id="bodymask">
			<polygon points="0,0 -70,410 510,410 420,0" />
		</mask>
		<mask id="footmask">
			<polygon points="-200,0 -200,-300 200,-300 200,0" />
		</mask>
		<mask id="footlinemask">
			<ellipse cx="0" cy="-100" rx="95" ry="120" />
		</mask>
	</defs>
<g transform="scale(0.3)" fill="black" stroke="black">
	<g id="ear1" transform="translate(5,270)">
		<path d="M 0 0 c 0 -350 160 -350 350 0" fill="#d50c0f" />
		<path d="M 0 0 c 0 -350 160 -350 290 0" />
	</g>
	<g id="ear2" transform="translate(845,270)">
		<path d="M 0 0 c 0 -350 -160 -350 -350 0" fill="#d50c0f" />
		<path d="M 0 0 c 0 -350 -160 -350 -290 0" />
	</g>
		
	<g id="body" transform="translate(210,850)">
		<polygon points="0,0 -70,410 510,410 420,0" fill="#d50c0f" />
		<g id="hand" mask="url(#bodymask)">
			<line x1="-70" x2="70" y1="0" y2="140" stroke-width="89" />
			<circle cx="70" cy="140" r="40" />
		</g>
		<g id="hand2" mask="url(#bodymask)">
			<line x1="490" x2="340" y1="0" y2="140" stroke-width="89" />
			<circle cx="340" cy="140" r="40" />
		</g>
		<g id="foot" transform="translate(-20,410)">
			<ellipse cx="0" cy="-100" rx="95" ry="120" fill="#d50c0f" mask="url(#footmask)" />
			<line x1="-60" x2="60" y1="0" y2="0" mask="url(#footlinemask)" />
			<g id="toenail">
				<circle cx="-55" cy="-140" r="15" />
			</g>
			<use xlink:href="#toenail" transform="translate(30,-40)" />
			<use xlink:href="#toenail" transform="translate(75,-40)" />
			<use xlink:href="#toenail" transform="translate(110,0)" />
			<ellipse cx="0" cy="-70" rx="55" ry="45" />
		</g>
		<use xlink:href="#foot" transform="translate(480,0)" />
	</g>
	
	<g id="face" transform="translate(5,265)">
		<rect width="840" height="588" fill="#d50c0f" />
		<g id="eye" transform="translate(210,300)">
			<circle r="120" fill="white" stroke-width="10" />
			<circle r="100" />
		</g>
		<use xlink:href="#eye" transform="translate(420,0)" />
		<g id="mouth" transform="translate(350,370)">
			<path d="M 27 10 c -30 130 116 130 86 0" fill="#feb6b6" />
			<path d="M 27 110 c 0 -70 86 -70 86 0" fill="#b91f6e" mask="url(#tonguemask)" />
			<path d="M 0 0 q 30 40 70 10 M 70 10 q 40 30 70 -10" fill="#d50c0f" />
			<circle cx="70" r="8" />
		</g>
		<g id="beard" transform="translate(5,440)">
			<path d="M 0 0 q 50 -12 80 -6" />
		</g>
		<use xlink:href="#beard" transform="rotate(-10),translate(-80,42)" />
		<use xlink:href="#beard" transform="rotate(-20),translate(-167,70)" />
		<g id="beard2" transform="translate(755,440)">
			<path d="M 0 -6 q 30 -6 80 6" />
		</g>
		<use xlink:href="#beard2" transform="rotate(10),translate(67,-103)" />
		<use xlink:href="#beard2" transform="rotate(20),translate(117,-217)" />
	</g>
</g>
</svg>
저작자 표시 비영리
신고
  1. 언제봐도 고양이는 귀엽긔

Name __

Password __

Link (Your Website)

Comment