Surprise Animal SVG | AI Challenge
Best AI for Surprise Animal SVG
Single-shot · temp 0.7 · real votes · identical prompts·How we test →
Loading...
vs
Ask them anything yourself
Single-shot · temp 0.7 · real votes · identical prompts·How we test →
vsAsk them anything yourself
Generate SVG art of a randomly chosen animal in a setting of its choosing.
Create an SVG art of an animal of your choosing in a setting of your choosing. Surprise me.
We can't display this one. It's not us. Well... it might be us.
The model attempted an SVG. It did not go as planned. The effort was there.
<nooutput>
We can't display this one. It's not us. Well... it might be us.
The model attempted an SVG. It did not go as planned. The effort was there.
Okay, here's an SVG art of a **Sunken City Octopus in a Bioluminescent Coral Garden**, designed to be a little unexpected! I'll describe it, and then provide the code. It's a bit complex, but I'll break it down.
**Concept:**
Imagine a vibrant, fantastical coral reef at night, teeming with life. But it's not just any reef. It's a sunken city, partially submerged, with coral growing *from* the ruins. A majestic octopus, with intricate bioluminescent patterns, is exploring the city's flooded halls. It's not menacing, but curious and serene. The colors are deep blues, greens, purples, and glowing oranges/yellows. The city ruins are stylized and don't look like any specific historical architecture – more like organic, flowing forms.
**SVG Code (with explanations):**
```xml
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Background - Deep Ocean -->
<rect width="100%" height="100%" fill="#1e273f"/>
<!-- Coral Garden - Main Body -->
<g id="coral_garden">
<path d="M 0,300 C 100,200 200,150 300,100 C 400,150 500,200 600,300" fill="#48a969" stroke="#3d8613" stroke-width="2"/>
<path d="M 0,300 C 100,200 200,150 300,100 C 400,150 500,200 600,300" fill="#77a267" stroke="#598747" stroke-width="2"/>
<path d="M 0,300 C 100,200 200,150 300,100 C 400,150 500,200 600,300" fill="#a3c28a" stroke="#719955" stroke-width="2"/>
<!-- Smaller Coral/Branching Structures -->
<path d="M 100,300 C 120,250 150,200 180,150 C 210,100 240,150 270,200" fill="#e0f298" stroke="#98d35f" stroke-width="1"/>
<path d="M 300,300 C 320,250 350,200 380,150 C 410,100 440,150 470,200" fill="#f0f8ff" stroke="#d1e8b5" stroke-width="1"/>
<path d="M 500,300 C 520,250 550,200 580,150 C 610,100 640,150 670,200" fill="#e0f298" stroke="#98d35f" stroke-width="1"/>
</g>
<!-- Sunken City Ruins - Main Structure -->
<g id="city_ruins">
<rect x="250" y="250" width="150" height="100" fill="#808080" stroke="#696969" stroke-width="1"/>
<rect x="350" y="250" width="100" height="100" fill="#808080" stroke="#696969" stroke-width="1"/>
<rect x="450" y="250" width="100" height="100" fill="#808080" stroke="#696969" stroke-width="1"/>
<path d="M 270,270 C 290,250 310,230 330,210 C 350,190 370,170 390,150" stroke="#696969" stroke-width="1"/>
<path d="M 430,270 C 450,250 470,230 490,210 C 510,190 530,170 550,150" stroke="#696969" stroke-width="1"/>
</g>
<!-- Octopus - Main Body -->
<g id="octopus">
<ellipse cx="400" cy="250" rx="80" ry="40" fill="#009688" stroke="#007744" stroke-width="2"/>
<ellipse cx="350" cy="250" rx="60" ry="30" fill="#009688" stroke="#007744" stroke-width="2"/>
<ellipse cx="450" cy="250" rx="80" ry="40" fill="#009688" stroke="#007744" stroke-width="2"/>
</g>
<!-- Octopus - Tentacles -->
<g id="tentacles">
<path d="M 400,250 L 300,300 L 350,250 Z" fill="none" stroke="#009688" stroke-width="5"/>
<path d="M 400,250 L 450,300 L 400,250 Z" fill="none" stroke="#009688" stroke-width="5"/>
<path d="M 400,250 L 300,200 L 350,250 Z" fill="none" stroke="#009688" stroke-width="5"/>
<path d="M 400,250 L 450,200 L 400,250 Z" fill="none" stroke="#009688" stroke-width="5"/>
<path d="M 400,250 L 250,300 L 300,250 Z" fill="none" stroke="#009688" stroke-width="5"/>
<path d="M 400,250 L 500,300 L 450,250 Z" fill="none" stroke="#009688" stroke-width="5"/>
</g>
<!-- Bioluminescent Patterns - Octopus Body -->
<path d="M 350,250 C 370,230 400,210 430,250" fill="none" stroke="#ffcc00" stroke-width="2"/>
<path d="M 430,250 C 450,230 480,210 510,250" fill="none" stroke="#ffcc00" stroke-width="2"/>
<path d="M 300,250 C 280,230 250,210 220,250" fill="none" stroke="#ffcc00" stroke-width="2"/>
<path d="M 450,250 C 480,230 510,210 540,250" fill="none" stroke="#ffcc00" stroke-width="2"/>
<!-- Bioluminescent Patterns - Tentacles -->
<path d="M 300,300 C 280,320 250,340 220,330" fill="none" stroke="#ffcc00" stroke-width="2"/>
<path d="M 450,300 C 480,320 510,340 540,330" fill="none" stroke="#ffcc00
a custom page to create your own custom theme, or to create your own custom theme."
So, if you want to send your own custom page and its content to others, you go to File > New > Copy…
Make sure you have all the following things setup. You're going to take the URL of the file you want to send to the recipients (assuming you have your own URL/domain), and paste this URL from there to your web page. Now, you should be able to see your page.
If you're using your own URL, or you have custom content, you should also check the 'Create a custom page' b ox. In that case, you should be able to get your page to see your page in action and create a custom theme. You can see this page under the 'Name' field of your theme's HTML, and you should check the 'Create a custom page' box with the URL in the top left (
I'm sorry, but I am not able to create SVG art as I am a text-based AI. However, I can try to describe an idea for you to create your own SVG art.
How about an SVG art of a majestic lion peacefully resting under the shade of a big tree in the savannah with the setting sun casting a warm glow over the landscape? The lion's golden mane gently sways in the breeze as the birds chirp softly in the background. The details of the lion's fur and the tree leaves can be intricately designed to add depth and realism to the scene. This serene and natural setting captures the beauty and power of the king of the jungle.
As an AI, I'm currently unable to generate visual graphics or SVG arts directly. You might need a human artist or a specialized AI-based graphic design tool for this particular request. My main function is to assist users in generating human-like text based on the prompts given to me. Let me know if there's any text-based assistance you need!
We can't display this one. It's not us. Well... it might be us.
The model attempted an SVG. It did not go as planned. The effort was there.
```svg
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Cosmic Background Gradient -->
<linearGradient id="spaceBg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#0d0221;stop-opacity:1" />
<stop offset="50%" style="stop-color:#1a0b3c;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2d1b69;stop-opacity:1" />
</linearGradient>
<!-- Nebula Clouds -->
<radialGradient id="nebula1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#ff006e;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#ff006e;stop-opacity:0" />
</radialGradient>
<radialGradient id="nebula2" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#00f5ff;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#00f5ff;stop-opacity:0" />
</radialGradient>
<!-- Turtle Shell Gradient -->
<linearGradient id="shellGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d9c0;stop-opacity:1" />
<stop offset="50%" style="stop-color:#0077b6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#023e8a;stop-opacity:1" />
</linearGradient>
<!-- Skin Gradient -->
<radialGradient id="skinGrad" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#48cae4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#023e8a;stop-opacity:1" />
</radialGradient>
<!-- Bioluminescent Glow -->
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Star Twinkle -->
<filter id="twinkle">
<feGaussianBlur stdDeviation="0.5" />
</filter>
</defs>
<!-- Background -->
<rect width="800" height="600" fill="url(#spaceBg)" />
<!-- Distant Stars -->
<g fill="#ffffff" opacity="0.8">
<circle cx="100" cy="80" r="1.5" opacity="0.6"/>
<circle cx="250" cy="150" r="1" opacity="0.8"/>
<circle cx="500" cy="50" r="2" opacity="0.4"/>
<circle cx="700" cy="120" r="1.5" opacity="0.7"/>
<circle cx="50" cy="300" r="1" opacity="0.5"/>
<circle cx="750" cy="400" r="1.8" opacity="0.6"/>
<circle cx="400" cy="550" r="1.2" opacity="0.9"/>
<circle cx="150" cy="500" r="1" opacity="0.4"/>
<circle cx="650" cy="250" r="1.5" opacity="0.5"/>
</g>
<!-- Nebula Clouds -->
<ellipse cx="200" cy="200" rx="300" ry="200" fill="url(#nebula1)" opacity="0.6" />
<ellipse cx="600" cy="400" rx="250" ry="180" fill="url(#nebula2)" opacity="0.5" />
<ellipse cx="400" cy="100" rx="200" ry="150" fill="#ff00ff" opacity="0.1" />
<!-- Distant Planet -->
<circle cx="650" cy="100" r="40" fill="#ff9e00" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.6;0.8" dur="5s" repeatCount="indefinite" />
</circle>
<circle cx="650" cy="100" r="40" fill="url(#nebula2)" opacity="0.3" />
<!-- Cosmic Sea Turtle -->
<g transform="translate(400, 300)">
<!-- Back Flippers -->
<path d="M-60 80 Q-90 120 -80 140 Q-60 130 -40 100 Z" fill="url(#skinGrad)" opacity="0.8" />
<path d="M60 80 Q90 120 80 140 Q60 130 40 100 Z" fill="url(#skinGrad)" opacity="0.8" />
<!-- Tail -->
<path d="M0 90 Q-5 120 0 140 Q5 120 0 90" fill="#0077b6" />
<!-- Front Flippers -->
<path d="M-50 20 Q-120 0 -140 30 Q-100 60 -50 40 Z" fill="url(#skinGrad)" filter="url(#glow)" opacity="0.9">
<animateTransform attributeName="transform" type="rotate" values="-5 -50 30;5 -50 30;-5 -50 30" dur="4s" repeatCount="indefinite" />
</path>
<path d="M50 20 Q120 0 140 30 Q100 60 50 40 Z" fill="url(#skinGrad)" filter="url(#glow)" opacity="0.9">
<animateTransform attributeName="transform" type="rotate" values="5 50 30;-5 50 30;5 50 30" dur="4s" repeatCount="indefinite" />
</path>
<!-- Shell Base -->
<ellipse cx="0" cy="40" rx="70" ry="85" fill="url(#shellGrad)" stroke="#00f5ff" stroke-width="2" opacity="0.9" />
<!-- Shell Pattern (Hexagonal Scutes) -->
<g fill="none" stroke="#00f5ff" stroke-width="1.5" opacity="0.6">
<!-- Center -->
<path d="M-15 40 L-7 26 L7 26 L15 40 L7 54 L-7 54 Z" fill="#00d9c0" opacity="0.3" />
<!-- Surrounding -->
<path d="M-15 40 L-30 35 L-30 50 L-15 55 Z" fill="#0096c7" opacity="0.2" />
<path d="M15 40 L30 35 L30 50 L15 55 Z" fill="#0096c7" opacity="0.2" />
<path d="M-7 26 L-20 15 L-5 10 L7 26 Z" fill="#0096c7" opacity="0.2" />
<path d="M7 26 L20 15 L5 10 L-7 26 Z" fill="#0096c7" opacity="0.2" />
<path d="M-7 54 L-20 65 L-5 70 L7 54 Z" fill="#0096c7" opacity="0.2" />
<path d="M7 54 L20 65 L5 70 L7 54 Z" fill="#0096c7" opacity="0.2" />
<!-- Outer ring -->
<path d="M-30 35 L-45 25 L-50 40 L-30 50 Z" fill="#0077b6" opacity="0.2" />
<path d="M30 35 L45 25 L50 40 L30 50 Z" fill="#0077b6" opacity="0.2" />
<path d="M-20 15 L-25 0 L-5 10 Z" fill="#0077b6" opacity="0.2" />
<path d="M20 15 L25 0 L5 10 Z" fill="#0077b6" opacity="0.2" />
<path d="M-20 65 L-25 80 L-5 70 Z" fill="#0077b6" opacity="0.2" />
<path d="M20 65 L25 80 L5 70 Z" fill="#0077b6" opacity="0.2" />
</g>
<!-- Shell Glow Lines -->
<path d="M0 10 L0 70 M-35 25 L35 55 M-35 55 L35 25" stroke="#00f5ff" stroke
(Original, at least 100 unique hand-written lines.) For this milestone, I was naturally inclined to use paper and pencil to draft my Doggo drawing. However as I began drawing the Dog, it became clear that I could draw much cleaner and tidie r curves on code than on paper. To this point, Eric Rosenbaum, a PhD graduate fr om MIT writes in his "On the Value of Making in Learning" about the perfectionis t approach some people may take towards learning to create. In his writing about "mastery learning", he says, "A goal of this type of learning is to ensure that all students have a chance to reach the same level of learning by giving more t ime to those who need it." In many ways, I'm more familiar with Illustrator tha n with the pen and pencil I used to draft my preliminary image of Doggo. Like ma stery learning, I was able to achieve the curved lines and shapes that I was loo king for, without having to hone in my pen + paper illustration skills. Utilizing FRIEND S to help describe, with a bit more detail, what makes up a simple illustration of a doggo, I ended up with a short list of attributes: A Doggo has 1 ear. A Doggo has 1 eye. A Doggo has a mouth. A Doggo has a nose. A Doggo has a head which is oval shaped. A Doggo has a body which is like a lowercase "b". A Doggo has a tail that curls a bit. Many of these attributes involve curves by nature, so I used the quadraticCurve To and bezierCurveTo vector commands as well as the ellipse in p5js to help create these shapes. For this m ilestone, I covered the concept of body + tail for Doggo. Here's how it looks so far: As I continue learning, I find myself referring to the Examples from the p5js website to see in-use scri ptin g of commands. (All my doggos on his website are pretty cute and it gives me ano ther incentive to keep on working in this library!) CSS can be tricky. Given something tricky, I often struggle to enjoy parts of it until I truly understan d it . To understand it, I decided to take on every single lesson that Codecademy had to offer on the subject. I use their lessons as a way to replace the how-to tex tbook that most CS students obtain to learn patterns/logic from.
I've come across the abstraction that is CSS many times not just as a web de
veloper, but as a web designer. It's a language that I recognize, a concept that I've interacted with for numero us years, and previous to beginning my journey at ITP I thought I knew a lot abo ut CSS. Little did I know, there are added features to the language that have be en built into the browsers, unheard of by me. It's obvious to me now there is an endless world of information on the subject, and its time for me to prioritize the content covered in these Codecademy courses with the supplementary articles I'll share below. Throughout my studie s of CSS, I've referenced a variety of supplemental education. I'd like to share some of the resources that I found to be useful in my journey of learning CSS: A Designer's Guide to Flexbox Responsive Web Design: What It Is & How to Use It Lastly, here is the code.html file based on the self-portrait I've taken, via Co deSandbox: https://cfryolq 3yw.codesandbox.io/ . Creative Coding is a course at ITP, where we gather to make sense of code and some of its complexities. I'm starting this journey confident in some of the logic of programming, as well as understanding syntax that comprises ideas that builds into the array of programs that solve problems around our built environment. I had assumed that entering t he course, I would pick up a programming language and get down and dirty pretty quickly from my previous knowledge of traditional, procedural programming. Unexpectedly Challenged When we began with HTML , I was presented with new challenges: lots of memorizat ion through the use of Seman tic elements ( How can I think of all of these different values?! ), a lack of t ruly automated concepts ( Though the browser does automate quite a bite in human ity's perspective, admittedly ), and a sense of free form building that I haven' t been able to apply even in Javascipt ( Whoever said creative coding is can't b e done in Javascipt clearly hasn't made it down to this line of text! ). An Unexpected Love Affair with <HTML> Though this ancient language lacks conditional statements, a complex IDE, and a sisterly language to help st yle it (Hello CSS! 👋), I gravitated towards truly understanding the <div>...<div
, the <section>...<section>, and the tables that comprise ancient HTML. Following Another's Time -Worn Teachings I made use of many resources from online HTML Tutorials , to Codecademy Lessons , and even piecing together my previous knowledge to defining the scaffolding for what my site is today. The biggest challenge I found was in making sense from elements that don't need to be closed, to elements that do require closing tags. For now, I'll try to follow in the footsteps of Semantic HTML and keep things consistent where possible. The table below can adapted in many ways. I'm using it to send a message to my instructor Allison and my T.A . Sarah! The Best Resources on HTML Tables I found myself using all of the above resources during this assignment, to make sense of the complexities/li mitations that making a table on HTML can present. Below the illustrated table shows what CSS surprisingly can do and what HTML alone needs help from CSS to ma ke happen in terms of visuals. There are other neat features to play around with that I haven't explored entirely. Needless to say, I find the image file to be a humorous, illustrative piece! https://cdn-images-1.medium.com/max/14000/1*e6Os SIHWKzHwNDZrGNL45w.jpeg An Unexpected Finish Line? (Am I finished?!) Lastly, I left myself a challenge. I've always wondered how add a favicon to sit es. I wasn't confident that I could create the file in HTML until I took Daniel Shiffman's code, and applied it (Copied in Dan's Code) and produced this cute memory of a dog head. Courtesy of GIPHY. All in all, I thought I may jump ship from this Canonical language for the web. I'm here now, heeding it s he avy trodden path hopefully guiding me to continued success in my studies at ITP! Some links to Files Used The .ico file for the favicon.
Create an SVG art of an animal of your choosing in a setting of your choosing. Surprise me.
We can't display this one. It's not us. Well... it might be us.
The model attempted an SVG. It did not go as planned. The effort was there.
```
