Canvas Example Arc

To create an arc with HTML5 Canvas, we can use the arc() method. Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise). Arcs can be styled with the lineWidth, strokeStyle, and lineCap properties.

by navinleon

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 192 48">
  <defs>
    <style>
      .cls-1 {
        clip-path: url(#clip-logo_full);
      }

      .cls-2 {
        fill: #080807;
      }

      .cls-3 {
        fill: #d22630;
        fill-rule: evenodd;
      }
    </style>
    <clipPath id="clip-logo_full">
      <rect width="192" height="48"/>
    </clipPath>
  </defs>
  <g id="logo_full" class="cls-1">
    <g id="Group_2646" data-name="Group 2646" transform="translate(9 66)">
      <path id="Path_563" data-name="Path 563" class="cls-2" d="M73.693-28a6.249,6.249,0,0,1-2.467-.484A6.062,6.062,0,0,1,69.26-29.8a6.015,6.015,0,0,1-1.294-1.977,6.378,6.378,0,0,1-.465-2.434v-.035a6.31,6.31,0,0,1,.465-2.425A6.228,6.228,0,0,1,69.26-38.66a5.978,5.978,0,0,1,1.984-1.347A6.44,6.44,0,0,1,73.8-40.5a8.017,8.017,0,0,1,1.544.138,6.426,6.426,0,0,1,1.268.38,5.475,5.475,0,0,1,1.052.587,7.079,7.079,0,0,1,.9.759l-1.691,1.951a6.376,6.376,0,0,0-1.441-1,3.671,3.671,0,0,0-1.648-.362,3.363,3.363,0,0,0-1.406.293,3.32,3.32,0,0,0-1.112.811,3.765,3.765,0,0,0-.724,1.2,4.062,4.062,0,0,0-.259,1.459v.034a4.14,4.14,0,0,0,.259,1.468,3.839,3.839,0,0,0,.715,1.209,3.347,3.347,0,0,0,1.1.82,3.326,3.326,0,0,0,1.423.3,3.686,3.686,0,0,0,1.751-.38,6.763,6.763,0,0,0,1.423-1.036l1.69,1.71a8.818,8.818,0,0,1-.965.9,5.7,5.7,0,0,1-1.1.681,5.659,5.659,0,0,1-1.3.432A7.923,7.923,0,0,1,73.693-28" transform="translate(-36.279 -7.25)"/>
      <path id="Path_564" data-name="Path 564" class="cls-2"...

CSS

body {
        margin: 0px;
        padding: 0px;
      }