Skip to content

Instantly share code, notes, and snippets.

View style.scss
svg rect {
fill: rgba(95, 2, 184, 0.8);
transition: all 0.7s ease;
}
View index.html
<html>
<head>
<title>SVG line chart</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<script src="/bundle.js"></script>
</body>
View gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var htmlPath = 'src/**/*.html';
var jsPath = 'dist/**/*.js';
var sassPath = 'src/**/*.scss';
var distPath = 'dist/';
View webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
loaders: [{
View package.json
{
"name": "preact-svg",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "concurrently 'webpack -w' 'gulp'",
"build": "webpack -p"
},
"keywords": [],
View index.js
import { h, render, Component } from 'preact';
class App extends Component {
state = {
data: [99, 44, 11, 55, 33, 115, 4]
}
_shuffuleArray(array) {
var j, temp, i;
View animate.css
* {
box-sizing: border-box;
}
.boxes-container {
padding: 20px;
}
.boxes-container:after {
display: table;
View cups.svg.html
<svg id="cups" width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
<path id="simple-cup" d="M0.385262674,5.94224634 C0.385262674,6.34224634 -0.28516339,17.7539308 4.32901017,31.1532061 C5.32901017,32.3532061 6.09230991,37.8915223 7.49230991,42.9915223 C10.3923099,53.5915223 9.99336758,58.192 9.99336758,58.192 C9.99336758,58.192 9.99336758,59.1351801 9.99336758,62.192 L9.99336758,63.3762725 L14.9773381,65.692 C20.0773381,67.792 34,67.592 38.6,65.692 L44.0054662,63.992 L44.0054662,62.192 C44.0054662,60.3070603 44.0054662,61.2485521 44.0054662,59.5616903 C44.0054662,59.6227531 44.0054662,58.192 44.0054662,58.192 C44.0054662,58.192 44.0054662,56.0357788 44.0054662,56.0368563 C44.0054662,56.1443976 44.1584889,52.1913962 44.1513903,52.2148862 C44.18043,52.2064969 44.4505642,49.3217527 44.4611476,49.3039416 C44.0054662,46.9651447 46.7678097,39.091534 47.5678097,38.791534 C48.3678097,38.591534 52.8,37.6017328 55.4,37.0017328 C62.3288017,36.7364795 68.4691682,30.4573789 68.4691682,26.8
View cups.svg.raw
<svg id="cups" width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
<path id="simple-cup" d="M0.385262674,5.94224634 C0.385262674,6.34224634 -0.28516339,17.7539308 4.32901017,31.1532061 C5.32901017,32.3532061 6.09230991,37.8915223 7.49230991,42.9915223 C10.3923099,53.5915223 9.99336758,58.192 9.99336758,58.192 C9.99336758,58.192 9.99336758,59.1351801 9.99336758,62.192 L9.99336758,63.3762725 L14.9773381,65.692 C20.0773381,67.792 34,67.592 38.6,65.692 L44.0054662,63.992 L44.0054662,62.192 C44.0054662,60.3070603 44.0054662,61.2485521 44.0054662,59.5616903 C44.0054662,59.6227531 44.0054662,58.192 44.0054662,58.192 C44.0054662,58.192 44.0054662,56.0357788 44.0054662,56.0368563 C44.0054662,56.1443976 44.1584889,52.1913962 44.1513903,52.2148862 C44.18043,52.2064969 44.4505642,49.3217527 44.4611476,49.3039416 C44.0054662,46.9651447 46.7678097,39.091534 47.5678097,38.791534 C48.3678097,38.591534 52.8,37.6017328 55.4,37.0017328 C62.3288017,36.7364795 68.4691682,30.4573789 68.4691682,26.8
View cups.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.