Forked from: shino212's hanami View Diff (28) hanami~もうちょっと酔っ払い感のあるお花見おじさん shino212 Follow 2015-02-21 17:06:10 License: MIT License Fork0 Fav1 View881 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 2 lines HTML 146 lines CSS 10 lines お花見おじさんの上半身を動かして、より楽しそうに酔っぱらった感じを出してみました。 制作時のあんなことやこんなことはこちら http://yami-irodoruhana.tumblr.com/post/104283800389/svg hanami~もうちょっと酔っ払い感のあるお花見おじさん // forked from shino212's "hanami" http://jsdo.it/shino212/hanami <?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" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 800 600" xml:space="preserve"> <rect x="0" y="0" height="600" width="450" fill="#FFD4D4"/> <g id="flower"> <g transform="translate(50 50)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(100 180)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(200 60)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(390 40)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(100 260)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(300 230)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(450 370)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(150 500)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(200 350)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(370 480)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(400 150)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(280 400)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(40 410)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> </g> <g id="ossan" transform="translate(-20 -20)"> <g> <animateTransform attributeType="XML" attributeName="transform" type="translate" begin="2s" dur="20s" repeatCount="indefinite" values="0,530; 600,530" /> <g id="rightleg"> <path fill="#494949" d="M1.432,13.328c0,0,4.215,14.961,2.776,20.148c-1.438,5.188-15.243,16.818-15.243,16.818l-5.85-7.585c0,0,12.733-7.325,13.071-12.141c0.338-4.816-5.894-10.907-5.706-17.644C-9.333,6.187-1.13,7.518,1.432,13.328z"/> <path fill="#6D3814" d="M-16.553,43.106c0,0-4.243-0.725-4.031,2.254c0.212,2.979,7.009,9.375,8.72,9.238c2.403-0.192,0.953-1.928,0.427-4.521C-12.418,45.245-16.553,43.106-16.553,43.106z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" repeatCount="indefinite" values="0; -40; 0"/> </g> <g id="leftleg"> <path fill="#494949" d="M10.614,11.694c0,0,9.618,12.211,10.273,17.554c0.656,5.343-7.65,21.37-7.65,21.37l-8.306-4.771c0,0,8.962-11.639,7.432-16.218S2.745,21.807,0.341,15.511C-2.063,9.214,6.024,7.306,10.614,11.694z"/> <path fill="#6D3814" d="M5.389,46.087c0,0-4.198,0.953-2.862,3.625c1.335,2.671,10.063,5.98,11.591,5.199c2.146-1.097,0.143-2.146-1.335-4.341C10.027,46.481,5.389,46.087,5.389,46.087z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" repeatCount="indefinite" values="0; 40; 0"/> </g> <g id="body"> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="3s" repeatCount="indefinite" values="10; -10; 10"/> <path fill="#D1D1D1" d="M14.938-0.063c0,4.321,2.268,12.457,0.191,15.455c-0.895,1.29-5.468-1.786-6.629-0.892c-1.993,1.535-5.186,8.142-7.681,8.142c-2.282,0-9.383-4.043-11.257-5.343c-4.144-2.872-1.145-10.906-1.145-17.362c0-9.379,5.938-16.981,13.261-16.981C9.001-17.045,14.938-9.442,14.938-0.063z"/> <path fill="#FFD7B6" d="M18.679-37.685c0.218,0.751,1.411-2.066,2.174,0.224c1.318,3.953-0.891,4.563-1.335,5.724C15.129-20.289,10.783-13.61,0.246-13.61s-14.501-5.725-18.889-18.127c-0.393-1.109-2.442-2.52-1.526-5.724c0.763-2.671,2.13,0.587,2.366-0.226c2.397-8.267,9.657-14.275,18.241-14.275C9.021-51.962,16.282-45.952,18.679-37.685z"/> <path fill="#5B5B5B" d="M-17.499-35.553c0,0-1.335-12.402,4.389-15.265c5.724-2.861,10.112-1.908,14.5-1.908c4.389,0,15.646,1.336,16.219,6.487c0.572,5.152,0.572,10.876,0.572,10.876S16.465-48.719,1.01-49.1C-14.445-49.481-17.499-35.553-17.499-35.553z"/> <ellipse transform="matrix(0.9592 0.2826 -0.2826 0.9592 -10.1505 -3.4068)" fill="#FFFFFF" cx="6.734" cy="-36.889" rx="5.342" ry="2.29"/> <circle cx="7.116" cy="-37.173" r="1.05"/> <ellipse transform="matrix(-0.9592 0.2826 -0.2826 -0.9592 -21.5309 -70.6718)" fill="#FFFFFF" cx="-5.669" cy="-36.889" rx="5.343" ry="2.29"/> <circle cx="-6.051" cy="-37.173" r="1.05"/> <path fill="#E20000" d="M-11.965-26.967c0,0,3.434,3.816,12.784,1.908c9.349-1.908,13.356-4.389,13.356-4.389S3.871-8.459-11.965-26.967z"/> <polygon fill="#FFD7B6" points="-2.616,-14.564 2.154,-4.07 6.924,-16.091"/> <path fill="#4B6FC9" d="M-19.597-41.277l0.763,1.908c0,0,14.31-3.243,18.126-3.243c3.816,0,19.653,3.815,19.653,3.815l0.381-2.48C19.326-41.277-3.57-48.146-19.597-41.277z"/> <path fill="#4B6FC9" d="M18.372-40.514c0,0-2.289-2.29-0.953-4.198c1.335-1.907,2.861-2.671,3.434-0.572c0.573,2.099-1.335,4.771-1.335,4.771l3.625,26.33l-4.197,3.816l-2.672-4.961L18.372-40.514z"/> <path fill="none" d="M-13.778-29.352c0.382-1.24,1.24-2.672,2.576-2.958c0.381,0.858,0.19,2.004,0.381,2.958c0.286-0.764,0.763-1.908,1.622-2.004c0.381,0.764,0.286,1.718,0.286,2.48c0.477-1.049,0.858-2.194,2.194-2.576c0.095,0.668,0.095,1.432,0.19,2.194"/> <path fill="#FFB6B6" d="M-12.851-29.228c0.319-0.942,0.788-2.081,1.833-2.394c-0.383-0.143-0.767-0.286-1.15-0.429c0.326,0.955,0.237,1.968,0.381,2.958c0.124,0.85,1.667,0.45,1.893-0.135c0.152-0.394,0.413-1.314,0.879-1.439c-0.383-0.143-0.767-0.286-1.15-0.429c0.293,0.755,0.282,1.489,0.271,2.289c-0.013,1.004,1.6,0.746,1.908,0.057c0.326-0.731,0.617-1.707,1.451-2.012c-0.383-0.143-0.767-0.286-1.15-0.429c0.08,0.73,0.118,1.463,0.19,2.194c0.091,0.921,2.027,0.443,1.932-0.518c-0.072-0.731-0.11-1.464-0.19-2.194c-0.051-0.466-0.822-0.549-1.15-0.429c-1.596,0.584-2.267,1.637-2.938,3.141c0.636,0.019,1.272,0.038,1.908,0.057c0.012-0.924,0.039-1.798-0.301-2.672c-0.178-0.459-0.717-0.546-1.15-0.429c-1.299,0.351-1.904,1.375-2.365,2.568c0.631-0.045,1.262-0.09,1.893-0.135c-0.146-0.997-0.052-1.994-0.381-2.958c-0.156-0.458-0.736-0.553-1.15-0.429c-1.723,0.516-2.756,1.861-3.319,3.522C-15.07-28.397-13.138-28.381-12.851-29.228L-12.851-29.228z"/> <path fill="none" d="M7.496-30.401c0.383-1.24,1.24-2.671,2.576-2.957c0.382,0.858,0.191,2.003,0.382,2.957c0.286-0.763,0.763-1.908,1.622-2.003c0.381,0.763,0.286,1.717,0.286,2.48c0.478-1.05,0.858-2.194,2.194-2.576c0.096,0.668,0.096,1.431,0.19,2.194"/> <path fill="#FFB6B6" d="M8.423-30.278c0.32-0.942,0.788-2.08,1.834-2.393c-0.384-0.143-0.767-0.286-1.15-0.429c0.326,0.955,0.237,1.967,0.382,2.957c0.124,0.85,1.666,0.45,1.893-0.135c0.152-0.394,0.413-1.313,0.88-1.438c-0.384-0.143-0.767-0.286-1.15-0.429c0.293,0.755,0.282,1.489,0.271,2.289c-0.014,1.003,1.6,0.746,1.907,0.057c0.326-0.731,0.617-1.707,1.452-2.012c-0.384-0.143-0.767-0.286-1.15-0.429c0.08,0.73,0.118,1.463,0.19,2.194c0.091,0.92,2.026,0.443,1.932-0.518c-0.072-0.731-0.11-1.464-0.19-2.194c-0.051-0.466-0.821-0.549-1.15-0.429c-1.596,0.584-2.266,1.637-2.937,3.141c0.636,0.019,1.271,0.038,1.907,0.057c0.013-0.924,0.038-1.798-0.301-2.672c-0.179-0.46-0.717-0.545-1.15-0.429c-1.299,0.35-1.903,1.375-2.364,2.567c0.631-0.045,1.262-0.09,1.893-0.135c-0.146-0.997-0.052-1.993-0.382-2.957c-0.156-0.458-0.736-0.553-1.15-0.429c-1.723,0.516-2.755,1.861-3.318,3.521C6.203-29.447,8.136-29.431,8.423-30.278L8.423-30.278z"/> <g id="lefthand"> <circle fill="#FFD7B6" cx="40.176" cy="-22.809" r="3.816"/> <path fill="#D1D1D1" d="M6.404-7.163c0,0,1.717-2.861,4.961-2.861S22.241-4.491,26.82-6.59c4.579-2.1,9.35-15.074,9.35-15.074l5.724,2.862c0,0-6.487,16.6-12.975,18.508S6.404,1.232,6.404-7.163z"/> <path fill="#6D3814" d="M40.495-27.705l1.781-0.764c0,0,3.158,10.098,4.324,12.212c2.034,3.688,4.706,3.688,6.487,8.903C54.6-2.928,57.667,7.275,57.667,7.275s-3.053,5.851-10.812,3.943c-0.37-0.092-4.601-15.397-3.944-19.336C43.674-12.696,44.533-16.301,40.495-27.705z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="3s" repeatCount="indefinite" values="0; -30; 0"/> </g> <g id="righthand"> <circle fill="#FFD7B6" cx="-35.78" cy="-22.809" r="3.816"/> <path fill="#D1D1D1" d="M-2.008-7.163c0,0-1.717-2.861-4.961-2.861S-17.845-4.491-22.424-6.59c-4.579-2.1-9.35-15.074-9.35-15.074l-5.724,2.862c0,0,6.487,16.6,12.975,18.508S-2.008,1.232-2.008-7.163z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="2.5s" repeatCount="indefinite" values="0; 30; 0"/> </g> </g> </g> </g> <rect x="450" y="0" height="700" width="200" fill="#ffffff"/> <rect x="-100" y="-100" height="100" width="650" fill="#ffffff"/> <rect x="-100" y="600" height="100" width="650" fill="#ffffff"/> <rect x="-200" y="0" height="700" width="200" fill="#ffffff"/> </svg> hanami~もうちょっと酔っ払い感のあるお花見おじさん * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } お花見おじさんの上半身を動かして、より楽しそうに酔っぱらった感じを出してみました。 制作時のあんなことやこんなことはこちら http://yami-irodoruhana.tumblr.com/post/104283800389/svg // forked from shino212's "hanami" http://jsdo.it/shino212/hanami <?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" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 800 600" xml:space="preserve"> <rect x="0" y="0" height="600" width="450" fill="#FFD4D4"/> <g id="flower"> <g transform="translate(50 50)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(100 180)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(200 60)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(390 40)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(100 260)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(300 230)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(450 370)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(150 500)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(200 350)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="1 1;3 3;1 1" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="1;0.5;1" repeatCount="indefinite"/> </g> </g> <g transform="translate(370 480)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(400 150)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(280 400)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> <g transform="translate(40 410)"> <g> <path fill="#FFC0C0" d="M24.71,6.974C59.446-4.185,32.742-7.027,32.742-7.027s18.717-17.436-14.683-6.705c-2.292,0.736-4.33,1.935-6.117,3.357c0.814-2.135,1.339-4.44,1.347-6.847C13.41-53.705,2.455-29.186,2.455-29.186S-8.344-52.374-8.459-17.294c-0.008,2.407,0.501,4.716,1.302,6.855c-1.778-1.435-3.809-2.646-6.095-3.396c-34.66-11.39-14.726,6.606-14.726,6.606s-25.39,3.104,7.938,14.055c2.286,0.751,4.64,0.98,6.922,0.88c-1.914,1.247-3.693,2.805-5.114,4.747C-39.775,41.897-16.5,28.5-16.5,28.5s-4.894,25.107,15.819-3.206c1.421-1.942,2.366-4.109,2.976-6.311c0.595,2.206,1.526,4.378,2.934,6.33c21.347,29.587,15.798,3.312,15.798,3.312s22.366,12.412,1.84-16.036c-1.408-1.952-3.178-3.521-5.083-4.78C20.066,7.924,22.419,7.71,24.71,6.974z M2.348,2.736L2.348,2.736L2.348,2.736L2.348,2.736z"/> <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" values="3 3;1 1;3 3" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" dur="10s" values="0.5;1;0.5" repeatCount="indefinite"/> </g> </g> </g> <g id="ossan" transform="translate(-20 -20)"> <g> <animateTransform attributeType="XML" attributeName="transform" type="translate" begin="2s" dur="20s" repeatCount="indefinite" values="0,530; 600,530" /> <g id="rightleg"> <path fill="#494949" d="M1.432,13.328c0,0,4.215,14.961,2.776,20.148c-1.438,5.188-15.243,16.818-15.243,16.818l-5.85-7.585c0,0,12.733-7.325,13.071-12.141c0.338-4.816-5.894-10.907-5.706-17.644C-9.333,6.187-1.13,7.518,1.432,13.328z"/> <path fill="#6D3814" d="M-16.553,43.106c0,0-4.243-0.725-4.031,2.254c0.212,2.979,7.009,9.375,8.72,9.238c2.403-0.192,0.953-1.928,0.427-4.521C-12.418,45.245-16.553,43.106-16.553,43.106z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" repeatCount="indefinite" values="0; -40; 0"/> </g> <g id="leftleg"> <path fill="#494949" d="M10.614,11.694c0,0,9.618,12.211,10.273,17.554c0.656,5.343-7.65,21.37-7.65,21.37l-8.306-4.771c0,0,8.962-11.639,7.432-16.218S2.745,21.807,0.341,15.511C-2.063,9.214,6.024,7.306,10.614,11.694z"/> <path fill="#6D3814" d="M5.389,46.087c0,0-4.198,0.953-2.862,3.625c1.335,2.671,10.063,5.98,11.591,5.199c2.146-1.097,0.143-2.146-1.335-4.341C10.027,46.481,5.389,46.087,5.389,46.087z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" repeatCount="indefinite" values="0; 40; 0"/> </g> <g id="body"> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="3s" repeatCount="indefinite" values="10; -10; 10"/> <path fill="#D1D1D1" d="M14.938-0.063c0,4.321,2.268,12.457,0.191,15.455c-0.895,1.29-5.468-1.786-6.629-0.892c-1.993,1.535-5.186,8.142-7.681,8.142c-2.282,0-9.383-4.043-11.257-5.343c-4.144-2.872-1.145-10.906-1.145-17.362c0-9.379,5.938-16.981,13.261-16.981C9.001-17.045,14.938-9.442,14.938-0.063z"/> <path fill="#FFD7B6" d="M18.679-37.685c0.218,0.751,1.411-2.066,2.174,0.224c1.318,3.953-0.891,4.563-1.335,5.724C15.129-20.289,10.783-13.61,0.246-13.61s-14.501-5.725-18.889-18.127c-0.393-1.109-2.442-2.52-1.526-5.724c0.763-2.671,2.13,0.587,2.366-0.226c2.397-8.267,9.657-14.275,18.241-14.275C9.021-51.962,16.282-45.952,18.679-37.685z"/> <path fill="#5B5B5B" d="M-17.499-35.553c0,0-1.335-12.402,4.389-15.265c5.724-2.861,10.112-1.908,14.5-1.908c4.389,0,15.646,1.336,16.219,6.487c0.572,5.152,0.572,10.876,0.572,10.876S16.465-48.719,1.01-49.1C-14.445-49.481-17.499-35.553-17.499-35.553z"/> <ellipse transform="matrix(0.9592 0.2826 -0.2826 0.9592 -10.1505 -3.4068)" fill="#FFFFFF" cx="6.734" cy="-36.889" rx="5.342" ry="2.29"/> <circle cx="7.116" cy="-37.173" r="1.05"/> <ellipse transform="matrix(-0.9592 0.2826 -0.2826 -0.9592 -21.5309 -70.6718)" fill="#FFFFFF" cx="-5.669" cy="-36.889" rx="5.343" ry="2.29"/> <circle cx="-6.051" cy="-37.173" r="1.05"/> <path fill="#E20000" d="M-11.965-26.967c0,0,3.434,3.816,12.784,1.908c9.349-1.908,13.356-4.389,13.356-4.389S3.871-8.459-11.965-26.967z"/> <polygon fill="#FFD7B6" points="-2.616,-14.564 2.154,-4.07 6.924,-16.091"/> <path fill="#4B6FC9" d="M-19.597-41.277l0.763,1.908c0,0,14.31-3.243,18.126-3.243c3.816,0,19.653,3.815,19.653,3.815l0.381-2.48C19.326-41.277-3.57-48.146-19.597-41.277z"/> <path fill="#4B6FC9" d="M18.372-40.514c0,0-2.289-2.29-0.953-4.198c1.335-1.907,2.861-2.671,3.434-0.572c0.573,2.099-1.335,4.771-1.335,4.771l3.625,26.33l-4.197,3.816l-2.672-4.961L18.372-40.514z"/> <path fill="none" d="M-13.778-29.352c0.382-1.24,1.24-2.672,2.576-2.958c0.381,0.858,0.19,2.004,0.381,2.958c0.286-0.764,0.763-1.908,1.622-2.004c0.381,0.764,0.286,1.718,0.286,2.48c0.477-1.049,0.858-2.194,2.194-2.576c0.095,0.668,0.095,1.432,0.19,2.194"/> <path fill="#FFB6B6" d="M-12.851-29.228c0.319-0.942,0.788-2.081,1.833-2.394c-0.383-0.143-0.767-0.286-1.15-0.429c0.326,0.955,0.237,1.968,0.381,2.958c0.124,0.85,1.667,0.45,1.893-0.135c0.152-0.394,0.413-1.314,0.879-1.439c-0.383-0.143-0.767-0.286-1.15-0.429c0.293,0.755,0.282,1.489,0.271,2.289c-0.013,1.004,1.6,0.746,1.908,0.057c0.326-0.731,0.617-1.707,1.451-2.012c-0.383-0.143-0.767-0.286-1.15-0.429c0.08,0.73,0.118,1.463,0.19,2.194c0.091,0.921,2.027,0.443,1.932-0.518c-0.072-0.731-0.11-1.464-0.19-2.194c-0.051-0.466-0.822-0.549-1.15-0.429c-1.596,0.584-2.267,1.637-2.938,3.141c0.636,0.019,1.272,0.038,1.908,0.057c0.012-0.924,0.039-1.798-0.301-2.672c-0.178-0.459-0.717-0.546-1.15-0.429c-1.299,0.351-1.904,1.375-2.365,2.568c0.631-0.045,1.262-0.09,1.893-0.135c-0.146-0.997-0.052-1.994-0.381-2.958c-0.156-0.458-0.736-0.553-1.15-0.429c-1.723,0.516-2.756,1.861-3.319,3.522C-15.07-28.397-13.138-28.381-12.851-29.228L-12.851-29.228z"/> <path fill="none" d="M7.496-30.401c0.383-1.24,1.24-2.671,2.576-2.957c0.382,0.858,0.191,2.003,0.382,2.957c0.286-0.763,0.763-1.908,1.622-2.003c0.381,0.763,0.286,1.717,0.286,2.48c0.478-1.05,0.858-2.194,2.194-2.576c0.096,0.668,0.096,1.431,0.19,2.194"/> <path fill="#FFB6B6" d="M8.423-30.278c0.32-0.942,0.788-2.08,1.834-2.393c-0.384-0.143-0.767-0.286-1.15-0.429c0.326,0.955,0.237,1.967,0.382,2.957c0.124,0.85,1.666,0.45,1.893-0.135c0.152-0.394,0.413-1.313,0.88-1.438c-0.384-0.143-0.767-0.286-1.15-0.429c0.293,0.755,0.282,1.489,0.271,2.289c-0.014,1.003,1.6,0.746,1.907,0.057c0.326-0.731,0.617-1.707,1.452-2.012c-0.384-0.143-0.767-0.286-1.15-0.429c0.08,0.73,0.118,1.463,0.19,2.194c0.091,0.92,2.026,0.443,1.932-0.518c-0.072-0.731-0.11-1.464-0.19-2.194c-0.051-0.466-0.821-0.549-1.15-0.429c-1.596,0.584-2.266,1.637-2.937,3.141c0.636,0.019,1.271,0.038,1.907,0.057c0.013-0.924,0.038-1.798-0.301-2.672c-0.179-0.46-0.717-0.545-1.15-0.429c-1.299,0.35-1.903,1.375-2.364,2.567c0.631-0.045,1.262-0.09,1.893-0.135c-0.146-0.997-0.052-1.993-0.382-2.957c-0.156-0.458-0.736-0.553-1.15-0.429c-1.723,0.516-2.755,1.861-3.318,3.521C6.203-29.447,8.136-29.431,8.423-30.278L8.423-30.278z"/> <g id="lefthand"> <circle fill="#FFD7B6" cx="40.176" cy="-22.809" r="3.816"/> <path fill="#D1D1D1" d="M6.404-7.163c0,0,1.717-2.861,4.961-2.861S22.241-4.491,26.82-6.59c4.579-2.1,9.35-15.074,9.35-15.074l5.724,2.862c0,0-6.487,16.6-12.975,18.508S6.404,1.232,6.404-7.163z"/> <path fill="#6D3814" d="M40.495-27.705l1.781-0.764c0,0,3.158,10.098,4.324,12.212c2.034,3.688,4.706,3.688,6.487,8.903C54.6-2.928,57.667,7.275,57.667,7.275s-3.053,5.851-10.812,3.943c-0.37-0.092-4.601-15.397-3.944-19.336C43.674-12.696,44.533-16.301,40.495-27.705z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="3s" repeatCount="indefinite" values="0; -30; 0"/> </g> <g id="righthand"> <circle fill="#FFD7B6" cx="-35.78" cy="-22.809" r="3.816"/> <path fill="#D1D1D1" d="M-2.008-7.163c0,0-1.717-2.861-4.961-2.861S-17.845-4.491-22.424-6.59c-4.579-2.1-9.35-15.074-9.35-15.074l-5.724,2.862c0,0,6.487,16.6,12.975,18.508S-2.008,1.232-2.008-7.163z"/> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="2.5s" repeatCount="indefinite" values="0; 30; 0"/> </g> </g> </g> </g> <rect x="450" y="0" height="700" width="200" fill="#ffffff"/> <rect x="-100" y="-100" height="100" width="650" fill="#ffffff"/> <rect x="-100" y="600" height="100" width="650" fill="#ffffff"/> <rect x="-200" y="0" height="700" width="200" fill="#ffffff"/> </svg> * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? お花見おじさんの上半身を動かして、より楽しそうに酔っぱらった感じを出してみました。 制作時のあんなことやこんなことはこちら http://yami-irodoruhana.tumblr.com/post/104283800389/svg Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author shino212 平日はWebデザイナー。土日祝日はアクセサリーデザイナー(自称)。英語(わりとまじめに)勉強中。一応、ネットで作品を売っていて、気が向いたらイベントに参加することも。 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/pOxF/js"></script> other svg Discussion Questions on this code? Tags other svg Favorite by bbfu