morning routine - SVG Viewer

BBlvLYxe

N/A

2.21 KB1.64 KB-26%

<svg width="440" height="520" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#333"></polygon>
    </marker>
  </defs>
  
  <style>
    rect { fill: #f9f9f9; stroke: #333; stroke-width: 1.5; rx: 5; ry: 5; }
    polygon { fill: #f9f9f9; stroke: #333; stroke-width: 1.5; }
    text { font-family: sans-serif; font-size: 14px; fill: #000; text-anchor: middle; dominant-baseline: middle; }
    path { stroke: #333; stroke-width: 1.5; fill: none; marker-end: url(#arrowhead); }
    .label-text { font-size: 12px; fill: #555; background-color: white; }
    .label-bg { fill: white; stroke: none; }
  </style>

<g transform="translate(140, 20)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">起床</text>
  </g>

<path d="M200 60 L200 100"></path>

<g transform="translate(200, 130)">
    
    <polygon points="0,-30 70,0 0,30 -70,0"></polygon>
    <text x="0" y="0">天気は晴れ？</text>
  </g>

<path d="M130 130 L100 130 L100 200"></path>
  <rect x="90" y="150" width="30" height="20" class="label-bg"></rect>
  <text x="105" y="160" class="label-text">Yes</text>

<path d="M270 130 L300 130 L300 200"></path>
  <rect x="280" y="150" width="30" height="20" class="label-bg"></rect>
  <text x="295" y="160" class="label-text">No</text>

<g transform="translate(40, 200)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">洗濯物を干す</text>
  </g>

<g transform="translate(240, 200)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">乾燥機を回す</text>
  </g>

<path d="M100 240 L100 260 L200 260 L200 280"></path>

<path d="M300 240 L300 260 L200 260 L200 280"></path>

<g transform="translate(140, 280)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">朝食を食べる</text>
  </g>

<path d="M200 320 L200 360"></path>

<g transform="translate(140, 360)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">着替え</text>
  </g>

<path d="M200 400 L200 440"></path>

<g transform="translate(140, 440)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">家を出る</text>
  </g>

</svg>

Upload

Preview React React Native PNG Data URI

2.21 KB1.64 KB-26%

<svg width="440" height="520" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#333"></polygon>
    </marker>
  </defs>
  
  <style>
    rect { fill: #f9f9f9; stroke: #333; stroke-width: 1.5; rx: 5; ry: 5; }
    polygon { fill: #f9f9f9; stroke: #333; stroke-width: 1.5; }
    text { font-family: sans-serif; font-size: 14px; fill: #000; text-anchor: middle; dominant-baseline: middle; }
    path { stroke: #333; stroke-width: 1.5; fill: none; marker-end: url(#arrowhead); }
    .label-text { font-size: 12px; fill: #555; background-color: white; }
    .label-bg { fill: white; stroke: none; }
  </style>

<g transform="translate(140, 20)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">起床</text>
  </g>

<path d="M200 60 L200 100"></path>

<g transform="translate(200, 130)">
    
    <polygon points="0,-30 70,0 0,30 -70,0"></polygon>
    <text x="0" y="0">天気は晴れ？</text>
  </g>

<path d="M130 130 L100 130 L100 200"></path>
  <rect x="90" y="150" width="30" height="20" class="label-bg"></rect>
  <text x="105" y="160" class="label-text">Yes</text>

<path d="M270 130 L300 130 L300 200"></path>
  <rect x="280" y="150" width="30" height="20" class="label-bg"></rect>
  <text x="295" y="160" class="label-text">No</text>

<g transform="translate(40, 200)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">洗濯物を干す</text>
  </g>

<g transform="translate(240, 200)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">乾燥機を回す</text>
  </g>

<path d="M100 240 L100 260 L200 260 L200 280"></path>

<path d="M300 240 L300 260 L200 260 L200 280"></path>

<g transform="translate(140, 280)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">朝食を食べる</text>
  </g>

<path d="M200 320 L200 360"></path>

<g transform="translate(140, 360)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">着替え</text>
  </g>

<path d="M200 400 L200 440"></path>

<g transform="translate(140, 440)">
    <rect width="120" height="40"></rect>
    <text x="60" y="20">家を出る</text>
  </g>

</svg>

Upload