DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Multiple ways to draw an image using CSS, HTML and Javascript

Multiple ways to draw an image using CSS, HTML and Javascript

Scott Leberknight user avatar by
Scott Leberknight
·
Jan. 28, 13 · Interview
Like (0)
Save
Tweet
Share
10.85K Views

Join the DZone community and get the full member experience.

Join For Free

I recently read an article by Vincent Durand on how to draw images using a single element. The article was very well laid out and I definitely recommend you take a look. I thought I'd take this concept of drawing images rather than linking to image files and apply it to our Near Infinity logo. In this post I'll go over 4 different ways you can draw images using CSS, HTML and Javascript.

Single Element with Multiple Backgrounds

This is basically the method described in the Vincent's article. To draw the Near Infinity logo I took one div and gave it 4 backgrounds (one for each of the ovals). Each background is a radial gradient which defines its color and shape. Each background is then positioned and sized. The result scales easily with the font size.

HTML:

<div id="logo">
</div>

CSS:

#logo {
  position: relative;
  font-size: 60px;
  width: 4em;
  height: 2em;
  background: -moz-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
              -moz-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
              -moz-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
              -moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
  background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
              -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
              -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
              -webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
  background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
              radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
              radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
              radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
  background-position: 0.3em 0.75em,
                       -0.6em 0.35em,
                       1.4em 0.6em,
                       1.05em 0.15em;
  background-size: 1.7em 1.0em,
                   3em 1.9em,
                   1.7em 1.0em,
                   3em 1.9em;
  background-repeat: no-repeat;
}

View a demo

In addition to using multiple backgrounds you could also you multiple box shadows. Joshua Hibbert has a good blog post on this. Vincent Durand also creaed one-div.com which is a collection of various icons all created using one div element.

Multiple Elements

In this case I create the structure of the logo in HTML and style each element individually to how it looks. This seems to me like the most natural approach (one element per geometric shape). When you look at the HTML and then the CSS it makes a lot more sense off the bat then the first example with multiple backgrounds. This method also makes it easier if you want to animate specific parts of your image. Rather than redrawing all of the backgrounds in the first method, you could animate an individual element here while keeping the rest intact.

HTML:

<div id="logo">
  <div id="black" class="leaf">
    <div class="eye">
    </div>
  </div>
  <div id="orange" class="leaf">
    <div class="eye">
    </div>
  </div>
</div>

CSS:

#logo {
  font-size: 60px;
  width: 3.5em;
  height: 2em;
}

#logo .leaf {
  width: 1.7em;
  height: 1em;
  border-radius: 0.85em / 0.5em;
  position: absolute;
}

#logo .leaf .eye {
  width: 1em;
  height: 0.6em;
  border-radius: 0.5em / 0.3em;
  background-color: white;
}

#logo #black {
  background-color: black;
  margin-top: 0.25em;
}

#logo #black .eye {
  float: right;
  margin-top: 0.15em;
  margin-right: 0.1em;
}

#logo #orange {
  background-color: rgba(237, 128, 39, 1);
  margin-left: 1.62em;
}

#logo #orange .eye {
  float: left;
  margin-top: 0.25em;
  margin-left: 0.1em;
}

View a demo

Jeff Batterton used this method to draw an iPhone.

Canvas

Another method would be to use HTML5 canvas. A key difference here is that there's no CSS. Therefore, you lose the ability to use CSS animations and media queries to manipulate the images easily. You can always accomplish the same thing by going into Javascript but now you're maininting the style of your page across two mediums.

HTML:

<canvas id="logo-canvas" width="250" height="100">
</canvas>

Javascript:

var canvas = document.getElementById('logo-canvas');
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");

  // Draw black oval
  ctx.save();
  ctx.fillStyle = "rgba(0, 0, 0, 1)";
  ctx.scale(1.75, 1);
  ctx.beginPath();
  ctx.arc(35, 51, 30, 0, Math.PI*2, false);
  ctx.fill();
  ctx.closePath();
  ctx.restore();

  // Draw white oval inside black
  ctx.save();
  ctx.fillStyle = "rgba(255, 255, 255, 1)";
  ctx.scale(1.75, 1);
  ctx.beginPath();
  ctx.arc(42, 47, 17, 0, Math.PI*2, false);
  ctx.fill();
  ctx.closePath();
  ctx.restore();

  // Draw orange oval
  ctx.save();
  ctx.fillStyle = "rgba(237, 128, 39, 1)";
  ctx.scale(1.75, 1);
  ctx.beginPath();
  ctx.arc(92, 37, 30, 0, Math.PI*2, false);
  ctx.fill();
  ctx.closePath();
  ctx.restore();

  // Draw white oval inside orange
  ctx.save();
  ctx.fillStyle = "rgba(255, 255, 255, 1)";
  ctx.scale(1.75, 1);
  ctx.beginPath();
  ctx.arc(82, 40, 17, 0, Math.PI*2, false);
  ctx.fill();
  ctx.closePath();
  ctx.restore();
}

View a demo

EDIT: SVG

SVG

I originally forgot probably the coolest of all the methods: SVG. SVG is awesome because it combines the best of both worlds. You can draw very specific graphics the way you would in a graphics program but each shape is also an HTML element so you can manipulate and animate it with CSS.

HTML:

<svg>
  <ellipse cx="50" cy="51" rx="50" ry="30" fill="rgb(0,0,0)"/>
  <ellipse cx="145" cy="37" rx="50" ry="30" fill="rgb(237, 128, 39)"/>
  <ellipse cx="60" cy="47" rx="30" ry="17" fill="rgb(255, 255, 255)"/>
  <ellipse cx="132" cy="40" rx="30" ry="17" fill="rgb(255, 255, 255)"/>
</svg>

View a demo (Credit: Joe Ferner)



HTML CSS JavaScript

Published at DZone with permission of Scott Leberknight, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Bye-Bye, Regular Dev [Comic]
  • Agile Transformation With ChatGPT or McBoston?
  • Mind Map Reuse in Software Groups
  • Utilize OpenAI API to Extract Information From PDF Files

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: