Skip to content

Instantly share code, notes, and snippets.

@tanshio

tanshio/index.html

Last active December 12, 2016 06:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tanshio/fe0b9b28f2a44f446300ee3fcda06d5b to your computer and use it in GitHub Desktop.
Save tanshio/fe0b9b28f2a44f446300ee3fcda06d5b to your computer and use it in GitHub Desktop.
Download ZIP
svg-vue
Raw
index.html
<!DOCTYPE html>
<html lang="ja" prefix="og:http://ogp.me/ns#">
<head>
<title>タイトル</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="keywords" content="キーワード">
<meta name="description" content="説明文">
<meta property="og:type" content="website">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:url" content="http://tanshio.net/">
<meta property="og:site_name" content="タイトル">
<meta property="og:image" content="">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
</head>
<body class="home">
<div id="app">
<div><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<g id="顔">
<g id="ベース" v-if="face===2">
<g>
<path fill="#F5E6DC" d="M243.1,497.9c38.5,0,66.1-29.7,77.1-38.8c19-15.8,44.1-29.6,48.4-44.6c12.6-43.7,17.2-151.7,14.9-165.3
c-19.3-114.1-140.4-106.9-140.4-106.9"/>
</g>
<g>
<path fill="#F5E6DC" d="M245.1,497.9c-38.5,0-66.1-29.7-77.1-38.8c-19-15.8-44.1-29.6-48.4-44.6c-12.6-43.7-17.2-151.7-14.9-165.3
C124,135.1,245.1,142.3,245.1,142.3"/>
</g>
</g>
<g id="丸" v-if="face===0">
<g>
<path fill="#F5E6DC" d="M243.1,497.9c38.5,0,76.4-25.8,87.5-35c19-15.8,32.1-39.2,36.4-54.1c12.6-43.7,18.9-146,16.6-159.6
c-19.3-114.1-140.4-106.9-140.4-106.9"/>
</g>
<g>
<path fill="#F5E6DC" d="M245.1,497.9c-38.5,0-76.4-25.8-87.5-35c-19-15.8-32.1-39.2-36.4-54.1c-12.6-43.7-18.9-146-16.6-159.6
C124,135.1,245.1,142.3,245.1,142.3"/>
</g>
</g>
<g id="三角" v-if="face===1">
<g>
<path fill="#F5E6DC" d="M243.1,497.9c38.5,0,114.1-56.2,123.8-89.1c13.7-46.1,18.9-146,16.6-159.6
c-19.3-114.1-140.4-106.9-140.4-106.9"/>
</g>
<g>
<path fill="#F5E6DC" d="M245.1,497.9c-38.5,0-114.1-56.2-123.8-89.1c-13.7-46.1-18.9-146-16.6-159.6
C124,135.1,245.1,142.3,245.1,142.3"/>
</g>
</g>
</g>
<g id="口">
<g v-if="mouse===0">
<g>
<path fill="#A48B78" d="M201.2,435.2c31.8,3.8,63.9,2.5,95.3-3.5c-0.2-0.6-0.3-1.1-0.5-1.7c-1.3,0.3-2.7,0.6-4,0.9
c-1.8,0.4-1.3,2.1,0.5,1.7c1.3-0.3,2.7-0.6,4-0.9c1.8-0.4,1.3-2.1-0.5-1.7c-30.9,6-62.5,7.1-93.8,3.4
C201,433.1,199.3,434.9,201.2,435.2L201.2,435.2z"/>
</g>
</g>
<g v-if="mouse===1">
<g>
<path fill="#A48B78" d="M191.8,441c38.9-10.8,80-11,119-0.6c1,0.3,3.4-1.2,1.7-1.7c-39.7-10.6-81.6-10.3-121.2,0.7
C189.7,439.9,190.1,441.5,191.8,441L191.8,441z"/>
</g>
</g>
</g>
<g id="鼻">
<g id="普通" v-if="nose===0">
<g>
<path fill="#A48B78" d="M229.6,392.4c2.1,6.6,5.8,12.4,10.9,17c2.4,2.1,6-1.4,3.5-3.5c-4.5-4-7.8-9-9.6-14.8
C233.4,388,228.6,389.3,229.6,392.4L229.6,392.4z"/>
</g>
</g>
<g id="高" v-if="nose===1">
<g>
<path fill="#A48B78" d="M225.6,396.7c5,3.9,9.9,7.9,14.9,11.8c2.5,2,6.1-1.5,3.5-3.5c-5-3.9-9.9-7.9-14.9-11.8
C226.6,391.1,223.1,394.7,225.6,396.7L225.6,396.7z"/>
</g>
</g>
<g id="丸_3_" v-if="nose===2">
<g>
<path fill="#A48B78" d="M230.4,384.9c-5.6,9.7-0.3,21.9,10.8,23.9c3.1,0.6,4.5-4.3,1.3-4.8c-7.9-1.4-12-9.4-7.9-16.5
C236.3,384.6,232,382.1,230.4,384.9L230.4,384.9z"/>
</g>
</g>
</g>
<g id="眉">
<g id="ナチュラル" v-if="eyeblow===0">
<g>
<g>
<path fill="#A48B78" d="M223.1,295.3c-11.7-8.6-28.2-11.5-42-14.9c-11.7-2.8-24.7-3.9-36.7-1.6c-3.1,0.6-4.5-4.2-1.3-4.8
c12.2-2.4,25.4-1.6,37.5,1.2c9.1,2.1,18.3,4.5,27.2,7.4c6.2,2.1,12.6,4.4,17.9,8.4C228.2,292.8,225.7,297.2,223.1,295.3
L223.1,295.3z"/>
</g>
<g>
<path fill="#A48B78" d="M268.3,295.3c11.7-8.6,28.2-11.5,42-14.9c11.7-2.8,24.7-3.9,36.7-1.6c3.1,0.6,4.5-4.2,1.3-4.8
c-12.2-2.4-25.4-1.6-37.5,1.2c-9.1,2.1-18.3,4.5-27.2,7.4c-6.2,2.1-12.6,4.4-17.9,8.4C263.2,292.8,265.7,297.2,268.3,295.3
L268.3,295.3z"/>
</g>
</g>
</g>
<g id="シャキーン" v-if="eyeblow===1">
<g>
<g>
<path fill="#A48B78" d="M213.3,289.8c0.2,0,0.4,0,0.5,0c-0.5,0.3-1.1,0.5-1.6,0.8c-0.1,0.2-15.3-5.4-17.6-6.1
c-6.5-2.2-13.1-4.2-19.7-6c-12.3-3.4-25.8-6.6-37.6,0c-0.2-0.6-0.5-1.3-0.7-1.9c0.9,0.6,1.7,1.2,2.6,1.9
c1.5,1.1,0.9,1.9-0.6,2.3c-1.8,0.5-4.7-0.6-6.1-1.6c-0.9-0.6-1.7-1.2-2.6-1.9c-0.4-0.3-1.6-1.4-0.7-1.9
c14.5-8,31.5-4.3,46.6-0.1c5.2,1.4,47,12.5,45.1,17.7c-0.2,0.6-1.1,0.8-1.6,0.8c-0.2,0-0.4,0-0.5,0c-1.9,0.1-4.7-0.3-6.1-1.6
C211.6,291.1,211.2,289.9,213.3,289.8L213.3,289.8z"/>
</g>
<g>
<path fill="#A48B78" d="M269.7,289.8c-0.2,0-0.4,0-0.5,0c0.5,0.3,1.1,0.5,1.6,0.8c0.1,0.2,15.3-5.4,17.6-6.1
c6.5-2.2,13.1-4.2,19.7-6c12.3-3.4,25.8-6.6,37.6,0c0.2-0.6,0.5-1.3,0.7-1.9c-0.9,0.6-1.7,1.2-2.6,1.9c-1.5,1.1-0.9,1.9,0.6,2.3
c1.8,0.5,4.7-0.6,6.1-1.6c0.9-0.6,1.7-1.2,2.6-1.9c0.4-0.3,1.6-1.4,0.7-1.9c-14.5-8-31.5-4.3-46.6-0.1
c-5.2,1.4-47,12.5-45.1,17.7c0.2,0.6,1.1,0.8,1.6,0.8c0.2,0,0.4,0,0.5,0c1.9,0.1,4.7-0.3,6.1-1.6
C271.4,291.1,271.7,289.9,269.7,289.8L269.7,289.8z"/>
</g>
</g>
</g>
</g>
<g id="目">
<g id="デカ目" v-if="eye===2">
<g>
<g>
<path fill="#FFFFFF" d="M174.9,294.9c-16.8,0.8-33.1,5.1-42.8,18.8c13.1,10.2,25.3,20.8,41.9,21.3c16.6,0.5,33.3-5.4,46.9-14.9
C219.6,317.7,191.7,294,174.9,294.9z"/>
</g>
<g>
<path fill="#FFFFFF" d="M312.2,294.9c16.8,0.8,33.1,5.1,42.8,18.8c-13.1,10.2-25.3,20.8-41.9,21.3c-16.6,0.5-33.3-5.4-46.9-14.9
C267.5,317.7,295.5,294,312.2,294.9z"/>
</g>
</g>
<g>
<g>
<circle fill="#7A6A56" cx="178.2" cy="313.7" r="18.8"/>
</g>
<g>
<circle fill="#7A6A56" cx="312.2" cy="313.7" r="18.8"/>
</g>
</g>
<g>
<g>
<circle fill="#FFFFFF" cx="168.7" cy="304.8" r="6.3"/>
</g>
<g>
<circle fill="#FFFFFF" cx="302.7" cy="304.8" r="6.3"/>
</g>
</g>
</g>
<g id="つぶらな瞳" v-if="eye===1">
<g>
<g>
<circle fill="#7A6A56" cx="178.2" cy="313.5" r="18.8"/>
</g>
<g>
<circle fill="#7A6A56" cx="312.2" cy="313.5" r="18.8"/>
</g>
</g>
<g>
<g>
<circle fill="#FFFFFF" cx="168.7" cy="304.7" r="6.3"/>
</g>
<g>
<circle fill="#FFFFFF" cx="302.7" cy="304.7" r="6.3"/>
</g>
</g>
</g>
<g id="基本" v-if="eye===0">
<g>
<g>
<path fill="#FFFFFF" d="M178.5,294.7c-16.8,0.8-26.4,6.4-36.1,20c13.1,10.2,18.6,19.6,35.2,20c16.6,0.5,23.1-5.4,36.8-14.9
C213,317.6,195.2,293.9,178.5,294.7z"/>
</g>
<g>
<path fill="#FFFFFF" d="M312.2,294.7c16.8,0.8,26.4,6.4,36.1,20c-13.1,10.2-18.6,19.6-35.2,20c-16.6,0.5-23.1-5.4-36.8-14.9
C277.7,317.6,295.5,293.9,312.2,294.7z"/>
</g>
</g>
<g>
<g>
<circle fill="#7A6A56" cx="178.2" cy="313.5" r="18.8"/>
</g>
<g>
<circle fill="#7A6A56" cx="312.2" cy="313.5" r="18.8"/>
</g>
</g>
<g>
<g>
<circle fill="#FFFFFF" cx="168.7" cy="304.7" r="6.3"/>
</g>
<g>
<circle fill="#FFFFFF" cx="302.7" cy="304.7" r="6.3"/>
</g>
</g>
</g>
</g>
<g id="髪">
<g v-if="hair===0">
<path fill="#A48B78" d="M344.6,70.3c-12.1-13.4-21.7-29-27.9-45.8c-3.4,9.5-5.3,19.6-5.6,29.7c-32-6-46-27.4-73.6-44.5
c6.5,8.6,7.6,22,6.5,31.5c-37.2,5.6-75.3,5.7-112.6,0.2c13.9,7.5,27.8,14.9,41.6,22.4c-35.9,13.3-71.9,26.5-108,39.6
c18.7,1.2,37.4,2.5,56.1,3.7c-18.7,28.3-42.2,53.5-69.3,74.3c17.3-4.9,34.6-9.8,51.9-14.6c-13.1,30.6-28.8,64-59.7,77.4
c18.6-3.4,36.4-10.7,52-21.2c-13,26.5-12.2,59.1,2.1,85c-3.2-21.7,10.5-42.3,25.7-58.4s32.9-31,41.2-51.4
c-2.9,19.5-10.5,38.2-22.2,54.2c31.9-12,59.7-34.2,78.3-62.3c-2.8,22.6-1,45.8,5.2,67.8c6.4-21.2,17-41.3,31-58.6
c3.9,13,2.6,27.5-3.5,39.7c18.5-10.2,33.9-25.8,43.7-44.3c3.8,14.6,5.8,29.6,6,44.6c10-10.2,18.3-22.1,24.5-34.9
c12.4,21.1,23,43.1,31.9,65.8c0.7-11.8-0.8-23.7-4.4-34.9c13.1,20.9,22.7,44,28.4,67.9c6.4-15.7,10.5-32.2,12.4-48.9
c2-17.7,1-36.7-8.9-51.6c9,12.6,15.9,26.7,20.2,41.5c6.3-26.7,0.4-55.9-15.6-78.3c13.1,0.9,26.1,1.7,39.2,2.6
c-12.9-10.9-27.3-20.2-42.7-27.5c12.2-13.8,19.6-31.6,20.6-49.8c-9.6,8.2-20.1,15.3-31.3,21.3c12.5-19.6,15.5-44.8,7.8-66.6
c-5,11.4-11.8,22.1-20.2,31.4c0-17.9-7.5-35.6-20.3-48.3c0.8,13.9,0.9,27.9,0.1,41.8"/>
<g>
<path fill="#A48B78" d="M345.4,69.5c-11.7-13-20.7-28-26.9-44.3c-0.3-0.7-3.1-4.1-3.7-2.3c-1.9,5.4-3.3,10.9-4.3,16.5
c-0.5,2.8-0.8,5.6-1.1,8.5c0,0.4,0,1.9-0.2,2.3c-0.6,2-0.8,1.4-2.5,1.4c-4.5-0.2-10-2.9-14.2-4.7c-4.2-1.9-8.2-4.1-12.1-6.6
c-15.1-9.8-28-22.5-43.2-32.1c-1.8-1.1-2,0.6-1.1,1.9c3.2,4.6,4.9,9.9,5.7,15.4c0.5,3.2,1.9,11.3-0.5,13.6
c-1.7,1.6-7.3,1.5-9.5,1.7c-2.9,0.4-5.8,0.7-8.7,1c-6.1,0.6-12.3,1.1-18.5,1.4c-24.9,1.2-49.8,0-74.4-3.6
c-2.2-0.3,0.6,3.2,1.2,3.6c13.9,7.5,27.8,14.9,41.6,22.4c-0.5-1.2-1.1-2.4-1.6-3.6c-35.9,13.3-71.9,26.5-108,39.6
c-1.8,0.7,1.5,3.9,2.5,3.9c18.7,1.2,37.4,2.5,56.1,3.7c-0.9-1.3-1.9-2.5-2.8-3.8c-18.9,28.4-42.3,53.5-69.3,74.3
c-1.3,1,2,4.1,3.2,3.8c17.3-4.9,34.6-9.8,51.9-14.6c-1.1-1.2-2.2-2.3-3.3-3.5c-12.8,29.8-28,63-59.3,77c-1.7,0.8,1.5,4.2,2.9,3.9
c18.7-3.6,36.4-10.8,52.3-21.3c-1.2-1.1-2.4-2.2-3.6-3.4c-13.1,27.3-12,59.7,2.4,86.3c0.3,0.6,3.8,3.6,3.5,1.4
c-3-23.6,12.3-44,27.7-60.1c14.6-15.2,30.8-29.5,39.1-49.3c-1.3-1-2.5-2.1-3.8-3.1c-3,19.5-10.5,37.9-22,53.9
c-0.9,1.2,1.8,4.3,3.2,3.8c31.9-12.3,59.5-34,78.6-62.5c-1.2-1.1-2.4-2.2-3.6-3.4c-2.7,23.1-0.9,46.2,5.3,68.6
c0.2,0.7,3.2,4.1,3.7,2.3c6.5-21.3,16.9-41,30.8-58.3c-1.2-0.8-2.4-1.7-3.6-2.5c3.7,13.1,2.3,26.7-3.5,38.9
c-0.7,1.4,2.3,4.1,3.6,3.4c18.6-10.4,33.7-25.8,43.8-44.6c-1.2-0.8-2.5-1.5-3.7-2.3c3.7,14.5,5.6,29.2,5.9,44.2
c0,1,2.5,4.2,3.7,3c10-10.4,18.3-22.2,24.7-35.2c-1.2-0.6-2.3-1.2-3.5-1.8c12.2,20.9,22.8,42.8,31.7,65.3
c0.3,0.8,3.6,4.3,3.7,1.9c0.6-12-0.9-23.9-4.5-35.4c-1.1-0.3-2.3-0.6-3.4-1c12.9,20.9,22.4,43.5,28.1,67.4c0.2,0.8,3,4,3.7,2.3
c7.1-17.8,11.8-36.6,13-55.8c1-16.3-1.2-32.6-10.2-46.6c-0.8,0.2-1.7,0.4-2.5,0.6c8.8,12.4,15.3,26,19.7,40.5
c0.2,0.7,3.3,4.1,3.7,2.3c6.3-27.8,0.1-56.9-16.3-80.1c-0.1,0.8-0.1,1.5-0.2,2.3c13.1,0.9,26.1,1.7,39.2,2.6
c2,0.1-0.2-2.8-0.7-3.2c-13.4-11.2-28-20.6-43.7-28.1c0.8,1.2,1.6,2.5,2.4,3.7c12.3-14.2,19.5-31.7,20.8-50.4
c0.1-1.1-2.5-4-3.7-3c-9.7,8.2-20.1,15.3-31.3,21.3c1.2,1.2,2.3,2.4,3.5,3.6c12.6-20.3,15.5-45.1,7.9-67.7
c-0.3-0.8-2.9-4-3.7-2.3c-5.1,11.4-11.8,21.8-20,31.1c1.2,1,2.4,2,3.7,3c-0.3-18.9-8.1-36.8-21.4-50.3c-0.5-0.5-2.9-2.2-2.8-0.4
c0.8,13.9,0.9,27.8,0.1,41.8c-0.1,1.5,3.7,4.5,3.8,2.3c0.7-13.9,0.7-27.9-0.1-41.8c-0.9-0.1-1.8-0.2-2.8-0.4
c12.3,12.4,19,28.9,19.2,46.3c0,1,2.6,4.2,3.7,3c8.4-9.5,15.2-20.1,20.3-31.7c-1.2-0.8-2.5-1.5-3.7-2.3c7.4,21.8,4.4,46-7.7,65.5
c-0.9,1.4,2,4.4,3.5,3.6c11.2-6,21.6-13.1,31.3-21.3c-1.2-1-2.4-2-3.7-3c-1.2,18.2-8.4,35.4-20.4,49.1c-1.1,1.2,1.5,3.2,2.4,3.7
c15,7.2,29,16.2,41.7,26.9c-0.2-1.1-0.5-2.2-0.7-3.2c-13.1-0.9-26.1-1.7-39.2-2.6c-1.5-0.1-0.6,1.7-0.2,2.3
c15.6,22.1,21,50.1,15,76.4c1.2,0.8,2.5,1.5,3.7,2.3c-4.6-15.3-11.6-29.5-20.8-42.5c-1.3-1.9-4.4-2.3-2.5,0.6
c9.2,14.2,10.1,31.8,8.5,48.2c-1.7,17.4-6.1,34.3-12.6,50.5c1.2,0.8,2.5,1.5,3.7,2.3c-5.8-24.2-15.5-47.2-28.6-68.4
c-0.5-0.8-4.3-3.7-3.4-1c3.5,11.2,5,22.7,4.3,34.5c1.2,0.6,2.5,1.3,3.7,1.9c-9-22.9-19.7-45.1-32.1-66.3
c-0.4-0.7-2.7-3.3-3.5-1.8c-6.3,12.8-14.4,24.4-24.3,34.6c1.2,1,2.4,2,3.7,3c-0.3-15.2-2.4-30.3-6.1-45.1
c-0.2-0.9-2.8-3.9-3.7-2.3c-10,18.6-25.1,33.7-43.5,44c1.2,1.1,2.4,2.2,3.6,3.4c6.1-12.8,7.2-26.9,3.4-40.5
c-0.2-0.8-2.6-3.7-3.6-2.5c-14,17.5-24.6,37.4-31.2,58.9c1.2,0.8,2.5,1.5,3.7,2.3c-6.1-21.8-7.8-44.5-5.1-67
c0.1-1-2.7-4.8-3.6-3.4c-18.9,28.2-46.3,50-78,62.2c1.1,1.3,2.1,2.5,3.2,3.8c11.7-16.2,19.3-34.7,22.4-54.4
c0.2-1.3-3-4.9-3.8-3.1c-16.3,39-73,62.3-66.9,110.2c1.2,0.5,2.3,0.9,3.5,1.4c-14-25.8-14.5-57.3-1.8-83.7
c0.6-1.3-2.4-4.2-3.6-3.4c-15.7,10.4-33.2,17.5-51.7,21c1,1.3,1.9,2.6,2.9,3.9c31.8-14.2,47.2-47.6,60.2-77.9
c0.6-1.3-2.1-3.9-3.3-3.5c-17.3,4.9-34.6,9.8-51.9,14.6c1.1,1.3,2.1,2.5,3.2,3.8c27-20.8,50.4-45.9,69.3-74.3
c0.9-1.3-1.5-3.7-2.8-3.8c-18.7-1.2-37.4-2.5-56.1-3.7c0.8,1.3,1.7,2.6,2.5,3.9c36-13.1,72-26.3,108-39.6
c1.6-0.6-0.9-3.2-1.6-3.6c-13.9-7.5-27.8-14.9-41.6-22.4c0.4,1.2,0.8,2.4,1.2,3.6c37.5,5.4,75.5,5.3,113-0.2
c0.2-0.1,0.4-0.2,0.4-0.4c1.2-11.5-0.3-23.7-7.1-33.4c-0.4,0.6-0.7,1.3-1.1,1.9c13.1,8.2,24.4,18.7,36.9,27.7
c11.4,8.3,23.7,14.4,37.6,17.1c0.6,0.1,0.8-0.3,0.8-0.8c0.4-10.1,2.3-19.8,5.6-29.3c-1.2-0.8-2.5-1.5-3.7-2.3
c6.6,17.5,16.4,33.4,28.9,47.4C345.8,73.3,347.4,71.7,345.4,69.5L345.4,69.5z"/>
</g>
</g>
<g v-if="hair===1">
<path fill="#A48B78" d="M334,75c-6.7-12.3-13.3-24.5-20-36.8c-3,8.9-6,17.8-9,26.7c-16.9-13.6-35-25.8-53.9-36.4
c1.4,7.3,2.8,14.6,4.2,22c-18.8-4.3-36.8-12.8-52.1-24.9c-1.7,11.7,1.6,24,8.8,33.2c-25.1-1.1-50.1-4.8-74.4-11.1
c10.2,8.6,20.5,17.2,30.7,25.8c-20,3.5-39.8,8.4-59.3,14.5c10.2-0.8,20.5-1,30.7-0.4c-19.8,17.4-40.6,33.5-62.4,48.2
c13.8-3.6,27.7-7.2,41.5-10.7c-15.4,20.9-29.6,42.7-42.6,65.3c7.7-8.2,16.2-15.6,25.3-22c-15.9,22.3-32.6,44-50,65.1
c12.8-4.9,25.6-9.9,38.3-14.8c-4.8,17.4-6.7,35.7-5.5,53.7c9.8-11.6,19.6-23.1,29.3-34.7c-2.7,11.7-3.5,23.8-2.3,35.7
c21.8-29,44.1-58.4,73.3-79.4c-3,11.6-5.9,23.2-8.9,34.8c15.5-13.5,31.1-27,46.6-40.5c-3.1,8.3-6.3,16.5-9.4,24.8
c17.3-11.7,34.9-22.9,52.8-33.7c-4.6,8.8-8.4,18.2-11.2,27.8c13.2-8.4,26-17.3,38.5-26.7c3,13.7,7.1,27.1,12.4,40
c8-10.8,14.1-23.1,17.7-36.2c7,16.3,15.9,31.8,26.5,46c5.4-10.1,6.9-22.3,4.3-33.5c8.7,20.7,13.9,42.8,15.5,65.2
c5.8-11.4,9-24.3,9-37.2c8.9,7.6,17.9,15.1,26.8,22.7c-3.1-19.8-8-39.3-14.8-58.1c7.3,5.7,15.4,10.3,23.9,13.6
c-8-18.3-10.8-34.4-27.5-44.9c8.8-10,7.1-19.6,15.9-29.6c-9.8,0.7-19.7,1.4-29.5,2.1c9.5-13.4,17.5-28,23.6-43.4
c-8.7,4.1-17.4,8.2-26.1,12.3c-0.4-20.8-4.8-41.4-13-60.4c-8.4,13.7-18.9,26-31.1,36.2"/>
<g>
<path fill="#A48B78" d="M336.3,73.7c-6.7-12.3-13.3-24.5-20-36.8c-1-1.8-4.2,0.7-4.6,1.9c-3,8.9-6,17.8-9,26.7
c1.4-0.7,2.9-1.4,4.3-2.2c-17-13.6-34.9-25.7-53.9-36.4c-1.3-0.8-4.7,0.9-4.3,2.6c1.4,7.3,2.8,14.6,4.2,22
c1.3-0.9,2.6-1.8,3.9-2.8c-18.9-4.4-36.4-12.8-51.7-24.7c-1.2-0.9-4.1,0.8-4.3,2.2c-1.5,12.2,1.5,24.2,8.9,34
c1.1-1.1,2.2-2.1,3.3-3.2c-25-1.1-49.7-4.9-73.9-11.1c-1.4-0.4-5.3,1.9-3.5,3.4c10.2,8.6,20.5,17.2,30.7,25.8
c0.8-1.1,1.6-2.3,2.4-3.4c-20.1,3.6-39.8,8.4-59.3,14.5c-1.2,0.4-4.7,3.9-1.5,3.6c10.2-0.8,20.4-0.9,30.7-0.4
c-0.1-0.9-0.2-1.8-0.3-2.7c-19.6,17.2-40.2,33.2-61.8,47.8c-1.4,0.9-2.5,3.8,0.3,3c13.8-3.6,27.7-7.2,41.5-10.7
c-0.4-0.7-0.9-1.4-1.3-2.2c-15.5,21.1-29.8,43.1-42.9,65.7c-1.6,2.7,3,1.3,3.9,0.3c7.6-8,15.9-15.2,24.9-21.6
c-1-0.4-2.1-0.8-3.1-1.3c-15.9,22.3-32.6,44-50,65.1c-1.4,1.7,0.3,2.6,1.9,2c12.8-4.9,25.6-9.9,38.3-14.8c-0.8-0.3-1.6-0.7-2.5-1
c-4.8,17.7-6.7,35.9-5.5,54.1c0.1,2.1,3.6,0.1,4.2-0.6c9.8-11.6,19.6-23.1,29.3-34.7c-1.4,0-2.7,0.1-4.1,0.1
c-2.7,11.9-3.5,24-2.4,36.2c0.2,2,3.6,0.2,4.2-0.6c21.6-28.6,43.6-57.6,72.8-79c-1.2-0.1-2.4-0.2-3.6-0.3
c-3,11.6-5.9,23.2-8.9,34.8c-0.6,2.2,2.9,1,3.6,0.3c15.5-13.5,31.1-27,46.6-40.5c-1.2-0.1-2.4-0.2-3.6-0.3
c-3.1,8.3-6.3,16.5-9.4,24.8c-0.7,1.9,2.4,1.2,3.1,0.7c17.3-11.7,34.9-22.9,52.8-33.7c-1-0.4-1.9-0.8-2.9-1.2
c-4.7,9.1-8.5,18.5-11.4,28.2c-0.6,1.9,2.3,1.2,3.1,0.7c13.4-8.6,26.4-17.6,39.1-27.1c-1.2,0-2.5,0.1-3.7,0.1
c3.1,13.8,7.2,27.3,12.5,40.4c0.6,1.5,3.5-0.2,4-0.9c8.3-11.3,14.4-23.7,18.2-37.1c-1.5,0.6-3,1.3-4.6,1.9
c7.1,16.3,15.9,31.7,26.5,46c1.1,1.4,3.8-0.3,4.4-1.4c5.4-10.7,7.1-22.6,4.6-34.4c-1.5,0.8-3.1,1.5-4.6,2.3
c8.6,20.7,13.7,42.5,15.4,64.8c0.2,2.2,4-0.1,4.5-1c5.9-11.9,9.1-24.8,9.3-38.1c-1.4,0.9-2.9,1.7-4.3,2.6
c8.9,7.6,17.9,15.1,26.8,22.7c1.3,1.1,4.6-1.1,4.3-2.6c-3.1-19.9-8.1-39.5-14.9-58.5c-1.4,1-2.8,2-4.2,3
c7.5,5.7,15.6,10.3,24.4,13.8c1.4,0.6,4.5-1.5,3.8-3.2c-7.2-16.7-11.7-34.7-27.8-45.1c-0.1,0.7-0.1,1.4-0.2,2
c7.4-8.9,8.6-20.8,15.9-29.6c0.7-0.9,0.8-2.4-0.7-2.3c-9.8,0.7-19.7,1.4-29.5,2.1c0.4,0.6,0.7,1.2,1.1,1.8
c9.6-13.7,17.5-28.4,23.8-43.9c0.6-1.5-1.8-1.4-2.5-1c-8.7,4.1-17.4,8.2-26.1,12.3c0.8,0.2,1.7,0.4,2.5,0.6
c-0.5-21-4.9-41.5-13.1-60.8c-0.7-1.7-3.9,0.6-4.4,1.4c-8.2,13.3-18.4,25.2-30.3,35.3c-2.7,2.3,0.7,3.4,2.7,1.7
c12.5-10.7,23.2-23.2,31.9-37.2c-1.5,0.5-2.9,0.9-4.4,1.4c8.1,19,12.4,39.3,12.9,60c0,1.2,1.9,0.9,2.5,0.6
c8.7-4.1,17.4-8.2,26.1-12.3c-0.8-0.3-1.6-0.7-2.5-1c-6.1,15.2-14,29.5-23.4,42.9c-0.6,0.9,0,1.9,1.1,1.8
c9.8-0.7,19.7-1.4,29.5-2.1c-0.2-0.8-0.5-1.5-0.7-2.3c-7.4,8.9-8.6,20.8-15.9,29.6c-0.4,0.5-0.9,1.5-0.2,2
c15.9,10.3,20.2,28.2,27.2,44.6c1.3-1.1,2.5-2.1,3.8-3.2c-8.5-3.4-16.3-7.9-23.5-13.4c-1.5-1.1-4.8,1.3-4.2,3
c6.7,18.8,11.6,38,14.7,57.7c1.4-0.9,2.9-1.7,4.3-2.6c-8.9-7.6-17.9-15.1-26.8-22.7c-1.4-1.2-4.3,1.1-4.3,2.6
c-0.2,12.7-3.2,24.9-8.8,36.3c1.5-0.3,3-0.7,4.5-1c-1.7-22.6-7-44.7-15.6-65.6c-0.7-1.7-5,0.7-4.6,2.3
c2.4,11.1,1.1,22.4-4.1,32.6c1.5-0.5,2.9-0.9,4.4-1.4c-10.6-14.3-19.5-29.7-26.5-46c-0.8-1.9-4.3,0.8-4.6,1.9
c-3.6,12.7-9.3,24.6-17.1,35.2c1.3-0.3,2.7-0.6,4-0.9c-5.2-12.9-9.3-26.1-12.3-39.6c-0.4-1.8-2.9-0.5-3.7,0.1
c-12.3,9.2-25,18-38,26.3c1,0.2,2.1,0.5,3.1,0.7c2.9-9.4,6.5-18.5,11-27.3c1.1-2.1-1.7-1.9-2.9-1.2
c-17.9,10.8-35.4,22.1-52.8,33.7c1,0.2,2.1,0.5,3.1,0.7c3.1-8.3,6.3-16.5,9.4-24.8c0.8-2.2-3-0.9-3.6-0.3
c-15.5,13.5-31.1,27-46.6,40.5c1.2,0.1,2.4,0.2,3.6,0.3c3-11.6,5.9-23.2,8.9-34.8c0.6-2.3-2.9-0.9-3.6-0.3
c-29.6,21.6-51.9,50.9-73.7,79.9c1.4-0.2,2.8-0.4,4.2-0.6c-1.1-11.9-0.4-23.7,2.3-35.3c0.6-2.5-3.4-0.7-4.1,0.1
c-9.8,11.6-19.6,23.1-29.3,34.7c1.4-0.2,2.8-0.4,4.2-0.6c-1.1-18,0.7-35.9,5.4-53.3c0.4-1.6-1.6-1.4-2.5-1
c-12.8,4.9-25.6,9.9-38.3,14.8c0.6,0.7,1.3,1.3,1.9,2c17.4-21.1,34.1-42.8,50-65.1c1.9-2.7-1.6-2.3-3.1-1.3
c-9.3,6.6-17.9,14.2-25.8,22.5c1.3,0.1,2.6,0.2,3.9,0.3c12.9-22.3,27-44,42.3-64.8c0.9-1.3,0.5-2.6-1.3-2.2
c-13.8,3.6-27.7,7.2-41.5,10.7c0.1,1,0.2,2,0.3,3c22-14.9,43-31.1,62.9-48.6c1-0.9,1.6-2.6-0.3-2.7c-10.2-0.5-20.5-0.4-30.7,0.4
c-0.5,1.2-1,2.4-1.5,3.6c19.4-6.1,39.2-10.9,59.3-14.5c1.1-0.2,3.9-2.1,2.4-3.4c-10.2-8.6-20.5-17.2-30.7-25.8
c-1.2,1.1-2.3,2.3-3.5,3.4c24.5,6.3,49.6,10,74.9,11.1c1.1,0,4.4-1.8,3.3-3.2c-7-9.3-10.2-20.8-8.7-32.4
c-1.4,0.7-2.9,1.4-4.3,2.2c15.5,12.1,33.3,20.6,52.5,25c1.3,0.3,4.2-1.1,3.9-2.8c-1.4-7.3-2.8-14.6-4.2-22
c-1.4,0.9-2.9,1.7-4.3,2.6c18.9,10.7,36.9,22.8,53.9,36.4c1.4,1.1,3.9-0.9,4.3-2.2c3-8.9,6-17.8,9-26.7c-1.5,0.6-3,1.3-4.6,1.9
c6.7,12.3,13.3,24.5,20,36.8C332.7,78.1,337.2,75.5,336.3,73.7L336.3,73.7z"/>
</g>
</g>
<g v-if="hair===2">
<path fill="#A48B78" d="M381.1,271.6c0.1-38.1,4.6-170.8,4.2-174c-0.5-4.9-82.6-30.7-144.7-30.7c-58.9,0-129.8,29.3-133.8,36.7
c-3.2,6-3.6,13.1-3.9,19.9c-2.3,51.2,3.3,104.4,3.4,155.6c0,5.2,10-5.7,13.8-14.6c-2.5-0.4,8.1-48.1,7.3-57.9
c-0.5-6.1-2.1-13.2,2.1-17.7c3.1-3.4,8.3-3.8,12.9-3.8c32.4,0.2,64.3,10.9,96.8,9.4c36.6-1.7,72.9-18.7,108.7-11.1
c3.3,0.7,6.7,1.7,9,4.1c2.1,2.2,2.9,5.3,3.7,8.3c7.1,28.2,11,58.3,11.3,59.9C372.1,256.8,381.1,271.6,381.1,271.6z"/>
<g>
<path fill="#A48B78" d="M383.7,271.2c0.2-38.8,1.7-77.6,2.8-116.4c0.5-16.2,1-32.5,1.3-48.7c0.1-2.6,0.8-6.3,0.1-8.8
c-0.9-3.4-6.7-5-9.5-6.2c-20.2-8.2-42.1-13.3-63.4-17.7c-27.5-5.6-55.8-9.7-83.9-8.4c-28.6,1.4-57.1,8.1-84.1,17.2
c-10.1,3.4-20.1,7.2-29.6,11.9c-4.3,2.1-10.2,4.5-12.9,8.7c-4,6.3-3.9,15.1-4.2,22.3c-0.4,8.8-0.5,17.5-0.5,26.3
c0,18.3,0.8,36.6,1.6,55c0.8,18.3,1.7,36.6,2.1,54.9c0.1,4.1,0.2,8.3,0.2,12.4c0,2.1-0.8,6.1,0.9,7.8c2.5,2.5,6.2-0.4,8.1-2.2
c4.1-3.9,7.5-9.1,9.8-14.2c0.4-0.9,0.2-2-0.8-2.4c1.3,0.6,0.4,0.7,0.6-0.9c0.2-1.6,0.3-3.1,0.5-4.7c0.5-4.1,1.2-8.1,1.9-12.2
c1.6-9.4,3.3-18.8,4.6-28.3c0.4-3.2,0.9-6.4,0.8-9.6c-0.2-6.1-3.2-15.4,4-18.7c3.5-1.6,7.8-1.2,11.6-1.1
c4.4,0.1,8.7,0.4,13.1,0.9c8.7,0.8,17.4,2.2,26,3.5c16.9,2.6,33.9,5.4,51.1,5c16.4-0.4,32.4-3.9,48.3-7.2
c16.4-3.4,33.1-6.8,50-5.8c7.5,0.5,19.1,0.6,22.5,8.6c3.3,7.7,4.3,17.2,6,25.4c2.5,12.3,4.1,24.8,6.3,37.2
c1.1,6.3,6.3,12.4,9.6,17.7c1.4,2.2,6.3,0.6,4.8-1.8c-3.2-5.2-8.2-11.2-9.3-17.1c-2.3-12.5-3.9-25.1-6.4-37.6
c-1.7-8.2-3-17-5.9-24.8c-2.7-7.4-9.4-9.2-16.5-10.5c-17-3-34.3-0.7-51,2.5c-17.8,3.4-35.6,8-53.7,9.1
c-19.4,1.1-38.7-2.3-57.8-5.3c-9.3-1.4-18.5-2.8-27.9-3.5c-7.1-0.5-15.7-1.8-22.5,0.9c-12.1,4.7-6.9,18-7.8,27.8
c-1.1,11.2-3.4,22.3-5.2,33.4c-0.8,4.7-1.6,9.5-2.1,14.2c-0.2,1.7-0.9,5.4,1.2,6.3c-0.3-0.8-0.5-1.6-0.8-2.4
c-1.3,2.8-2.8,5.4-4.6,7.9c-0.8,1.1-1.7,2.3-2.6,3.3c-0.6,0.7-2.5,2-2.8,2.8c-0.2,0.1-0.4,0.3-0.6,0.4c0.6,0.1,1.2,0.3,1.8,0.4
c0.3-0.4,0-2.3,0-2.9c0-1.9,0-3.8-0.1-5.7c-0.1-4.5-0.2-8.9-0.3-13.4c-0.5-17-1.3-34-2-51.1c-0.8-17-1.4-34.1-1.6-51.1
c-0.1-8.7,0-17.5,0.3-26.2c0.2-6.9-0.6-18.2,3.9-24.1c2.7-3.5,8.9-5.8,12.9-7.7c9.3-4.3,19-8,28.7-11.2
c25.8-8.6,52.9-14.8,80.1-16.2c27.1-1.4,54.7,2.6,81.2,8c20.6,4.2,41.4,9.2,61.1,16.6c2.5,0.9,5,1.9,7.4,3.1
c0.6,0.3,1.6,0.7,2.1,1.2c0.4,0.4,0-0.1,0-0.1c0.7,2.2-0.1,5.9-0.1,8.2c-0.3,15-0.8,29.9-1.2,44.9c-1.1,37.4-2.3,74.8-2.8,112.2
c0,2.9-0.1,5.7-0.1,8.6C378.5,274.6,383.7,273.9,383.7,271.2z"/>
</g>
</g>
</g>
</svg>
</div>
<ul class="list">
<li>髪
<ul>
<li v-for="(item, index) in list.hair" @click="change('hair',index)" v-bind:class="[hair == index ? 'is-active':'']">{{item}}</li>
</ul>
</li>
<li>眉毛
<ul>
<li v-for="(item, index) in list.eyeblow" @click="change('eyeblow',index)" v-bind:class="[eyeblow == index ? 'is-active':'']">{{item}}</li>
</ul>
</li>
<li>目
<ul>
<li v-for="(item, index) in list.eye" @click="change('eye',index)" v-bind:class="[eye == index ? 'is-active':'']">{{item}}</li>
</ul>
</li>
<li>鼻
<ul>
<li v-for="(item, index) in list.nose" @click="change('nose',index)" v-bind:class="[nose == index ? 'is-active':'']">{{item}}</li>
</ul>
</li>
<li>口
<ul>
<li v-for="(item, index) in list.mouse" @click="change('mouse',index)" v-bind:class="[mouse == index ? 'is-active':'']">{{item}}</li>
</ul>
</li>
<li>輪郭
<ul>
<li v-for="(item, index) in list.face" @click="change('face',index)" v-bind:class="[face == index ? 'is-active':'']">{{item}}</li>
</ul>
</li>
</ul>
<canvas id="canvas"></canvas><a id="dl" download="face.png">ダウンロード</a>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
main.babel.js
let canvas;
let ctx;
const app = new Vue({
el: '#app',
data: {
hair:0,
eye:0,
eyeblow: 0,
nose: 0,
mouse: 0,
face: 0,
list: {
hair:['普通','ショート','角刈り'],
eyeblow: ['ナチュナル','シャキーン',"なし"],
eye: ['普通',"つぶらな瞳",'デカ目'],
nose: ['普通','高い',"丸い"],
mouse: ['普通','への字'],
face: ['普通','三角','ベース'],
}
},
mounted(){
canvas = document.querySelector("#canvas");
setTimeout(()=>{
ctx = canvas.getContext("2d")
canvas.width = 500;
canvas.height = 500;
},0)
},
methods: {
change(parts,index){
ctx.clearRect(0,0,500,500);
ctx.beginPath();
this[parts] = index;
setTimeout(()=>{
const svg = document.querySelector("svg");
const data = new XMLSerializer().serializeToString(svg)
const imgsrc = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(data)))
const image = new Image()
image.onload = function(){
ctx.drawImage(image, 0, 0);
const url = canvas.toDataURL("image/png")
document.querySelector("#dl").href = url;
}
image.src = imgsrc;
},0)
}
}
})
Raw
main.js
/**
* Modules in this bundle
* @license
*
* oreore:
* license: ISC (http://opensource.org/licenses/ISC)
* author: shota tanno
* homepage: tanshio.net
* version: 0.0.0
*
* This header is generated by licensify (https://github.com/twada/licensify)
*/
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var canvas = void 0;
var ctx = void 0;
var app = new Vue({
el: '#app',
data: {
hair: 0,
eye: 0,
eyeblow: 0,
nose: 0,
mouse: 0,
face: 0,
list: {
hair: ['普通', 'ショート', '角刈り'],
eyeblow: ['ナチュナル', 'シャキーン', "なし"],
eye: ['普通', "つぶらな瞳", 'デカ目'],
nose: ['普通', '高い', "丸い"],
mouse: ['普通', 'への字'],
face: ['普通', '三角', 'ベース']
}
},
mounted: function mounted() {
canvas = document.querySelector("#canvas");
setTimeout(function () {
ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
}, 0);
},
methods: {
change: function change(parts, index) {
ctx.clearRect(0, 0, 500, 500);
ctx.beginPath();
this[parts] = index;
setTimeout(function () {
var svg = document.querySelector("svg");
var data = new XMLSerializer().serializeToString(svg);
var imgsrc = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(data)));
var image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0);
var url = canvas.toDataURL("image/png");
document.querySelector("#dl").href = url;
};
image.src = imgsrc;
}, 0);
}
}
});
},{}]},{},[1])
Raw
style.css
#app svg {
max-width: 500px;
}
.list li {
font-weight: bold;
}
.list ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.list ul li {
font-weight: normal;
}
.list ul li.is-active {
color: #CC0000;
font-weight: bold;
}
.list > li {
margin-right: 2em;
display: inline-block;
vertical-align: top;
}
canvas {
position: absolute;
visibility: hidden;
z-index: -1;
top: 0;
left: 0;
transform: scale(0);
}
Raw
style.scss
#app {
svg {
max-width: 500px
}
}
.list {
li {
font-weight: bold;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
font-weight: normal;
&.is-active {
color: #CC0000;
font-weight: bold;
}
}
}
& > li {
margin-right: 2em;
display: inline-block;
vertical-align: top;
}
}
canvas {
position: absolute;
visibility: hidden;
z-index: -1;
top: 0;
left: 0;
transform: scale(0)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment