If you’re familiar with libraries such as React and Vue.js (or even jQuery) you should be fine.
There are many code examples hosted on CodePen. For example:
Clicking on the ‘Edit in CodePen’ button opens the example in CodePen.
Each example consists of three or more files:
index.html will usually look something like:
<svg width="760" height="140"> <g transform="translate(70, 70)"> </g> </svg>
(CodePen hides the usual boilerplate that starts
<!DOCTYPE html> and ends
index.html by CodePen. (I’ve also configured the examples to include D3.js.)
style.css contains your CSS code and is also automatically included into
index.html by CodePen.
Exporting from CodePen
CodePen has a nice feature where you can download the pen and work on it in your own code editor. You first need to save the pen then some buttons will appear in the bottom right. Click on Export and choose the Export as .zip option. This will result in a folder containing your code.
src directory contains the code as it appears in the pen and is perhaps not so useful. The
dist directory however has the complete code and can be edited locally, served locally (or uploaded to the web).