Pen Settings

JavaScript

Babel includes JSX processing.

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.

Behavior

Save Automatically?

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.

Flutter

              
                import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FlutterPen(),
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
    ),
  );
}

class FlutterPen extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: PenColors.scaffold,
      body: Center(
        child: SizedBox( 
          width: 700, 
          height: 400,
          child : FittedBox(
            fit: BoxFit.contain,
            child: SizedBox(
              child: CustomPaint (
                size: PenConfig.size,
                painter: CodePenLogoPainter(),
              ),
            ),
          ),
        ),
      ),
    );
  }
  
}

class PenColors {
  static const scaffold = const Color(0xFFF5F5F5);
  static const logo = const Color(0xFF000000);
}

class PenConfig {
  static Size size = Size(138, 26);
}

class CodePenLogoPainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {

    Paint paint = Paint()
      ..strokeWidth = 2.3
      ..color = PenColors.logo
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round;

    Paint iconPaint = Paint()
      ..strokeWidth = 2.3
      ..color = Colors.primaries[Random().nextInt(Colors.primaries.length)]
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round;

    Path path = Path();

    Path icon = Path();

    // M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z

    // the Es
    //M80 6h-9v14h9
    path.moveTo(80, 6); 
    path.lineTo(71, 6);
    path.lineTo(71, 20);
    path.lineTo(80, 20);
    //M114 6h-9 v14h9 
    path.moveTo(114, 6);
    path.lineTo(105, 6);
    path.lineTo(105, 20);
    path.lineTo(114, 20);
    //M111 13h-6 
    path.moveTo(111, 13);
    path.lineTo(105, 13);
    //M77 13h-6 
    path.moveTo(77, 13);
    path.lineTo(71, 13);

    // the N
    //M122 20V6l11 14V6 
    path.moveTo(122, 20);
    path.lineTo(122, 6);
    path.lineTo(133, 20);
    path.lineTo(133, 6);

    // the O icon
    //M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z 
    icon.moveTo(22, 16.7);
    icon.lineTo(33, 24);
    icon.lineTo(44, 16.7);
    icon.lineTo(44, 9.3);
    icon.lineTo(33, 2);
    icon.lineTo(22, 9.3);
    icon.lineTo(22, 16.7);
    //M44 16.7L33 9.3l-11 7.4 
    icon.moveTo(44, 16.7);
    icon.lineTo(33, 9.3);
    icon.lineTo(22, 16.7);
    //M22 9.3l11 7.3 l11-7.3
    icon.moveTo(22, 9.3);
    icon.lineTo(33, 16.6);
    icon.lineTo(44, 9.3);
    //M33 2v7.3 
    icon.moveTo(33, 2);
    icon.lineTo(33, 9.3);
    //M33 16.7V24 
    icon.moveTo(33, 16.7);
    icon.lineTo(33, 24);

    // the P
    //M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 
    path.moveTo(88, 14);
    path.lineTo(94, 14);
    path.cubicTo(96.2, 14, 98, 12.2, 98, 10);
    path.cubicTo(98, 7.8, 96.2, 6, 94, 6);
    path.lineTo(88, 6);
    path.lineTo(88, 20);

    // the C
    //M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2
    path.moveTo(15, 8);
    path.cubicTo(13.7, 6.7, 12, 6, 10, 6);
    path.cubicTo(6, 6, 3, 9, 3, 13);
    path.cubicTo(3, 17, 6, 20, 10, 20);
    path.cubicTo(12, 20, 13.7, 19.2, 15, 18);

    // the D
    //M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13
    path.moveTo(64, 13);
    path.cubicTo(64, 17, 61, 20, 57, 20);
    path.lineTo(52, 20);
    path.lineTo(52, 6);
    path.lineTo(57, 6);
    path.cubicTo(61, 6, 64, 9, 64, 13);

    canvas.drawPath(path, paint);
    canvas.drawPath(icon, iconPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}
              
            
!
999px

Console