Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <html>
    <body>
        <canvas id="darthvader" width="1000" height="1000">
            force is weak in your browser... upgrade!
        </canvas>
    </body>
</html>
!

CSS 

              
                body {
    background-color: #000;
}

#darthvader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: block;
    max-width: 90%;
    max-height: 90%;
}
!

JS 

              
                /**
 *
 * Darth Vader JS
 * author: Romolo Buondestino
 * role: Head of User Experience @ Translated
 * in: https://www.linkedin.com/in/romolobuondestino/
 * version: 1.0.4
 * credits: inspired by a shot of Almigor https://goo.gl/FjEZEb
 *
 **/

window.onload = function(){
    var darthvader = document.getElementById("darthvader");
    var context = darthvader.getContext("2d");

    // Mask - base
    context.lineJoin = "round";
    context.beginPath();
    context.moveTo(270,360);
    context.quadraticCurveTo(270,150,470,130);
    context.bezierCurveTo(470,100,530,100,530,130);
    context.quadraticCurveTo(730,150,730,360);
    context.quadraticCurveTo(765,440,880,760);
    context.quadraticCurveTo(500,950,120,760);
    context.quadraticCurveTo(250,380,270,360);
    context.closePath();
    context.lineWidth = 10;
    context.strokeStyle = "#230000";
    context.fillStyle = "#2d1821";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        // helm bg back
        context.beginPath();
        context.moveTo(320,600);
        context.quadraticCurveTo(190,750,500,880);
        context.quadraticCurveTo(810,750,680,600);
        context.closePath();
        context.fillStyle = "#30222f";
        context.fill();

        // helm bg face shadow left
        context.beginPath();
        context.moveTo(300,565);
        context.lineTo(345,740);
        context.lineTo(470,825);
        context.lineTo(500,810);
        context.closePath();
        context.fillStyle = "#230d22";
        context.fill();

        // helm bg face shadow right
        context.beginPath();
        context.moveTo(700,565);
        context.lineTo(660,705);
        context.lineTo(630,730);
        context.lineTo(600,650);
        context.closePath();
        context.fill();

        // helm bg left
        context.beginPath();
        context.moveTo(240,620);
        context.quadraticCurveTo(130,740,360,880);
        context.lineTo(100,880);
        context.lineTo(100,620);
        context.closePath();
        context.fillStyle = "#291016";
        context.fill();

        // helm bg right
        context.beginPath();
        context.moveTo(760,620);
        context.quadraticCurveTo(870,740,640,880);
        context.lineTo(900,880);
        context.lineTo(900,620);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(316,496,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#4a4152";
        context.fill();

        context.beginPath();
        context.arc(304,508,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(304,520,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(304,532,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#200f15";
        context.fill();

        context.beginPath();
        context.arc(292,640,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#4a4152";
        context.fill();

        context.beginPath();
        context.arc(292,652,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(304,652,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(304,664,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(328,724,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(328,736,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(328,748,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(340,748,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(340,760,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(364,760,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(364,772,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(364,796,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(708,640,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#200f15";
        context.fill();

        context.beginPath();
        context.arc(708,652,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(696,652,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(696,664,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(672,712,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(672,724,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(600,760,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(600,772,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(588,772,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(588,784,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(576,784,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(576,772,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(576,796,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(564,796,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(564,808,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(564,832,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(636,760,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(636,772,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(636,796,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        // helm side left
        context.beginPath();
        context.moveTo(240,813);
        context.quadraticCurveTo(120,750,176,750);
        context.lineTo(291,500);
        context.quadraticCurveTo(295,370,385,395);
        context.lineTo(200,200);
        context.lineTo(100,900);
        context.closePath();
        context.fillStyle = "#2f3447";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(350,370);
            context.quadraticCurveTo(265,380,260,480);
            context.lineTo(210,620);
            context.lineTo(150,720);
            context.lineTo(170,740);
            context.closePath();
            context.fillStyle = "#454f68";
            context.fill();

            context.beginPath();
            context.moveTo(200,490);
            context.quadraticCurveTo(220,465,250,465);
            context.lineWidth = 5;
            context.stroke();

            context.beginPath();
            context.moveTo(200,505);
            context.quadraticCurveTo(220,480,265,480);
            context.lineWidth = 5;
            context.stroke();

            context.beginPath();
            context.moveTo(160,625);
            context.quadraticCurveTo(200,600,240,610);
            context.lineWidth = 5;
            context.stroke();

            context.beginPath();
            context.moveTo(165,705);
            context.quadraticCurveTo(175,700,185,705);
            context.lineWidth = 5;
            context.stroke();

            context.beginPath();
            context.arc(296,390,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#230000";
            context.fill();

            context.beginPath();
            context.arc(296,402,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(284,402,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(284,414,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(240,496,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(240,508,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(228,508,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(228,520,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(182,690,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

        context.restore();

        // helm side right
        context.beginPath();
        context.moveTo(760,813);
        context.quadraticCurveTo(880,750,824,750);
        context.lineTo(709,500);
        context.quadraticCurveTo(705,370,615,395);
        context.lineTo(800,200);
        context.lineTo(900,900);
        context.closePath();
        context.fillStyle = "#2f3447";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(650,370);
            context.quadraticCurveTo(735,380,740,480);
            context.lineTo(790,620);
            context.lineTo(850,720);
            context.lineTo(830,740);
            context.closePath();
            context.fillStyle = "#454f68";
            context.fill();

            context.beginPath();
            context.moveTo(700,475);
            context.quadraticCurveTo(730,465,760,480);
            context.lineWidth = 5;
            context.stroke();

            context.beginPath();
            context.arc(768,484,3,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#230000";
            context.fill();

            context.beginPath();
            context.moveTo(840,625);
            context.quadraticCurveTo(800,600,760,610);
            context.lineWidth = 5;
            context.stroke();

            context.beginPath();
            context.moveTo(835,705);
            context.quadraticCurveTo(815,700,815,705);
            context.lineWidth = 5;
            context.stroke();

        context.restore();

        // helm top highlight left
        context.beginPath();
        context.moveTo(250,350);
        context.lineTo(470,420);
        context.lineTo(470,100);
        context.lineTo(250,100);
        context.closePath();
        context.fillStyle = "#d6deeb";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(290,360);
            context.quadraticCurveTo(270,180,470,150);
            context.lineTo(470,260);
            context.quadraticCurveTo(400,250,390,340);
            context.quadraticCurveTo(320,320,290,360);
            context.closePath();
            context.fillStyle = "#7489a6";
            context.fill();

            context.save();
            context.clip();

                context.beginPath();
                context.moveTo(290,360);
                context.quadraticCurveTo(270,180,400,160);
                context.lineTo(420,180);
                context.lineTo(470,180);
                context.lineTo(470,250);
                context.quadraticCurveTo(335,200,360,360);
                context.closePath();
                context.fillStyle = "#525e74";
                context.fill();

            context.restore();

            context.beginPath();
            context.arc(454,212,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#d6deeb";
            context.fill();

            context.beginPath();
            context.arc(454,224,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(442,224,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(442,252,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(454,252,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#230000";
            context.fill();

            context.beginPath();
            context.arc(454,264,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(292,264,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(282,308,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(282,320,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(294,320,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(282,332,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(454,360,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(454,372,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

        context.restore();

        // helm top highlight right
        context.beginPath();
        context.moveTo(750,350);
        context.lineTo(530,420);
        context.lineTo(530,100);
        context.lineTo(750,100);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(730,360);
            context.quadraticCurveTo(740,300,680,220);
            context.quadraticCurveTo(580,220,530,160);
            context.lineTo(530,410);
            context.closePath();
            context.fillStyle = "#53637d";
            context.fill();

            context.beginPath();
            context.moveTo(530,130);
            context.lineTo(530,410);
            context.quadraticCurveTo(580,350,640,330);
            context.quadraticCurveTo(630,280,580,280);
            context.quadraticCurveTo(545,280,545,150);
            context.closePath();
            context.fillStyle = "#454f68";
            context.fill();

            context.beginPath();
            context.arc(546,148,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#230000";
            context.fill();

            context.beginPath();
            context.arc(546,160,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(546,196,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(624,312,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#7489a6";
            context.fill();

            context.beginPath();
            context.arc(636,312,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#230000";
            context.fill();

            context.beginPath();
            context.arc(636,324,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(570,342,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#7489a6";
            context.fill();

            context.beginPath();
            context.arc(570,354,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(558,354,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(582,366,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#230000";
            context.fill();

            context.beginPath();
            context.arc(570,366,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(558,366,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#7489a6";
            context.fill();

            context.beginPath();
            context.arc(546,378,4,0,2*Math.PI,true);
            context.closePath();
            context.fillStyle = "#230000";
            context.fill();

            context.beginPath();
            context.arc(558,378,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

            context.beginPath();
            context.arc(546,390,4,0,2*Math.PI,true);
            context.closePath();
            context.fill();

        context.restore();

    context.restore();

    // Mask - inner side left
    context.beginPath();
    context.moveTo(369,387);
    context.quadraticCurveTo(290,360,280,500);
    context.lineTo(170,740);
    context.quadraticCurveTo(100,750,240,813);
    context.quadraticCurveTo(120,750,176,750);
    context.lineTo(291,500);
    context.quadraticCurveTo(295,370,385,395);
    context.lineWidth = 5;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(280,500);
        context.lineTo(291,500);
        context.lineWidth = 3;
        context.stroke();

        context.beginPath();
        context.moveTo(170,740);
        context.lineTo(176,750);
        context.lineWidth = 3;
        context.stroke();

    context.restore();

    // Mask - inner side right
    context.beginPath();
    context.moveTo(631,387);
    context.quadraticCurveTo(710,360,720,500);
    context.lineTo(830,740);
    context.quadraticCurveTo(900,750,760,813);
    context.quadraticCurveTo(880,750,824,750);
    context.lineTo(709,500);
    context.quadraticCurveTo(705,370,615,395);
    context.lineWidth = 5;
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(720,500);
        context.lineTo(709,500);
        context.lineWidth = 4;
        context.stroke();

        context.beginPath();
        context.moveTo(830,740);
        context.lineTo(824,750);
        context.lineWidth = 3;
        context.stroke();

    context.restore();

    // Mask - chic left
    context.beginPath();
    context.moveTo(470,490);
    context.lineTo(350,500);
    context.quadraticCurveTo(330,540,300,570);
    context.quadraticCurveTo(350,620,370,730);
    context.quadraticCurveTo(500,680,470,490);
    context.closePath();
    context.lineWidth = 10;
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(480,485);
        context.quadraticCurveTo(410,550,430,600);
        context.lineTo(372,650);
        context.lineTo(372,720);
        context.lineTo(480,580);
        context.closePath();
        context.fillStyle = "#525e74";
        context.fill();

        context.beginPath();
        context.moveTo(320,545);
        context.quadraticCurveTo(356,570,356,630);
        context.lineTo(280,570);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(326,574,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#230000";
        context.fill();

        context.beginPath();
        context.arc(326,586,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(338,586,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(374,586,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#d6deeb";
        context.fill();

        context.beginPath();
        context.arc(374,598,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(338,598,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#230000";
        context.fill();

        context.beginPath();
        context.arc(386,646,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(386,658,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

    context.restore();

    // Mask - chic left detail
    context.beginPath();
    context.moveTo(298,570);
    context.quadraticCurveTo(360,640,375,650);
    context.lineTo(375,730);
    context.lineWidth = 5;
    context.stroke();

    context.beginPath();
    context.moveTo(375,650);
    context.quadraticCurveTo(430,610,475,550);
    context.lineWidth = 5;
    context.stroke();

    // Mask - chic right
    context.beginPath();
    context.moveTo(530,490);
    context.lineTo(650,500);
    context.quadraticCurveTo(670,540,700,570);
    context.quadraticCurveTo(650,620,630,730);
    context.quadraticCurveTo(500,680,530,490);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#525e74";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(680,545);
        context.quadraticCurveTo(644,570,644,630);
        context.lineTo(720,570);
        context.closePath();
        context.fillStyle = "#2f3447";
        context.fill();

        context.beginPath();
        context.arc(536,504,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#230000";
        context.fill();

        context.beginPath();
        context.arc(548,516,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(536,516,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(536,528,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(596,540,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#d6deeb";
        context.fill();

        context.beginPath();
        context.arc(608,540,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(620,540,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(608,552,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(536,574,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#230000";
        context.fill();

        context.beginPath();
        context.arc(536,586,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(548,586,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(548,598,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(560,622,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

    context.restore();

    // Mask - chic right detail
    context.beginPath();
    context.moveTo(702,570);
    context.quadraticCurveTo(640,640,625,650);
    context.lineTo(625,730);
    context.lineWidth = 5;
    context.stroke();

    context.beginPath();
    context.moveTo(625,650);
    context.quadraticCurveTo(570,610,525,550);
    context.lineWidth = 5;
    context.stroke();

    // Mask - Eyes left
    context.beginPath();
    context.moveTo(470,490);
    context.quadraticCurveTo(400,530,340,500);
    context.quadraticCurveTo(320,420,470,430);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#314085";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(360,440);
        context.quadraticCurveTo(375,510,420,530);
        context.quadraticCurveTo(390,475,420,415);
        context.closePath();
        context.fillStyle = "#58b1ed";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(360,440);
            context.quadraticCurveTo(360,475,370,470);
            context.lineTo(390,470);
            context.lineTo(390,420);
            context.closePath();
            context.fillStyle = "#466eb4";
            context.fill();

            context.beginPath();
            context.moveTo(383,475);
            context.lineTo(383,450);
            context.lineWidth = 5;
            context.strokeStyle = "#58b1ed";
            context.stroke();

        context.restore();

        context.beginPath();
        context.arc(438,448,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(438,460,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(450,460,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(450,472,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#fff";
        context.fill();

    context.restore();

    // Mask - Eyes left detail top back
    context.beginPath();
    context.moveTo(435,425);
    context.quadraticCurveTo(325,420,350,505);
    context.lineTo(335,510);
    context.quadraticCurveTo(280,410,385,395);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#d6deeb";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(385,395);
        context.quadraticCurveTo(300,420,350,510);
        context.lineTo(420,510);
        context.lineTo(420,395);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

    context.restore();

    // Mask - Eyes left detail top
    context.beginPath();
    context.moveTo(435,425);
    context.quadraticCurveTo(325,420,350,505);
    context.lineTo(350,510);
    context.quadraticCurveTo(310,420,410,415);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#2f3447";
    context.stroke();
    context.fill();

    // Mask - Eyes left detail bottom
    context.beginPath();
    context.moveTo(470,480);
    context.quadraticCurveTo(400,530,340,490);
    context.lineTo(320,510);
    context.quadraticCurveTo(410,555,470,490);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(470,480);
        context.quadraticCurveTo(400,530,340,490);
        context.lineTo(320,495);
        context.quadraticCurveTo(395,535,460,490);
        context.closePath();
        context.fillStyle = "#d6deeb";
        context.fill();

    context.restore();

    // Mask - Eyes right
    context.beginPath();
    context.moveTo(530,490);
    context.quadraticCurveTo(600,530,660,500);
    context.quadraticCurveTo(680,420,530,430);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#314085";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(580,470);
        context.lineTo(580,530);
        context.lineTo(620,530);
        context.quadraticCurveTo(605,500,615,470);
        context.closePath();
        context.fillStyle = "#58b1ed";
        context.fill();

        context.beginPath();
        context.moveTo(596,475);
        context.lineTo(610,475);
        context.lineWidth = 5;
        context.strokeStyle = "#466eb4";
        context.stroke();

        context.beginPath();
        context.moveTo(585,472);
        context.lineTo(585,495);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(589,472);
        context.lineTo(589,490);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.arc(570,470,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

        context.beginPath();
        context.arc(570,482,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

    context.restore();

    // Mask - Eyes right detail top back
    context.beginPath();
    context.moveTo(565,425);
    context.quadraticCurveTo(675,420,650,505);
    context.lineTo(665,510);
    context.quadraticCurveTo(720,410,615,395);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(615,395);
        context.quadraticCurveTo(700,420,650,510);
        context.lineTo(580,510);
        context.lineTo(580,395);
        context.closePath();
        context.fillStyle = "#525e74";
        context.fill();

    context.restore();

    // Mask - Eyes right detail top
    context.beginPath();
    context.moveTo(565,425);
    context.quadraticCurveTo(675,420,650,505);
    context.lineTo(650,510);
    context.quadraticCurveTo(690,420,590,415);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#2f3447";
    context.stroke();
    context.fill();

    // Mask - Eyes right detail bottom
    context.beginPath();
    context.moveTo(530,480);
    context.quadraticCurveTo(600,530,660,490);
    context.lineTo(680,510);
    context.quadraticCurveTo(590,555,530,490);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(530,480);
        context.quadraticCurveTo(600,530,660,490);
        context.lineTo(680,495);
        context.quadraticCurveTo(605,535,540,490);
        context.closePath();
        context.fillStyle = "#454f68";
        context.fill();

    context.restore();

    // Mask - sopraciglia left
    context.lineJoin = "miter";
    context.beginPath();
    context.moveTo(470,420);
    context.quadraticCurveTo(270,250,228,450);
    context.quadraticCurveTo(290,300,470,450);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#d6deeb";
    context.stroke();
    context.fill();

    // Clip for hightlight
    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(500,450);
        context.quadraticCurveTo(270,260,228,450);
        context.lineTo(500,450);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(500,450);
            context.quadraticCurveTo(270,260,228,450);
            context.quadraticCurveTo(270,260,500,470);
            context.closePath();
            context.fillStyle = "#525e74";
            context.fill();

        context.restore();

        context.beginPath();
        context.moveTo(300,380);
        context.quadraticCurveTo(290,350,315,340);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(420,378);
        context.quadraticCurveTo(445,400,445,415);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(310,380);
        context.quadraticCurveTo(310,355,325,350);
        context.lineWidth = 5;
        context.stroke();

    context.restore();

    // Mask - sopraciglia right
    context.beginPath();
    context.moveTo(530,420);
    context.quadraticCurveTo(730,250,768,450);
    context.quadraticCurveTo(710,300,530,450);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    // Clip for hightlight
    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(500,450);
        context.quadraticCurveTo(730,260,772,450);
        context.lineTo(500,450);
        context.closePath();
        context.fillStyle = "#525e74";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(500,450);
            context.quadraticCurveTo(730,260,772,450);
            context.quadraticCurveTo(730,260,500,470);
            context.closePath();
            context.fillStyle = "#454f68";
            context.fill();

        context.restore();

        context.beginPath();
        context.moveTo(700,380);
        context.quadraticCurveTo(710,350,675,340);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(580,378);
        context.quadraticCurveTo(555,400,555,415);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(690,380);
        context.quadraticCurveTo(690,355,675,350);
        context.lineWidth = 5;
        context.stroke();

    context.restore();

    // Mask - middle
    context.lineJoin = "round";
    context.beginPath();
    context.moveTo(470,130);
    context.bezierCurveTo(470,100,530,100,530,130);
    context.lineTo(530,430);
    context.bezierCurveTo(530,460,470,460,470,430);
    context.lineTo(470,430);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#d6deeb";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(470,150);
        context.lineTo(470,330);
        context.quadraticCurveTo(500,330,490,480);
        context.lineTo(530,480);
        context.lineTo(530,150);
        context.arc(500,150,30,0,Math.PI,true);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.save();
        context.clip();

            context.beginPath();
            context.moveTo(485,400);
            context.lineTo(485,480);
            context.lineTo(530,480);
            context.lineTo(530,100);
            context.lineTo(470,100);
            context.lineTo(470,200);
            context.quadraticCurveTo(485,200,485,260);
            context.quadraticCurveTo(485,320,510,320);
            context.lineTo(510,360);
            context.quadraticCurveTo(510,400,485,400);
            context.closePath();
            context.fillStyle = "#53637d";
            context.fill();

            context.save();
            context.clip();

                context.beginPath();
                context.moveTo(510,480);
                context.lineTo(530,480);
                context.lineTo(530,160);
                context.quadraticCurveTo(510,160,510,180);
                context.lineTo(510,200);
                context.quadraticCurveTo(525,200,525,300);
                context.lineTo(525,400);
                context.quadraticCurveTo(525,480,510,480);
                context.closePath();
                context.fillStyle = "#454f68";
                context.fill();

            context.restore();

        context.restore();

        context.beginPath();
        context.moveTo(470,145);
        context.lineTo(490,145);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(470,160);
        context.lineTo(500,160);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(470,200);
        context.lineTo(480,200);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(470,360);
        context.lineTo(480,360);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(470,375);
        context.lineTo(480,375);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.arc(520,426,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#230000";
        context.fill();

        context.beginPath();
        context.arc(520,438,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

    context.restore();

    // Mask - nose mid
    context.beginPath();
    context.moveTo(470,452);
    context.quadraticCurveTo(480,500,474,550);
    context.lineTo(526,550);
    context.quadraticCurveTo(520,500,530,452);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#d6deeb";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(490,460);
        context.lineTo(490,474);
        context.lineTo(495,474);
        context.lineTo(495,488);
        context.lineTo(500,488);
        context.lineTo(500,505);
        context.lineTo(510,505);
        context.lineTo(510,530);
        context.lineTo(540,530);
        context.lineTo(540,460);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.beginPath();
        context.moveTo(510,460);
        context.lineTo(510,474);
        context.lineTo(515,474);
        context.lineTo(515,492);
        context.lineTo(518,492);
        context.lineTo(518,510);
        context.lineTo(520,510);
        context.lineTo(520,530);
        context.lineTo(540,530);
        context.lineTo(540,460);
        context.closePath();
        context.fillStyle = "#454f68";
        context.fill();

    context.restore();

    // Mask - triangle external bottom
    context.lineJoin = "round";
    context.beginPath();
    context.moveTo(370,730);
    context.lineTo(630,730);
    context.lineTo(500,820);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#525e74";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(370,730);
        context.lineTo(370,820);
        context.lineTo(500,880);
        context.lineTo(420,730);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.beginPath();
        context.moveTo(470,730);
        context.lineTo(560,880);
        context.lineTo(630,880);
        context.lineTo(630,730);
        context.closePath();
        context.fillStyle = "#2f3447";
        context.fill();

    context.restore();

    // Mask - triangle inner clip() bottom
    context.beginPath();
    context.moveTo(410,745);
    context.lineTo(590,745);
    context.lineTo(500,805);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(400,770);
        context.lineTo(400,810);
        context.lineTo(600,810);
        context.lineTo(600,770);
        context.closePath();
        context.fillStyle = "#525e74";
        context.fill();

        context.beginPath();
        context.moveTo(415,730);
        context.lineTo(450,810);
        context.lineWidth = 5;
        context.strokeStyle = "#230000";
        context.stroke();

        context.beginPath();
        context.moveTo(435,730);
        context.lineTo(465,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(455,730);
        context.lineTo(475,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(475,730);
        context.lineTo(485,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(490,730);
        context.lineTo(495,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(510,730);
        context.lineTo(505,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(525,730);
        context.lineTo(515,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(545,730);
        context.lineTo(525,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(565,730);
        context.lineTo(535,810);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(585,730);
        context.lineTo(550,810);
        context.lineWidth = 5;
        context.stroke();

    context.restore();

    // Mask - triangle external
    context.beginPath();
    context.moveTo(370,730);
    context.lineTo(630,730);
    context.lineTo(500,560);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#525e74";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(380,560);
        context.lineTo(470,730);
        context.lineTo(630,730);
        context.lineTo(630,560);
        context.closePath();
        context.fillStyle = "#2f3447";
        context.fill();

    context.restore();

    // Mask - triangle inner clip()
    context.beginPath();
    context.moveTo(390,720);
    context.lineTo(610,720);
    context.lineTo(500,580);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        // Mask - triangle inner masked
        context.beginPath();
        context.moveTo(430,700);
        context.lineTo(570,700);
        context.lineTo(570,500);
        context.lineTo(430,500);
        context.closePath();
        context.lineWidth = 10;
        context.fillStyle = "#d6deeb";
        context.stroke();
        context.fill();

        context.beginPath();
        context.moveTo(430,500);
        context.lineTo(430,655);
        context.lineTo(440,655);
        context.lineTo(440,660);
        context.lineTo(455,660);
        context.lineTo(455,665);
        context.lineTo(470,665);
        context.lineTo(470,675);
        context.lineTo(486,675);
        context.lineTo(486,680);
        context.lineTo(530,680);
        context.lineTo(530,675);
        context.lineTo(545,675);
        context.lineTo(545,670);
        context.lineTo(560,670);
        context.lineTo(560,665);
        context.lineTo(570,665);
        context.lineTo(570,500);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.beginPath();
        context.moveTo(430,500);
        context.lineTo(430,645);
        context.lineTo(440,645);
        context.lineTo(440,650);
        context.lineTo(455,650);
        context.lineTo(455,655);
        context.lineTo(470,655);
        context.lineTo(470,660);
        context.lineTo(486,660);
        context.lineTo(486,645);
        context.lineTo(530,645);
        context.lineTo(530,635);
        context.lineTo(545,635);
        context.lineTo(545,625);
        context.lineTo(560,625);
        context.lineTo(560,615);
        context.lineTo(570,615);
        context.lineTo(570,500);
        context.closePath();
        context.fillStyle = "#525e74";
        context.fill();

        context.beginPath();
        context.moveTo(440,700);
        context.lineTo(440,500);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(455,700);
        context.lineTo(455,500);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(470,700);
        context.lineTo(470,500);
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.moveTo(481,615);
        context.lineTo(481,500);
        context.lineWidth = 5;
        context.strokeStyle = "#2f3447";
        context.stroke();

        context.beginPath();
        context.moveTo(486,700);
        context.lineTo(486,500);
        context.lineWidth = 5;
        context.strokeStyle = "#230000";
        context.stroke();

        context.beginPath();
        context.moveTo(509,625);
        context.lineTo(509,500);
        context.lineWidth = 5;
        context.strokeStyle = "#2f3447";
        context.stroke();

        context.beginPath();
        context.moveTo(514,700);
        context.lineTo(514,500);
        context.lineWidth = 5;
        context.strokeStyle = "#230000";
        context.stroke();

        context.beginPath();
        context.moveTo(525,640);
        context.lineTo(525,500);
        context.lineWidth = 5;
        context.strokeStyle = "#2f3447";
        context.stroke();

        context.beginPath();
        context.moveTo(530,700);
        context.lineTo(530,500);
        context.lineWidth = 5;
        context.strokeStyle = "#230000";
        context.stroke();

        context.beginPath();
        context.moveTo(540,655);
        context.lineTo(540,500);
        context.lineWidth = 5;
        context.strokeStyle = "#2f3447";
        context.stroke();

        context.beginPath();
        context.moveTo(545,700);
        context.lineTo(545,500);
        context.lineWidth = 5;
        context.strokeStyle = "#230000";
        context.stroke();

        context.beginPath();
        context.moveTo(555,675);
        context.lineTo(555,500);
        context.lineWidth = 5;
        context.strokeStyle = "#2f3447";
        context.stroke();

        context.beginPath();
        context.moveTo(560,700);
        context.lineTo(560,500);
        context.lineWidth = 5;
        context.strokeStyle = "#230000";
        context.stroke();

        context.beginPath();
        context.moveTo(569,700);
        context.lineTo(569,500);
        context.lineWidth = 5;
        context.strokeStyle = "#2f3447";
        context.stroke();

    context.restore();

    // Mask - nose top
    context.beginPath();
    context.moveTo(465,452);
    context.bezierCurveTo(465,465,535,465,535,452);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#d6deeb";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(500,452);
        context.lineTo(500,465);
        context.lineTo(540,465);
        context.lineTo(540,452);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.beginPath();
        context.moveTo(520,452);
        context.lineTo(520,465);
        context.lineTo(540,465);
        context.lineTo(540,452);
        context.closePath();
        context.fillStyle = "#454f68";
        context.fill();

    context.restore();

    // Mask - nose external
    context.beginPath();
    context.arc(500,550,26,0,Math.PI,true);
    context.lineTo(474,580);
    context.lineTo(526,580);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#7489a6";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(535,510);
        context.lineTo(465,590);
        context.lineTo(535,590);
        context.closePath();
        context.fillStyle = "#454f68";
        context.fill();

    context.restore();

    // Mask - nose
    context.lineJoin = "round";
    context.beginPath();
    context.arc(500,550,14,0,Math.PI,true);
    context.lineTo(486,570);
    context.lineTo(514,570);
    context.closePath();
    context.lineWidth = 10;
    context.fillStyle = "#d6deeb";
    context.stroke();
    context.fill();

    context.save();
    context.clip();

        context.beginPath();
        context.moveTo(530,530);
        context.quadraticCurveTo(485,530,495,600);
        context.lineTo(530,600);
        context.closePath();
        context.fillStyle = "#7489a6";
        context.fill();

        context.beginPath();
        context.arc(508,550,4,0,2*Math.PI,true);
        context.closePath();
        context.fillStyle = "#d6deeb";
        context.fill();

        context.beginPath();
        context.arc(508,562,4,0,2*Math.PI,true);
        context.closePath();
        context.fill();

    context.restore();

    // Mask - nose detail
    context.beginPath();
    context.arc(500,500,27,0,Math.PI,true);
    context.lineWidth = 4;
    context.stroke();

    context.beginPath();
    context.arc(500,515,27,0,Math.PI,true);
    context.lineWidth = 4;
    context.stroke();

    context.beginPath();
    context.arc(500,530,27,0,Math.PI,true);
    context.lineWidth = 4;
    context.stroke();

    // Mask - line circle back left
    context.beginPath();
    context.moveTo(366,740);
    context.lineTo(310,680);
    context.lineWidth = 5;
    context.strokeStyle = "#200f15";
    context.stroke();

    context.beginPath();
    context.moveTo(366,730);
    context.lineTo(310,670);
    context.lineWidth = 5;
    context.strokeStyle = "#7489a6";
    context.stroke();

    // Mask - line circle back right
    context.beginPath();
    context.moveTo(634,740);
    context.lineTo(690,680);
    context.lineWidth = 5;
    context.strokeStyle = "#200f15";
    context.stroke();

    context.beginPath();
    context.moveTo(634,730);
    context.lineTo(690,670);
    context.lineWidth = 5;
    context.strokeStyle = "#7489a6";
    context.stroke();

    // Mask - triangle circle left
    context.beginPath();
    context.arc(366,730,8,0,2*Math.PI,true);
    context.closePath();
    context.lineWidth = 10;
    context.strokeStyle = "#230000";
    context.stroke();
    context.fill();

    // Mask - triangle circle right
    context.beginPath();
    context.arc(634,730,8,0,2*Math.PI,true);
    context.closePath();
    context.lineWidth = 10;
    context.stroke();
    context.fill();
};
!
999px

Console