Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

+ 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.

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

              
                <canvas width="600" height="450" id="stage"></canvas>
 <svg width="43px" height="40px" viewBox="0 0 43 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>❤</title>
    <description>Created with Sketch.</description>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M25.0636211,2.81023285 C26.870624,0.936734916 29.0625643,0 31.6395077,0 C34.6878431,0 37.1390452,1.21981415 38.9931874,3.65947904 C40.8473295,6.09914393 41.7743867,9.32624718 41.7743867,13.3408856 C41.7743867,16.8614147 41.1301605,19.692207 39.8416889,21.8333475 C38.5532172,23.974488 36.0784459,26.0538337 32.4173007,28.0714468 L31.945911,28.3493819 C25.9435185,31.6640321 22.3059976,35.3697966 21.033239,39.4667866 C19.7290542,35.3492087 16.0993896,31.6434442 10.1441364,28.3493819 C9.92415341,28.2258546 9.75131224,28.1332105 9.62560768,28.0714468 C5.94874947,26.0538337 3.47004997,23.9847818 2.18943482,21.8642292 C0.908819669,19.7436766 0.2685217,16.9025905 0.2685217,13.3408856 C0.2685217,9.32624718 1.19950709,6.09914393 3.0615058,3.65947904 C4.92350451,1.21981415 7.37077835,0 10.4034007,0 C12.9960572,0 15.1919257,0.936734916 16.9910721,2.81023285 C18.7902185,4.68373078 20.137594,7.43217279 21.033239,11.0556413 C21.9131708,7.43217279 23.2566181,4.68373078 25.0636211,2.81023285 Z" id="heart" fill="#000000" sketch:type="MSShapeGroup"></path>
    </g>
</svg>
              
            
!

CSS

              
                body{
    background-color: #000;
}

svg{
    display: none;
}
canvas{
    background-color: #131313;
    border: 1px solid #333;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    margin: auto;
    display: block;
}
              
            
!

JS

              
                path   = document.getElementById("heart")
canvas = document.getElementById("stage")

stage  = new createjs.Stage(canvas)

class Star
    constructor: (x = 0,y = 0) ->
        @stars     = new createjs.Container()
        colorDig   = Math.random() * 360 >> 0 # 色相
        pathLength = path.getTotalLength() # パスの全長

        # 星を作って親のコンテナに突っ込んでいく
        for i in [0...pathLength]
            point = path.getPointAtLength(i) # i の時点での座標情報を取得
            star  = new createjs.Shape()
            star.graphics.beginFill("hsl(#{colorDig}, 95%, 56%)").drawPolyStar(0, 0, 3, 5, 0.6, -90)
            star.set(
                x: point.x
                y: point.y
            )
            @stars.addChild(star)
            colorDig++

        # 星の位置セット
        @stars.set(
            x: x
            y: y
            alpha: 0
            scaleX: 0
            scaleY: 0
            regX: 20
            regY: 20
        )

        stage.addChild @stars

        # コンテナをステージ上に配置した時に起こすアニメーション
        createjs.Tween.get(@stars)
        .to(
            alpha: 1
            scaleX: 1
            scaleY: 1
        ,1000
        ,createjs.Ease.bounceOut
        )
        .call(@heartBreak) # 終わったら星をばらまくアニメーションへ

    heartBreak: =>

        lifeTime = 3000

        # 親のコンテナの alpha を変化させて、終了したらステージ上から消す
        createjs.Tween.get(@stars)
        .to(
            alpha: 0
        ,lifeTime)
        .call(->
            stage.removeChild @stars
            return
        )

        # パス上に配置した星をばらまくアニメーション
        for i in [0...@stars.getNumChildren()]
            star = @stars.getChildAt(i)

            # ランダムな方向へ Tween させる
            createjs.Tween.get(star)
            .to(
                x: Math.cos( Math.random() * 360 * Math.PI / 180 ) * Math.random() * 200
                y: Math.sin( Math.random() * 360 * Math.PI / 180 ) * Math.random() * 200
                scaleX: 3
                scaleY: 3
                rotation: 1000
            ,lifeTime)

document.addEventListener('DOMContentLoaded', ->
    createjs.Ticker.on('tick', (e) ->
        stage.update()
        return
    )

    # ステージ上をクリックしたら Star のインスタンスを作る
    stage.on('stagemousedown', (e) ->
        new Star(e.stageX,e.stageY)
        return
    )

    return
)
              
            
!
999px

Console