glm-5 - SVG Viewer

IJuLDemB

N/A

5.29 KB2.36 KB-55%

<svg role="img" aria-labelledby="title desc" height="300" width="400" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
                    <title>Pelican Riding Bicycle</title>
                    <desc>A cartoon illustration of a pelican with a large beak pouch riding a simple red bicycle.</desc>
                    <style>
                        .pelican-body { fill: #f0f0f0; stroke: #333; stroke-width: 1.5; }
                        .pelican-beak { fill: #ffcc66; stroke: #b38f4d; stroke-width: 1; }
                        .pelican-pouch { fill: #ffe0b3; stroke: #b38f4d; stroke-width: 1; }
                        .pelican-eye { fill: #333; }
                        .pelican-leg { fill: #ffaa4d; stroke: #b37736; stroke-width: 1; }
                        .bike-frame { fill: none; stroke: #cc3333; stroke-width: 4; }
                        .bike-wheel { fill: none; stroke: #555; stroke-width: 3; }
                        .bike-tire { fill: none; stroke: #333; stroke-width: 5; }
                        .bike-spoke { stroke: #888; stroke-width: 1; }
                        .bike-seat { fill: #444; }
                        .bike-handlebar { fill: none; stroke: #666; stroke-width: 3; }
                        .bike-pedal { fill: #555; stroke: #333; stroke-width: 0.5; }
                    </style>
                    <g id="bicycle">
                        <g transform="translate(100, 220)" id="rear-wheel">
                            <circle class="bike-tire" r="40" cy="0" cx="0"></circle>
                            <circle class="bike-wheel" r="35" cy="0" cx="0"></circle>
                            <line class="bike-spoke" y2="35" x2="0" y1="-35" x1="0"></line>
                            <line class="bike-spoke" y2="0" x2="35" y1="0" x1="-35"></line>
                            <line class="bike-spoke" y2="24.7" x2="24.7" y1="-24.7" x1="-24.7"></line>
                            <line class="bike-spoke" y2="-24.7" x2="24.7" y1="24.7" x1="-24.7"></line>
                            <circle fill="#666" r="3" cy="0" cx="0"></circle>
                        </g>
                        <g transform="translate(280, 220)" id="front-wheel">
                            <circle class="bike-tire" r="40" cy="0" cx="0"></circle>
                            <circle class="bike-wheel" r="35" cy="0" cx="0"></circle>
                            <line class="bike-spoke" y2="35" x2="0" y1="-35" x1="0"></line>
                            <line class="bike-spoke" y2="0" x2="35" y1="0" x1="-35"></line>
                            <line class="bike-spoke" y2="24.7" x2="24.7" y1="-24.7" x1="-24.7"></line>
                            <line class="bike-spoke" y2="-24.7" x2="24.7" y1="24.7" x1="-24.7"></line>
                            <circle fill="#666" r="3" cy="0" cx="0"></circle>
                        </g>
                        <path class="bike-frame" d="M 100 220 L 190 150 L 250 220 M 190 150 L 135 140"></path>
                        <line class="bike-frame" y2="220" x2="100" y1="220" x1="190"></line>
                        <line class="bike-frame" y2="220" x2="280" y1="220" x1="190"></line>
                        <line class="bike-frame" y2="220" x2="280" y1="220" x1="250"></line>
                        <line class="bike-frame" y2="155" x2="265" y1="220" x1="250"></line>
                        <line class="bike-frame" y2="220" x2="100" y1="140" x1="135"></line>
                        <path class="bike-seat" d="M 120 135 h 30 q 5 0 5 5 v 10 q 0 5 -5 5 h -30 q -5 0 -5 -5 v -10 q 0 -5 5 -5 z"></path>
                        <path class="bike-handlebar" d="M 255 145 q -10 -15 -25 -15 M 275 145 q 10 -15 25 -15"></path>
                        <line stroke-width="4" class="bike-handlebar" y2="145" x2="265" y1="155" x1="265"></line>
                        <circle fill="#666" r="5" cy="220" cx="190"></circle>
                        <line stroke-width="2" stroke="#555" y2="235" x2="175" y1="220" x1="190"></line>
                        <rect class="bike-pedal" rx="1" height="6" width="14" y="232" x="168"></rect>
                        <line stroke-width="2" stroke="#555" y2="205" x2="205" y1="220" x1="190"></line>
                        <rect class="bike-pedal" transform="rotate(-45 209 205)" rx="1" height="6" width="14" y="202" x="202"></rect>
                    </g>
                    <g transform="translate(0, -10)" id="pelican">
                        <path class="pelican-leg" d="M 175 155 Q 170 190 175 230 L 175 234"></path>
                        <path class="pelican-leg" d="M 195 155 Q 200 190 205 205 L 210 207"></path>
                        <path class="pelican-body" d="M 150 160 Q 140 120 180 90 Q 220 120 210 160 Q 190 180 150 160 Z"></path>
                        <path stroke-width="1" stroke="#333" fill="#e0e0e0" d="M 160 140 Q 130 145 145 170"></path>
                        <path fill="#f0f0f0" stroke-width="1.5" class="pelican-body" d="M 175 95 Q 180 115 195 120"></path>
                        <circle class="pelican-body" r="15" cy="85" cx="195"></circle>
                        <path class="pelican-beak" d="M 205 80 Q 250 75 260 85"></path>
                        <path class="pelican-pouch" d="M 205 88 Q 250 95 260 87 L 260 85 Q 240 115 205 88 Z"></path>
                        <circle class="pelican-eye" r="2.5" cy="80" cx="198"></circle>
                    </g>
                </svg>

Upload

Preview React React Native PNG Data URI

5.29 KB2.36 KB-55%

<svg role="img" aria-labelledby="title desc" height="300" width="400" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
                    <title>Pelican Riding Bicycle</title>
                    <desc>A cartoon illustration of a pelican with a large beak pouch riding a simple red bicycle.</desc>
                    <style>
                        .pelican-body { fill: #f0f0f0; stroke: #333; stroke-width: 1.5; }
                        .pelican-beak { fill: #ffcc66; stroke: #b38f4d; stroke-width: 1; }
                        .pelican-pouch { fill: #ffe0b3; stroke: #b38f4d; stroke-width: 1; }
                        .pelican-eye { fill: #333; }
                        .pelican-leg { fill: #ffaa4d; stroke: #b37736; stroke-width: 1; }
                        .bike-frame { fill: none; stroke: #cc3333; stroke-width: 4; }
                        .bike-wheel { fill: none; stroke: #555; stroke-width: 3; }
                        .bike-tire { fill: none; stroke: #333; stroke-width: 5; }
                        .bike-spoke { stroke: #888; stroke-width: 1; }
                        .bike-seat { fill: #444; }
                        .bike-handlebar { fill: none; stroke: #666; stroke-width: 3; }
                        .bike-pedal { fill: #555; stroke: #333; stroke-width: 0.5; }
                    </style>
                    <g id="bicycle">
                        <g transform="translate(100, 220)" id="rear-wheel">
                            <circle class="bike-tire" r="40" cy="0" cx="0"></circle>
                            <circle class="bike-wheel" r="35" cy="0" cx="0"></circle>
                            <line class="bike-spoke" y2="35" x2="0" y1="-35" x1="0"></line>
                            <line class="bike-spoke" y2="0" x2="35" y1="0" x1="-35"></line>
                            <line class="bike-spoke" y2="24.7" x2="24.7" y1="-24.7" x1="-24.7"></line>
                            <line class="bike-spoke" y2="-24.7" x2="24.7" y1="24.7" x1="-24.7"></line>
                            <circle fill="#666" r="3" cy="0" cx="0"></circle>
                        </g>
                        <g transform="translate(280, 220)" id="front-wheel">
                            <circle class="bike-tire" r="40" cy="0" cx="0"></circle>
                            <circle class="bike-wheel" r="35" cy="0" cx="0"></circle>
                            <line class="bike-spoke" y2="35" x2="0" y1="-35" x1="0"></line>
                            <line class="bike-spoke" y2="0" x2="35" y1="0" x1="-35"></line>
                            <line class="bike-spoke" y2="24.7" x2="24.7" y1="-24.7" x1="-24.7"></line>
                            <line class="bike-spoke" y2="-24.7" x2="24.7" y1="24.7" x1="-24.7"></line>
                            <circle fill="#666" r="3" cy="0" cx="0"></circle>
                        </g>
                        <path class="bike-frame" d="M 100 220 L 190 150 L 250 220 M 190 150 L 135 140"></path>
                        <line class="bike-frame" y2="220" x2="100" y1="220" x1="190"></line>
                        <line class="bike-frame" y2="220" x2="280" y1="220" x1="190"></line>
                        <line class="bike-frame" y2="220" x2="280" y1="220" x1="250"></line>
                        <line class="bike-frame" y2="155" x2="265" y1="220" x1="250"></line>
                        <line class="bike-frame" y2="220" x2="100" y1="140" x1="135"></line>
                        <path class="bike-seat" d="M 120 135 h 30 q 5 0 5 5 v 10 q 0 5 -5 5 h -30 q -5 0 -5 -5 v -10 q 0 -5 5 -5 z"></path>
                        <path class="bike-handlebar" d="M 255 145 q -10 -15 -25 -15 M 275 145 q 10 -15 25 -15"></path>
                        <line stroke-width="4" class="bike-handlebar" y2="145" x2="265" y1="155" x1="265"></line>
                        <circle fill="#666" r="5" cy="220" cx="190"></circle>
                        <line stroke-width="2" stroke="#555" y2="235" x2="175" y1="220" x1="190"></line>
                        <rect class="bike-pedal" rx="1" height="6" width="14" y="232" x="168"></rect>
                        <line stroke-width="2" stroke="#555" y2="205" x2="205" y1="220" x1="190"></line>
                        <rect class="bike-pedal" transform="rotate(-45 209 205)" rx="1" height="6" width="14" y="202" x="202"></rect>
                    </g>
                    <g transform="translate(0, -10)" id="pelican">
                        <path class="pelican-leg" d="M 175 155 Q 170 190 175 230 L 175 234"></path>
                        <path class="pelican-leg" d="M 195 155 Q 200 190 205 205 L 210 207"></path>
                        <path class="pelican-body" d="M 150 160 Q 140 120 180 90 Q 220 120 210 160 Q 190 180 150 160 Z"></path>
                        <path stroke-width="1" stroke="#333" fill="#e0e0e0" d="M 160 140 Q 130 145 145 170"></path>
                        <path fill="#f0f0f0" stroke-width="1.5" class="pelican-body" d="M 175 95 Q 180 115 195 120"></path>
                        <circle class="pelican-body" r="15" cy="85" cx="195"></circle>
                        <path class="pelican-beak" d="M 205 80 Q 250 75 260 85"></path>
                        <path class="pelican-pouch" d="M 205 88 Q 250 95 260 87 L 260 85 Q 240 115 205 88 Z"></path>
                        <circle class="pelican-eye" r="2.5" cy="80" cx="198"></circle>
                    </g>
                </svg>

Upload