SVGを使ったおもちゃ病院ドクター
SVGを使ったおもちゃ病院ドクター
赤いテスターピンを触ってみてね
<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clip"><rect x="0" y="0" width="256" height="256"/></clipPath>
<radialGradient id="gradient1"><stop offset="0%" stop-color="rgb(200,200,200)"/><stop offset="90%" stop-color="black"/></radialGradient>
<symbol id="Ppoi">
<ellipse cx="15" cy="15" rx="7" ry="10" fill="rgb(150,150,200)"/>
<ellipse cx="11" cy="20" rx="2.1" ry="3" fill="rgb(100,100,150)"/>
<ellipse cx="19" cy="20" rx="2.1" ry="3" fill="rgb(100,100,150)"/>
<rect fill="rgb(0,0,0)" x="14" y="2" width="2" height="6"/>
</symbol>
</defs>
<g id="omochaHospital" stroke="black" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" fill="none" clip-path="url(#clip)">
<!-- clothes -->
<path stroke-width="none" fill="red" d="M 105,115 L 145,114 L 140,195 L 98,194 Z"/>
<path fill="white" d="M 109,112 C 84,112 48,144 48,170 C 48,181 52,198 103,198 C 103,175 108,126 109,112 Z"/>
<path fill="white" d="M 94,111 C 94,113 87,119 84,122 C 90,127 92,128 96,133 C 94,136 94,136 90,139 C 97,145 98,150 105,154 C 104,147 109,114 109,114 Z"/>
<path fill="white" d="M 141,109 C 141,126 134,194 134,199 C 183,199 195,189 195,170 C 195,139 164,109 142,109 Z"/>
<path fill="white" d="M 141,105 C 149,107 157,110 162,116 C 158,125 156,122 151,129 C 155,131 155,131 158,134 C 150,147 146,153 137,159 Z"/>
<path fill="white" d="M 163,155 C 159,162 150,162 147,169"/>
<!-- face -->
<path fill="rgb(250,200,160)" d="M 77,91 C 70,95 57,85 57,78 C 57,63 59,61 72,65 Z"/>
<path fill="rgb(250,200,160)" d="M 157,72 C 171,73 175,68 175,52 C 175,36 163,36 150,43 Z"/>
<path fill="rgb(250,200,160)" d="M 128,124 C 102,124 83,116 73,82 C 62,43 70,29 98,18 C 143,3 162,33 162,70 C 162,116 136,124 128,124 Z"/>
<path fill="black" d="M 91,77 C 91,76 94,76 94,77 C 94,79 91,79 91,77 Z">
<animate begin="anime.begin+1.5s" attributeName="d" dur="0.5s" to="M 89,79 C 88,76 95,74 97,77 C 95,74 88,76 89,79 Z" fill="freeze"/>
<animate begin="anime.begin+3s" attributeName="d" dur="0.5s" to="M 91,77 C 91,76 94,76 94,77 C 94,79 91,79 91,77 Z" fill="freeze"/>
</path>
<path fill="black" d="M 131,67 C 131,65 134,65 134,67 C 134,68 131,68 131,67 Z">
<animate begin="anime.begin+1.5s" attributeName="d" dur="0.5s" to="M 130,69 C 128,66 135,63 137,66 C 135,63 128,66 130,69 Z" fill="freeze"/>
<animate begin="anime.begin+3s" attributeName="d" dur="0.5s" to="M 131,67 C 131,65 134,65 134,67 C 134,68 131,68 131,67 Z" fill="freeze"/>
</path>
<path d="M 111,111 C 119,117 134,110 138,103 M 133,99 C 135,99 143,106 144,108"/>
<path fill="#786060" d="M 80,56 C 80,53 83,49 85,48 C 87,47 91,46 92,47 C 95,50 88,54 86,56 C 82,60 80,57 80,56 Z"/>
<path fill="#786060" d="M 120,38 C 120,33 128,35 132,36 C 135,37 136,38 136,41 C 136,45 131,42 129,41 C 127,40 120,42 120,38 Z"/>
<path fill="#786060" d="M 72,78 C 60,81 64,58 59,54 C 57,52 64,42 68,43 C 71,44 67,52 72,53 C 67,58 72,73 72,78 Z"/>
<path fill="#786060" d="M 70,39 C 84,7 134,2 145,21 C 145,21 70,39 70,39 Z"/>
<path fill="#786060" d="M 148,21 C 149,25 144,30 144,32 C 144,34 153,43 154,46 C 155,49 156,55 160,55 C 168,55 162,43 162,41 C 162,28 153,18 148,21 Z"/>
<path fill="none" d="M 102,59 C 103,57 109,54 112,54"/>
<path fill="white" fill-opacity="0.4" d="M 76,67 C 76,59 101,52 104,62 C 109,80 104,87 92,87 C 80,87 76,77 76,67 Z"/>
<path fill="white" fill-opacity="0.4" d="M 112,54 C 112,48 143,41 146,48 C 153,64 149,72 134,77 C 116,83 112,63 112,54 Z"/>
<path fill="url(#gradient1)" d="M 69,37 C 78,32 128,19 142,17 C 143,18 148,23 148,26 C 139,24 71,46 68,49 C 67,49 68,37 69,37 Z"/>
<path fill="white" d="M 97,22 C 97,13 104,6 112,6 C 119,6 127,11 127,21 C 127,30 119,36 112,36 C 103,36 97,30.5 97,22 Z"/>
<path fill="#786060" d="M 109,22 C 109,20 110,19 112,19 C 113,19 114,20 114,22 C 114,23 113,24 111,24 C 110,24 109,23 109,22 Z"/>
<!-- table and toy -->
<path fill="whitesmoke" d="M -10,190 L 260,190 L 260,260 L -10,260 Z"/>
<path fill="red" d="M 12,236 L 74,235 L 74,243 L 12,244 L 12,236 Z"/>
<path fill="lightyellow" d="M 12,236 L 28,202 L 86,200 L 74,235 L 12,236 Z"/>
<path fill="red" d="M 86,200 L 86,208 L 74,243 L 74,235 Z"/>
<path fill="gray" d="M 31,207 L 26,221 L 33,221 L 38,207 L 31,207 Z"/>
<path fill="gray" d="M 55,205 L 46,231 L 71,231 L 79,205 L 55,205 Z"/>
<path d="M 66,206 L 58,230"/>
<path d="M 72,208 L 65,229"/>
<path d="M 62,226 L 70,226"/>
<path d="M 64,223 L 70,223"/>
<path d="M 66,217 L 72,217"/>
<path d="M 67,214 L 73,214"/>
<path d="M 68,211 L 75,211"/>
<path d="M 54,209 L 57,209"/>
<path d="M 53,212 L 56,212"/>
<path d="M 52,216 L 55,216"/>
<path d="M 50,221 L 52,221"/>
<path d="M 49,224 L 52,224"/>
<path d="M 48,227 L 51,227"/>
<path fill="red" d="M 75,235 L 75,243 L 143,244 L 142,235 L 75,235 Z"/>
<path fill="lightyellow" d="M 75,235 L 87,200 L 154,202 L 142,235 L 75,235 Z"/>
<path fill="red" d="M 154,202 L 154,212 L 143,244 L 142,235 L 154,202 Z"/>
<path fill="gray" d="M 92,205 C 89,206 80,228 83,231 C 85,233 125,233 127,231 C 129,229 122,221 134,216 C 137,215 139,207 138,206 C 136,204 95,204 92,205 Z"/>
<path fill="black" d="M 136,219 C 128,219 128,230 136,230 C 143,230 144,219 136,219 Z"/>
<path d="M 86,217 L 92,217 M 84,221 L 91,221"/>
<path fill="black" d="M 94,217 C 93,218 92,222 93,223 C 94,224 99,224 101,224 C 102,224 103,219 102,218 C 101,217 95,216 94,217 Z"/>
<path d="M 106,225 L 110,221"/>
<path d="M 119,224 L 114,220"/>
<path stroke-width="1" d="M 96,212 L 94,215"/>
<path stroke-width="1" d="M 99,212 L 97,215"/>
<path stroke-width="1" d="M 101,213 L 100,215"/>
<path fill="gray" d="M 99,209 C 99,206 105,206 105,209 C 105,212 99,212 99,209 Z"/>
<path fill="gray" d="M 105,214 C 105,212 109,212 109,214 C 109,216 105,216 105,214 Z"/>
<path fill="gray" d="M 114,214 C 114,212 118,212 118,214 C 118,216 114,216 114,214 Z"/>
<path fill="gray" d="M 122,214 C 122,212 126,212 126,214 C 126,216 122,216 122,214 Z"/>
<path d="M 124.07,212.43 C 124,209 130,210 133,210"/>
<!-- tester -->
<path fill="gray" d="M 180,239 L 213,241 L 214,251 L 182,248 L 180,239 Z"/>
<path fill="gray" d="M 213,241 L 221,210 L 222,220 L 214,251 L 213,241 Z"/>
<path fill="gray" d="M 221,210 L 193,207 L 180,239 L 213,241 L 221,210 Z"/>
<path stroke-width="1" fill="white" d="M 195,223 L 186,230 C 187,236 206,238 212,233 L 206,224 C 204,226 196,226 195,223 Z"/>
<path stroke-width="1" d="M 191.7,229.6 L 189,232"/>
<path stroke-width="1" d="M 195.4,230.9 L 193.67,234.08"/>
<path stroke-width="1" d="M 199,231 L 199,235"/>
<path stroke-width="1" d="M 203,231 L 204.5,234.8"/>
<path stroke-width="1" d="M 207,230 L 208.9,233.7"/>
<path stroke-width="2" d="M 196,225 L 190.17,229.58">
<animateTransform begin="anime.begin+0.9s" attributeName="transform" type="rotate" dur="0.5s" from="0,200.5,220" to="-80,200.5,220" fill="freeze"/>
<animateTransform begin="anime.begin+4.1s" attributeName="transform" type="rotate" dur="0.3s" to="0,200.5,220" from="-80,200.5,220" fill="freeze"/>
</path>
<path fill="blue" d="M 194,210 C 194,208 198,208 198,210 C 198,212 194,212 194,210 Z"/>
<path fill="red" d="M 214,213 C 214,211 218,211 218,213 C 218,215 214,215 214,213 Z"/>
<path fill="gray" d="M 197,216 C 197,210 209,211 209,216 C 209,222 197,222 197,216 Z"/>
<path fill="gray" d="M 201,215 L 201.67,221.42 L 204.42,221.17 L 203.25,214.83 Z"/>
<path d="M 196,208 C 186,202 168,214 161,210 C 158,205 122,202 115,199 C 101,194 86,158 87,170"/>
<path stroke-width="1" fill="silver" d="M 96,204 C 95,205 87,184 88,183 C 89,182 91,182 92,182 C 93,182 97,203 96,204 Z"/>
<path stroke-width="1" fill="blue" d="M 90,193 C 91,194 94,193 95,192 C 96,191 92,170 91,169 C 90,168 82,171 81,172 C 80,173 89,192 90,193 Z"/>
<path d="M 216.33,211.44 C 217.56,195.67 208.78,192.78 180.22,198.22 C 156,203.89 154.67,166.67 137.78,179"/>
<g id="redProbe">
<path stroke-width="1" fill="silver" d="M 116,208 C 115,207 129,188 129,188 C 129,188 132,191 132,191 C 132,191 117,209 116,208 Z"/>
<path stroke-width="1" fill="red" d="M 121,198 C 121,199 123,201 124,201 C 126,201 141,183 141,182 C 141,180 137,177 135,177 C 134,177 121,197 121,198 Z"/>
<animateTransform id="anime" begin="redProbe.click" attributeName="transform" type="translate" dur="1s" to="8,5" fill="freeze"/>
<animateTransform begin="anime.begin+4s" attributeName="transform" type="translate" dur="1s" to="0,0" fill="freeze"/>
</g>
<!-- hands -->
<path fill="rgb(250,200,160)" d="M 77,160 C 83,160 90,167 87,172 C 84,177 77,172 75,172 C 76,172 83,175 83,178 C 83,182 77,181 75,181 C 78,181 82,184 82,186 C 82,188 78,188 74,188 C 78,188 79,190 79,192 C 79,195 69,196 66,195 C 50,189 59,160 77,160 Z"/>
<g>
<path fill="rgb(250,200,160)" d="M 148,166 C 139,168 126,171 129,179 C 132,184 141,181 143,180 C 139,181 135,184 135,188 C 135,192 143,189 145,189 C 143,189 139,192 139,195 C 139,198 144,196 147,195 C 144,196 143,199 144,200 C 147,203 154,200 156,199 C 158,198 160,191 160,189 C 160,187.5 154,180 154,177 C 154,173 152,165 148,166 Z">
<animateTransform begin="anime.begin" attributeName="transform" type="rotate" dur="1s" from="0,148,183" to="-30,148,183" fill="freeze"/>
<animateTransform begin="anime.begin+4s" attributeName="transform" type="rotate" dur="1s" to="0,148,183" from="-30,148,183" fill="freeze"/>
</path>
<animateTransform begin="anime.begin" attributeName="transform" type="translate" dur="1s" to="4,2" fill="freeze"/>
<animateTransform begin="anime.begin+4s" attributeName="transform" type="translate" dur="1s" to="0,0" fill="freeze"/>
</g>
<!-- copyright -->
<text x="25" y="252" stroke-width="0.3" font-size="4">CoderDojo厚木 presents</text>
<g>
<rect stroke="none" fill="whitesmoke" x="19" y="245" width="63" height="10">
<animate begin="cd.begin" attributeName="width" to="0" dur="3s" fill="freeze"/>
</rect>
<animateTransform begin="cd.begin" attributeName="transform" type="translate" dur="3s" to="63,0" fill="freeze"/>
</g>
<g>
<use id="ppoi" href="#Ppoi" stroke-width="0.5" transform="translate(10,243) scale(0.5,0.5) rotate(-90,15,15)"/>
<animateTransform id="cd" begin="ppoi.click" attributeName="transform" type="translate" dur="3s" to="63,0" fill="freeze"/>
</g>
</g>
</svg>